CSS3幽灵
先來(lái)看看靜態(tài)效果圖：
要做的效果是鼠標(biāo)移到圖片上時(shí)，圖片旋轉(zhuǎn)360度并放大1.2倍
鼠標(biāo)移動(dòng)到下方框時(shí)，四周有四條線分別沿著四條框進(jìn)入，同時(shí)箭頭向左移動(dòng)
主要使用的CSS3屬性是transition，transform
transition用于定義過(guò)渡動(dòng)畫，比如：transition:all 1s; transition:width 1s;意思是所有css屬性改變的過(guò)渡時(shí)間為1s。這個(gè)屬性定義在需要進(jìn)行動(dòng)畫發(fā)生的那個(gè)元素的選擇器上面
transform用于變換，包括縮放scale(倍數(shù)，比如1.0、1.2)，平移translate(x坐標(biāo)，y坐標(biāo)),旋轉(zhuǎn)rotate(XXdeg)，語(yǔ)法：transform:ratate() translate() scale();
參考代碼如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>幽靈按鈕</title><style type="text/css">/*清除默認(rèn)邊距和內(nèi)填充*/*{margin:0;padding:0;}body{background: black;}#wrap{width: 900px;height: 300px;margin: 100px auto;/*元素居中*/}.box{height: 300px;width: 30%;float: left;}.box span{display: block;width: 100%;height: 200px;text-align: center;/*圖片元素會(huì)被視為文本內(nèi)容，水平居中可以使用text-align，但是畢竟不是文本，所以垂直不可以使用line-height*/padding-top: 50px;transition: all 1s; }.box span:hover{transform: rotate(360deg) scale(1.2);/*不可以在第二行另寫transform：scale(1.2)這樣只會(huì)覆蓋上一句，所以兩個(gè)效果必須一起寫，用空格隔開*/}.box a{border-radius: 5px;margin: auto;width: 80%;height: 50px;line-height: 55px;/*這里需要算上border的寬度*/padding: 5px;position: relative;/*用于四條動(dòng)畫邊的定位*/color: white;text-decoration: none;display: block;border: 2px green solid;background: url(img/allow.png) no-repeat 90%;transition: all 0.5s;}p{background: green;position: absolute;transition: all 0.5s;}.top{width: 0%;height: 2px;top: -2px;left: -50%;}.right{width: 2px;height: 0%;top: -100%;right: -2px;}.bottom{width: 0%;height: 2px;top: calc(100%+2px);left: 150%;}.left{width: 2px;height: 0%;top: 200%;left: -2px;}.box a:hover{background: url(img/allow.png) no-repeat 95%;}.box a:hover .top{width: 100%;left: -2px;}.box a:hover .right{height: 100%;top: -2px;}.box a:hover .bottom{width: 100%;left:-2px; }.box a:hover .left{height: 100%;top: -2px;}</style></head><body><div id="wrap"><div class="box"><span><img src="img/mission.png" alt="mission" /></span><a href="#">mission<p class="top"></p><p class="right"></p><p class="bottom"></p><p class="left"></p></a></div><div class="box"><span><img src="img/mission.png" alt="mission" /></span><a href="#">mission<p class="top"></p><p class="right"></p><p class="bottom"></p><p class="left"></p></a></div><div class="box"><span><img src="img/mission.png" alt="mission" /></span><a href="#">mission<p class="top"></p><p class="right"></p><p class="bottom"></p><p class="left"></p></a></div></div></body> </html>
這里說(shuō)一下四條邊制作的思路，拿左邊第一條為例。父元素設(shè)置為relative，因此，子元素會(huì)相對(duì)于父元素定位，假如第一條邊為top：0，left：0.則只會(huì)在父元素的邊框下面，而不會(huì)與邊框重疊，因此top需要設(shè)置為負(fù)的父元素的邊框長(zhǎng)度，這樣就會(huì)使得兩邊重合。然后通過(guò)定義left：-100%，將邊設(shè)置到左邊寬度為父元素寬度的地方，然后把width設(shè)置會(huì)0%，height為邊框高度，然后設(shè)置偽類選擇器，當(dāng)鼠標(biāo)移動(dòng)到邊框范圍，就觸發(fā)動(dòng)畫，在0.5s內(nèi)將邊的width變?yōu)?00%，并且改變left為：-2px；就可以做到同時(shí)邊大小改變且向父元素邊框靠近重合的效果
素材如下：
箭頭：
三張圖片（因?yàn)榘咨钥床灰?#xff09;：、、
轉(zhuǎn)載于:https://www.cnblogs.com/runhua/p/9622155.html
總結(jié)
- 上一篇： JQ实现当前页面导航加效果（栏目页有效）
- 下一篇： Fib(兔子问题)python实现多种方