基于CSS制作創(chuàng)意端午節(jié)專屬加載特效
我要評論介紹
本期將帶給大家的是一個css創(chuàng)意特效——端午加載動畫，想法是讓粽葉，糯米，紅棗繞圓旋轉，然后聚集起來融合后變成一個可愛的小粽子的效果。繼續(xù)閱讀你將會得到圖像外發(fā)光效果，濾鏡效果，動畫樣式控制等知識。還等什么呢？趕緊抓緊學習，抓緊使用，不然就要等明年了~
演示
正文
挑選素材
本次我們分別會用到粽葉，糯米，紅棗，粽子4個素材，最簡單快捷的辦法就是從confont官網上去挑選，然后直接拷貝的svg代碼粘貼到我們的項目中。
發(fā)光效果
因為考慮到素材中有糯米，其顏色偏白，故使用了黑色背景來使其更加醒目，同時為了不讓其生硬，所以這里用css給其增加了外發(fā)光效果。代碼非常簡單只使用 filter: drop-shadow() 就可以做到，該方法是css將陰影效果應用于輸入圖像。這樣圖像就可以非常簡單的實現(xiàn)外發(fā)光的效果，但缺點也很非常致命，因為它只會在 Chrome v.85.0.4183.121 以后才得到支持，要求的版本也算比較高了，當然如果瀏覽器不支持也不會產生負面影響的。
.loading-item{
filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8))
}
聚集動畫
在這時候我們就要開始來寫動畫了，但在此之前，我們先定義好，動畫的執(zhí)行周期，和延遲時間。這樣后面所有的動畫都會使用到這兩個值，后期就隨時調整他們的參數(shù)，使之感覺上最佳。
$duration:4.2s; // 執(zhí)行周期 $delay:-$duration/2; // 延遲時間
這個主動畫有兩部分組成，第一大部分是旋轉他們，我直接把三樣素材都放到了 div.loading-assets 容器中，然后對這個容器進行360度的旋轉即可。
.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);
}
}
然后就通過scss的 for語法 對這三個素材進行遍歷，依次給他們附上三個不同的動畫，每個動畫就是根據(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)}
}
融合效果
因為剛才的三種素材聚集起來然后合成粽子的話，會感覺有些生硬，所以就要做出一個在感官上三種素材發(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 標簽的目的是為了對輸入圖像進行高斯模糊，而 feColorMatrix 則是通過轉換矩陣來對色值進行變換。
接下來，我們在創(chuàng)建一個 mix動畫 在其需要融合的關鍵位置 通過 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)
最后一步也是最簡單的一步就是把可愛的小粽子對應起剛才融合后的空隙那段時間顯示出來。
.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);
}
}
當然，上面的代碼我們可以發(fā)現(xiàn)，在 show動畫 中，粽子顯示的時候放大了1.5倍，目的是為了突出粽子完成合成操作的效果。還有畢竟三樣素材累加后肯定體積會變大的。
結語
粽粽情深，端午呈祥，醞釀了良多祝福，代替不了那句最樸實的祝福——端午節(jié)幸福安康！!
到此這篇關于基于CSS制作創(chuàng)意端午節(jié)專屬加載特效的文章就介紹到這了,更多相關css加載特效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了CSS心形加載的動畫源碼的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-08-10
這篇文章主要介紹了CSS動態(tài)條形加載條效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-07
這篇文章主要介紹了實現(xiàn)點擊按鈕后CSS加載效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-05-09
可能大家都知道，js執(zhí)行會阻塞DOM樹的解析和渲染，那么css加載會阻塞DOM樹的解析和渲染嗎？下面就跟隨小編一起來了解一下2019-02-13- 這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問題思路解析，文中還給大家補充介紹了關于html，css，js三者的加載順序問題，需要的朋友參考下吧2017-12-25
