基于CSS制作創(chuàng)意端午節(jié)專屬加載特效
我要評(píng)論介紹
本期將帶給大家的是一個(gè)css創(chuàng)意特效——端午加載動(dòng)畫(huà)，想法是讓粽葉，糯米，紅棗繞圓旋轉(zhuǎn)，然后聚集起來(lái)融合后變成一個(gè)可愛(ài)的小粽子的效果。繼續(xù)閱讀你將會(huì)得到圖像外發(fā)光效果，濾鏡效果，動(dòng)畫(huà)樣式控制等知識(shí)。還等什么呢？趕緊抓緊學(xué)習(xí)，抓緊使用，不然就要等明年了~
演示
正文
挑選素材
本次我們分別會(huì)用到粽葉，糯米，紅棗，粽子4個(gè)素材，最簡(jiǎn)單快捷的辦法就是從confont官網(wǎng)上去挑選，然后直接拷貝的svg代碼粘貼到我們的項(xiàng)目中。
發(fā)光效果
因?yàn)榭紤]到素材中有糯米，其顏色偏白，故使用了黑色背景來(lái)使其更加醒目，同時(shí)為了不讓其生硬，所以這里用css給其增加了外發(fā)光效果。代碼非常簡(jiǎn)單只使用 filter: drop-shadow() 就可以做到，該方法是css將陰影效果應(yīng)用于輸入圖像。這樣圖像就可以非常簡(jiǎn)單的實(shí)現(xiàn)外發(fā)光的效果，但缺點(diǎn)也很非常致命，因?yàn)樗粫?huì)在 Chrome v.85.0.4183.121 以后才得到支持，要求的版本也算比較高了，當(dāng)然如果瀏覽器不支持也不會(huì)產(chǎn)生負(fù)面影響的。
.loading-item{
filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8))
}
聚集動(dòng)畫(huà)
在這時(shí)候我們就要開(kāi)始來(lái)寫(xiě)動(dòng)畫(huà)了，但在此之前，我們先定義好，動(dòng)畫(huà)的執(zhí)行周期，和延遲時(shí)間。這樣后面所有的動(dòng)畫(huà)都會(huì)使用到這兩個(gè)值，后期就隨時(shí)調(diào)整他們的參數(shù)，使之感覺(jué)上最佳。
$duration:4.2s; // 執(zhí)行周期 $delay:-$duration/2; // 延遲時(shí)間
這個(gè)主動(dòng)畫(huà)有兩部分組成，第一大部分是旋轉(zhuǎn)他們，我直接把三樣素材都放到了 div.loading-assets 容器中，然后對(duì)這個(gè)容器進(jìn)行360度的旋轉(zhuǎn)即可。
.loading-assets{
width: 100%;
height: 100%;
animation: rotate $duration infinite;
animation-delay: $delay;
}
@keyframes rotate{
0%,60%{
transform: rotate(0deg);
}
80%,100%{
transform: rotate(360deg);
}
}
然后就通過(guò)scss的 for語(yǔ)法 對(duì)這三個(gè)素材進(jìn)行遍歷，依次給他們附上三個(gè)不同的動(dòng)畫(huà)，每個(gè)動(dòng)畫(huà)就是根據(jù)其位置，然后更改方位，因?yàn)閷?xiě)了絕對(duì)定位都在中心點(diǎn)固定者，所以在其方向的偏移也不難計(jì)算。
.loading-item{
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: -30px 0 0 -30px;
filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8));
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
animation: #{'item-move-'+$i} $duration infinite;
animation-delay: $delay;
}
}
}
@keyframes item-move-1 {
0%,20%,100%{transform: translate(0,0) scale(1)}
40% {transform: translate(0,-18px) scale(.7)}
60% {transform: translate(0,-85px) scale(.7)}
80% {transform: translate(0,-85px) scale(.7)}
}
@keyframes item-move-2 {
0%,20%,100%{transform: translate(0,0) scale(1)}
40% {transform: translate(-16px, 12px) scale(.7)}
60% {transform: translate(-90px, 65px) scale(.7)}
80% {transform: translate(-90px, 65px) scale(.7)}
}
@keyframes item-move-3 {
0%,20%,100%{transform: translate(0,0) scale(1)}
40% {transform: translate(16px, 12px) scale(.7)}
60% {transform: translate(90px, 65px) scale(.7)}
80% {transform: translate(90px, 65px) scale(.7)}
}
融合效果
因?yàn)閯偛诺娜N素材聚集起來(lái)然后合成粽子的話，會(huì)感覺(jué)有些生硬，所以就要做出一個(gè)在感官上三種素材發(fā)生融合的效果。這里，我們用到了 svg的濾鏡效果：
.loading-item{
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: -30px 0 0 -30px;
filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8));
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
animation: #{'item-move-'+$i} $duration infinite;
animation-delay: $delay;
}
}
}
@keyframes item-move-1 {
0%,20%,100%{transform: translate(0,0) scale(1)}
40% {transform: translate(0,-18px) scale(.7)}
60% {transform: translate(0,-85px) scale(.7)}
80% {transform: translate(0,-85px) scale(.7)}
}
@keyframes item-move-2 {
0%,20%,100%{transform: translate(0,0) scale(1)}
40% {transform: translate(-16px, 12px) scale(.7)}
60% {transform: translate(-90px, 65px) scale(.7)}
80% {transform: translate(-90px, 65px) scale(.7)}
}
@keyframes item-move-3 {
0%,20%,100%{transform: translate(0,0) scale(1)}
40% {transform: translate(16px, 12px) scale(.7)}
60% {transform: translate(90px, 65px) scale(.7)}
80% {transform: translate(90px, 65px) scale(.7)}
}
其中， feGaussianBlur 標(biāo)簽的目的是為了對(duì)輸入圖像進(jìn)行高斯模糊，而 feColorMatrix 則是通過(guò)轉(zhuǎn)換矩陣來(lái)對(duì)色值進(jìn)行變換。
接下來(lái)，我們?cè)趧?chuàng)建一個(gè) mix動(dòng)畫(huà) 在其需要融合的關(guān)鍵位置 通過(guò) filter屬性 引入剛才做濾鏡效果，這一階段就大功告成了 。
.loading-assets{
width: 100%;
height: 100%;
animation: rotate $duration infinite,
mix $duration infinite;
animation-delay: $delay;
}
@keyframes mix{
0%,40%{
filter: url(#mix);
opacity: 1;
}
8%,36%{
opacity: 0;
}
48%,80%{
filter: none;
opacity: 1;
}
100%{
filter: url(#mix);
opacity: 1;
}
}
粽子出現(xiàn)
最后一步也是最簡(jiǎn)單的一步就是把可愛(ài)的小粽子對(duì)應(yīng)起剛才融合后的空隙那段時(shí)間顯示出來(lái)。
.loading-result{
width: 50px;
height: 50px;
left: 50%;
top: 50%;
position: absolute;
margin-left: -25px;
margin-top: -25px;
animation: show $duration infinite;
animation-delay: $delay;
filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.5))
}
@keyframes show{
0%,48%,100%{
opacity: 0;
transform:scale(1);
}
8%,36%{
opacity: 1;
transform:scale(1.5);
}
}
當(dāng)然，上面的代碼我們可以發(fā)現(xiàn)，在 show動(dòng)畫(huà) 中，粽子顯示的時(shí)候放大了1.5倍，目的是為了突出粽子完成合成操作的效果。還有畢竟三樣素材累加后肯定體積會(huì)變大的。
結(jié)語(yǔ)
粽粽情深，端午呈祥，醞釀了良多祝福，代替不了那句最樸實(shí)的祝福——端午節(jié)幸福安康！!
到此這篇關(guān)于基于CSS制作創(chuàng)意端午節(jié)專屬加載特效的文章就介紹到這了,更多相關(guān)css加載特效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS心形加載的動(dòng)畫(huà)源碼的實(shí)現(xiàn)
這篇文章主要介紹了CSS心形加載的動(dòng)畫(huà)源碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-08-10
這篇文章主要介紹了CSS動(dòng)態(tài)條形加載條效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-07
實(shí)現(xiàn)點(diǎn)擊按鈕后CSS加載效果的實(shí)現(xiàn)
這篇文章主要介紹了實(shí)現(xiàn)點(diǎn)擊按鈕后CSS加載效果的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2019-05-09
可能大家都知道，js執(zhí)行會(huì)阻塞DOM樹(shù)的解析和渲染，那么css加載會(huì)阻塞DOM樹(shù)的解析和渲染嗎？下面就跟隨小編一起來(lái)了解一下2019-02-13- 這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問(wèn)題思路解析，文中還給大家補(bǔ)充介紹了關(guān)于html，css，js三者的加載順序問(wèn)題，需要的朋友參考下吧2017-12-25
