站長資訊網(wǎng)
之前的文章《新手篇：如何用css制作圖片文字排版（代碼分享）》中，給大家介紹了如何用css制作圖片文字排版。下面本篇文章給大家介紹怎么使用CSS實(shí)現(xiàn)逼真的水波紋點(diǎn)擊效果，我們一起看怎么做。
網(wǎng)頁中常常有這樣的CSS水波紋的效果，給大家分享一下看效果圖看完效果，我們來研究一下是怎么實(shí)現(xiàn)呢，給大家用于講解html+css圖片文字排版的基本流程。
1、首先html創(chuàng)建新文件，定義6個(gè)div標(biāo)簽。
<div class="wave wave5"></div> <div class="wave wave4"></div> <div class="wave wave3"></div> <div class="wave wave2"></div> <div class="wave wave1"></div> <div class="wave wave0"></div>
2、div盒子的class設(shè)置為“.wave”給它樣式設(shè)置添加元素絕對(duì)定位，語法“position:absolute;left:100px;top:150px”。
代碼示例
.wave{ position:absolute; top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); }
3、wave標(biāo)題文本樣式給添加尺寸寬度設(shè)置為30px，高度設(shè)置為30px；給元素添加圓角的邊框border-radius屬性。
{ width:30px; height:30px; border-radius:300p }
4、wave標(biāo)題文本樣式給插入圖片添加background屬性一個(gè)div元素中設(shè)置背景圖像
background:url(圖片地址)
5、wave標(biāo)題文本樣式利用background-attachment屬性設(shè)置為 "fixed（固定）；利用background-position屬性設(shè)置背景圖像的起始位置。
background-attachment:fixed; background-position:center center
代碼效果
6、div盒子的class設(shè)置為“wave0-5”給它樣式設(shè)置設(shè)置圖像的z-index屬性；再給background-size屬性指定背景圖像的大小；動(dòng)畫animation綁定到一個(gè)<div>元素，只要把六個(gè)div疊在一起，搭配CSS的animation，就可以讓六個(gè)div依序出現(xiàn)。
代碼示例
.wave0{ z-index:2; background-size:auto 106%; animation:w 1s forwards; } .wave1{ z-index:3; background-size:auto 102%; animation:w 1s .2s forwards; } .wave2{ z-index:4; background-size:auto 104%; animation:w 1s .4s forwards; } .wave3{ z-index:5; background-size:auto 101%; animation:w 1s .5s forwards; } .wave4{ z-index:6; background-size:auto 102%; animation:w 1s .8s forwards; } .wave5{ z-index:7; background-size:auto 100%; animation:w 1s 1s forwards; }
代碼效果
7、通過@keyframes規(guī)則，創(chuàng)建動(dòng)畫是通過逐步改變0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成，注意: 使用animation屬性來控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。
@keyframes w{ 0%{ top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; } 100%{ top:calc((100% - 300px)/2); left:calc((100% - 300px)/2); width:300px; height:300px; }
代碼效果
ok,代碼完成
完整代碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .wave{ position:absolute; top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; border-radius:300px; background:url(dsd.jpg); background-attachment:fixed; background-position:center center; } .wave0{ z-index:2; background-size:auto 106%; animation:w 1s forwards; } .wave1{ z-index:3; background-size:auto 102%; animation:w 1s .2s forwards; } .wave2{ z-index:4; background-size:auto 104%; animation:w 1s .4s forwards; } .wave3{ z-index:5; background-size:auto 101%; animation:w 1s .5s forwards; } .wave4{ z-index:6; background-size:auto 102%; animation:w 1s .8s forwards; } .wave5{ z-index:7; background-size:auto 100%; animation:w 1s 1s forwards; } @keyframes w{ 0%{ top:calc((100% - 30px)/2); left:calc((100% - 30px)/2); width:30px; height:30px; } 100%{ top:calc((100% - 300px)/2); left:calc((100% - 300px)/2); width:300px; height:300px; } } </style> </head> <body> <div class="wave wave5"></div> <div class="wave wave4"></div> <div class="wave wave3"></div> <div class="wave wave2"></div> <div class="wave wave1"></div> <div class="wave wave0"></div> </body> </html>
推薦學(xué)習(xí)：CSS視頻教程
