css3點(diǎn)擊顯示漣漪特效

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:49:47

css3點(diǎn)擊顯示漣漪特效

css3點(diǎn)擊顯示漣漪特效:css3點(diǎn)擊顯示漣漪特效，怎樣用css3做出點(diǎn)擊顯示漣漪特效，點(diǎn)擊顯示漣漪的特效需要注意哪些方面？下面給大家做一個(gè)案例.<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <ti

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀css3點(diǎn)擊顯示漣漪特效:css3點(diǎn)擊顯示漣漪特效，怎樣用css3做出點(diǎn)擊顯示漣漪特效，點(diǎn)擊顯示漣漪的特效需要注意哪些方面？下面給大家做一個(gè)案例.<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <ti

css3點(diǎn)擊顯示漣漪特效，怎樣用css3做出點(diǎn)擊顯示漣漪特效，點(diǎn)擊顯示漣漪的特效需要注意哪些方面？下面給大家做一個(gè)案例.

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>css3點(diǎn)擊出現(xiàn)不同顏色漣漪特效</title>
<meta name="keywords" content=" css3點(diǎn)擊出現(xiàn)不同顏色漣漪特效 " />
<meta name="description" content=" css3點(diǎn)擊出現(xiàn)不同顏色漣漪特效 " />
 <style>
 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
 .ripple{
 position:absolute;
 width:100vmax;
 height:100vmax;
 top:-50vmax;
 left:-50vmax;
 border-radius:50%;
}
body{
 overflow:hidden;
}
.pad{
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
}
 </style>
</head>
<body>
 <!-- touch or click -->
<div></div>
 <script src="js/index.js"></script> 
</body>
</html>
Css部分：
.ripple{
 position:absolute;
 width:100vmax;
 height:100vmax;
 top:-50vmax;
 left:-50vmax;
 border-radius:50%;
}
body{
 overflow:hidden;
}
.pad{
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
}

Css3點(diǎn)擊顯示漣漪特效就這么多了，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

CSS3怎么制作蝴蝶飛舞的動(dòng)畫

怎樣用canvas實(shí)現(xiàn)小球和鼠標(biāo)的互動(dòng)

怎樣用canvas做出粒子噴泉?jiǎng)赢嫷男Ч?/p>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com