這篇文章跟大家介紹一下巧用 CSS實現水波紋的電池充電動畫特效的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
我們知道構成前端的三大語言有：html、css和js#，其中最神秘的便是css，為什麼這麼說呢？自從動畫、過度等屬性的出現，可以說只有你想不到，就沒有做不到～
上一篇文章介紹了一種手機充電動畫效果，今天就延續一下，這個相比於上篇的就有點簡單了，不過為了女朋友，特意就寫一下吧～
特效：電池充電特效，整體特效可在最上方看到
要想完成這個特效，就必須知道一些前置的屬性，簡單介紹一下：
animation 、transform 和filter 這三個就不多做介紹了，基本上所有的動畫都會用到這兩個屬性。 【建議學習：css影片教學】
box-shadow：陰影
用法：box-shadow: h-shadow v-shadow blur spread color inset;
border-radius：設定圓角
可設定四個值，與margin、padding 的使用方法一樣
左上角，右上角，右下角，左下角。
linear-gradient():漸變，用於建立一個表示兩種或多種顏色線性漸層的圖片。
用法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
border-radius設定下週邊的圓角，並且加入box -shadow加入陰影，增強立體感
top#來控制水的位置，top的值越大水越低，top的值越小水越高
linear-gradient() 來設定水的一個漸層色：
top。就會造成水的上升，像這樣
這個屬性控制
.content{ //容器
border-radius: 15px 15px 5px 5px;
&::after{
position: absolute;
top: 80%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: change 10s linear infinite;
filter: hue-rotate(90deg);
}
}
@keyframes change {
30% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(8, 117, 134, 0.4);
}
50%{
filter: hue-rotate(60deg);
}
80% {
top: 20%;
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(6, 136, 153, 0.2), 0 10px 10px rgba(12, 10, 112, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4);
}
}
translate這個屬性，透過轉換x、y值，然後經過不停的旋轉角度，至於數值為啥是這個值，我也搞不清楚。 。 。有知道的朋友可以在留言區留言.
p{ //复盖
border-radius: 45% 47% 44% 42%;
transform: translate(-50%, 0);
animation: move 10s linear infinite;
}
@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
此时，我们发现这个效果并不太真实，进行多覆盖两个，改变旋转值和border-radius的值来设置水面不重叠，但又有差距的效果
p{
&:nth-child(2){
border-radius: 38% 46% 43% 47%;
transform: translate(-50%, 0) rotate(-135deg);
}
&:nth-child(3){
border-radius: 42% 46% 37% 40%;
transform: translate(-50%, 0) rotate(135deg);
}
}此时的效果就非常真实了
不得不说css真的很神奇，最神秘的莫过于css，喜欢的点个赞??支持下吧(●￣(ｴ)￣●)
（学习视频分享：web前端）
以上是純CSS實現水波紋的電池充電動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
