時(shí)間：2023-09-05 06:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-05 06:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
html+css帶你制作網(wǎng)頁(yè)水波特效：在這里分享一個(gè)我平時(shí)常用的水波特效步驟，加在按鈕上特好使。
在線咨詢(xún)
<body style="background-color: cadetblue ;"> <div class="video"></div></body>css部分，先設(shè)置好div的基本屬性.video { /* 基本屬性 */ width: 100px; height: 100px; border-radius: 50px; /* 給背景顏色添加不透明度 */ /* 不透明度還可以通過(guò)添加opacity屬性修改 */ background-color: rgb(255, 255, 255, 0.6);}然后就是在video中添加這個(gè)特效中重中之重的內(nèi)容，在css中設(shè)置animation。.video { /* 添加ripple動(dòng)畫(huà)效果 */ /* -webkit-animation適配-webkit內(nèi)核的瀏覽器*/ -webkit-animation: ripple 1s linear infinite; animation: ripple 1s linear infinite;}/* 定義ripple動(dòng)畫(huà)效果 */@-webkit-keyframes ripple { /* 關(guān)鍵幀播放到0%時(shí)的狀態(tài) */ 0% { /* 在box四周添加三層白色陰影 */ box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } /* 關(guān)鍵幀播放到100%時(shí)的狀態(tài) */ 100% { /* 分別改變?nèi)龑雨幱暗木嚯x 形成兩幀的動(dòng)畫(huà),然后在transition的過(guò)渡下形成動(dòng)畫(huà) */ box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); }}/* 多種瀏覽器兼容性設(shè)置 */@keyframes ripple { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); }}其中，linear是表示動(dòng)畫(huà)的timing-function，其總共大致有以下幾種效果。/* 鼠標(biāo)懸浮時(shí)的狀態(tài) */.video:hover { /* 背景顏色不透明度變化 */ background-color: #FFFFFF; /* 將對(duì)象放大1.2倍 */ transform: scale(1.2); }再給div添加一個(gè)transition屬性，讓div在鼠標(biāo)移動(dòng)的時(shí)候能自然過(guò)渡，其原理跟animation類(lèi)似。.video { /* 添加動(dòng)畫(huà)的過(guò)渡效果 */ transition: all 0.3s ease-in-out;}然后就能得到我們的結(jié)果，整體的代碼如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .video { width: 100px; height: 100px; border-radius: 50px; background-color: rgb(255, 255, 255, 0.6); transition: all 0.3s ease-in-out; -webkit-animation適配-webkit內(nèi)核的瀏覽器*/ -webkit-animation: ripple 1s linear infinite; animation: ripple 1s linear infinite; } .video:hover { background-color: #FFFFFF; transform: scale(1.2); } @-webkit-keyframes ripple { 0% { /* 在box四周添加三層白色陰影 */ box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } 100% { /* 分別改變?nèi)龑雨幱暗木嚯x 形成兩幀的動(dòng)畫(huà),然后在transition的過(guò)渡下形成動(dòng)畫(huà) */ box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); } } @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%); } 100% { box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 0 0 0 20px rgb(255 255 255 / 25%), 0 0 0 40px rgba(50, 100, 245, 0); } } </style> </head> <body style="background-color: cadetblue ;"> <div class="video"></div> </body></html>關(guān)鍵詞：
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
