css動態特效怎麼製作（css帶你製作網頁水波特效）

2023-04-21 03:52:01

在這裡分享一個我平時常用的水波特效步驟，加在按鈕上特好使。

首先，是直接創建一個div盒子，不需要在裡面添加其他內容，我們直接對盒子本身添加css就能形成水波效果。

html部分，我們div添加白色的波紋，所以在這裡設置html背景為藍色。

css部分，先設置好div的基本屬性

.video { /* 基本屬性 */ width: 100px; height: 100px; border-radius: 50px; /* 給背景顏色添加不透明度 */ /* 不透明度還可以通過添加opacity屬性修改 */ background-color: rgb(255, 255, 255, 0.6);}

然後就是在video中添加這個特效中重中之重的內容，在css中設置animation。

Animation 是由三部分組成。

關鍵幀(keyframes) – 以幀的形式定義動畫在不同階段的狀態。如果是不同時間下形狀發生的變化大多可以用動畫的0%，50%，100%表示不同幀對象的變化如果是不同時間下位置發生的變化大多可以用from，to來表示不同幀對象的變化動畫屬性(properties) – 決定動畫的播放時長，播放次數，以及用何種函數式去播放動畫等。語法：name duration timing-function delay iteration-count direction fill-mode play-state;css屬性 – 就是css元素來表示不同關鍵幀下的狀態。

.video { /* 添加ripple動畫效果 */ /* -webkit-animation適配-webkit內核的瀏覽器*/ -webkit-animation: ripple 1s linear infinite; animation: ripple 1s linear infinite;}/* 定義ripple動畫效果 */@-webkit-keyframes ripple { /* 關鍵幀播放到0%時的狀態 */ 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%時的狀態 */ 100% { /* 分別改變三層陰影的距離形成兩幀的動畫,然後在transition的過渡下形成動畫 */ 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); }}

其中，linear是表示動畫的timing-function，其總共大致有以下幾種效果。

圖源水印

為了實現按鈕的響應式操作，我們可以給div再加上一個hover選擇器

/* 滑鼠懸浮時的狀態 */.video:hover { /* 背景顏色不透明度變化 */ background-color: #FFFFFF; /* 將對象放大1.2倍 */ transform: scale(1.2); }

再給div添加一個transition屬性，讓div在滑鼠移動的時候能自然過渡，其原理跟animation類似。

.video { /* 添加動畫的過渡效果 */ transition: all 0.3s ease-in-out;}

然後就能得到我們的結果，整體的代碼如下

.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內核的瀏覽器*/ -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% { /* 分別改變三層陰影的距離形成兩幀的動畫,然後在transition的過渡下形成動畫 */ 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); } }