在這裡分享一個我平時常用的水波特效步驟，加在按鈕上特好使。
首先，是直接創建一個div盒子，不需要在裡面添加其他内容，我們直接對盒子本身添加css就能形成水波效果。
html部分，我們div添加白色的波紋，所以在這裡設置html背景為藍色。
<body style="background-color: cadetblue ;">
<div class="video"></div>
</body>
css部分，先設置好div的基本屬性
.video {
/* 基本屬性 */
width: 100px;
height: 100px;
border-radius: 50px;
/* 給背景顔色添加不透明度 */
/* 不透明度還可以通過添加opacity屬性修改 */
background-color: rgb(255, 255, 255, 0.6);
}
然後就是在video中添加這個特效中重中之重的内容，在css中設置animation。
Animation 是由三部分組成。
.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;
}
然後就能得到我們的結果，整體的代碼如下
<!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内核的浏覽器*/
-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);
}
}
</style>
</head>
<body style="background-color: cadetblue ;">
<div class="video"></div>
</body>
</html>
效果圖
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
