建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“純CSS怎么實(shí)現(xiàn)水波紋的電池充電動(dòng)畫特效”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“純CSS怎么實(shí)現(xiàn)水波紋的電池充電動(dòng)畫特效”吧!
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的劍川網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
前置知識(shí)：
要想完成這個(gè)特效，就必須要知道一些前置的屬性，簡(jiǎn)單介紹一下吧：
animation、transform和 filter這三個(gè)就不多做介紹了，基本上所有的動(dòng)畫都會(huì)用到這兩個(gè)屬性。
box-shadow
box-shadow：陰影
用法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必填的，水平陰影的位置，允許負(fù)值
v-shadow：必需的。垂直陰影的位置。允許負(fù)值
blur：模糊距離
spread：陰影的大小
color：陰影的顏色
inset：從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影
border-radius
border-radius：設(shè)置圓角
可設(shè)置四個(gè)值，與 margin、padding 的使用方法一樣
也就是每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。
如果省略左下角，右上角是相同的。
如果省略右下角，左上角是相同的。
如果省略右上角，左上角是相同的。
linear-gradient()
linear-gradient():漸變，用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。
用法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction： 用角度值指定漸變的方向（或角度），制定方向
color...： 依次有什么顏色變?yōu)槭裁搭伾?/p>
容器
我們?cè)O(shè)置兩個(gè) div ,一個(gè)座位底部的容器，上面弄個(gè)小蓋子，主要通過border-radius設(shè)置下周邊的圓角，并且加入box-shadow加入陰影，增強(qiáng)立體感
充電效果
這里可以使用定位布局，通過top來(lái)控制水的位置，top的值越大水越低，top的值越小水越高
我們把水位設(shè)置為80%，同時(shí)通過linear-gradient()來(lái)設(shè)置水的一個(gè)漸變色：
那么動(dòng)畫就很簡(jiǎn)單了，只需要控制 top值就會(huì)造成水的上升，像這樣
這時(shí)需要注意的點(diǎn)是：
最上方我們的容器設(shè)置了圓角，所以在動(dòng)畫到100%的時(shí)候，要和容器的圓角一樣
水位在移動(dòng)，為了增強(qiáng)立體感，可設(shè)置陰影，可以以有個(gè)遞進(jìn)的效果，所以顏色最好稍微變深一點(diǎn)，并且顏色最好偏近
變色還是通過：
filter: hue-rotate();這個(gè)屬性控制
.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);
}
}
水波紋特效
這個(gè)特效相信大家都見過，其思想就是在上面的大概位置上設(shè)置背景顏色，用相同的底色覆蓋，
然后用到translate這個(gè)屬性，通過轉(zhuǎn)化x、y值，然后通過不停的旋轉(zhuǎn)角度，至于數(shù)值為啥是這個(gè)值，我也搞不清楚。。。有知道的小伙伴可以在評(píng)論區(qū)留言.
p{ //復(fù)蓋
border-radius: 45% 47% 44% 42%;
transform: translate(-50%, 0);
animation: move 10s linear infinite;
}
@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
此時(shí)，我們發(fā)現(xiàn)這個(gè)效果并不太真實(shí)，進(jìn)行多覆蓋兩個(gè)，改變旋轉(zhuǎn)值和border-radius的值來(lái)設(shè)置水面不重疊，但又有差距的效果
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);
}
}此時(shí)的效果就非常真實(shí)了
到此，相信大家對(duì)“純CSS怎么實(shí)現(xiàn)水波紋的電池充電動(dòng)畫特效”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)頁(yè)名稱：純CSS怎么實(shí)現(xiàn)水波紋的電池充電動(dòng)畫特效
鏈接地址：http://www.dlmjj.cn/article/jsejsc.html
