主頁 > 知識庫 > css實現(xiàn)快速炫酷抖動動畫效果

css實現(xiàn)快速炫酷抖動動畫效果
熱門標(biāo)簽：團(tuán)購網(wǎng)站 百度競價排名 網(wǎng)站文章發(fā)布 科大訊飛語音識別系統(tǒng) 太平洋壽險電話營銷 網(wǎng)站排名優(yōu)化 國美全國運營中心 企業(yè)做大做強(qiáng)

1.Animate.css簡介

Animate.css是一個可在您的Web項目中使用的即用型跨瀏覽器動畫庫。非常適合強(qiáng)調(diào)，首頁，滑塊和引導(dǎo)注意的提示。它是一個來自國外的 CSS3 動畫庫，它預(yù)設(shè)了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達(dá) 60 多種動畫效果，幾乎包含了所有常見的動畫效果。雖然借助Animate.css 能夠很方便、快速的制作 CSS3 動畫效果，但還是建議看看Animate.css 的代碼，也許你能從中學(xué)到一些東西。不論是在Web端和小程序內(nèi)都可以正常使用，詳細(xì)內(nèi)容請到官方地址學(xué)習(xí)。

2.動畫效果的實現(xiàn)

在使用過程中，可以根據(jù)自己的喜好來改造css代碼來達(dá)到你想要的效果，文中動圖顯示可能不是特別直觀，建議自己寫一遍代碼，即利于學(xué)習(xí)，又能夠直觀的體會到動畫效果。

1.發(fā)光的盒子

wxml代碼：

<view id="box">I am LetCode!</view>

wxss代碼：

@keyframes animated-border {  
0% {  box-shadow: 0 0 0 0 rgba(255,255,255,0.4);   }  
100% {  box-shadow: 0 0 0 20px rgba(255,255,255,0);   } 
} 
#box { 
  animation: animated-border 1.5s infinite;
  height: 100rpx;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 2px solid;
  border-radius: 10px;
  margin: 100px 15px;
  line-height: 100rpx;
  text-align: center;
}

2.文字的縮放效果

wxml代碼：

<view class="animate_zoomOutDown">關(guān)注公眾號“Java技術(shù)迷”,有更多分享！</view>

wxss代碼：

@keyframes zoomOutDown 
{  
40% 
{  
opacity: 1; 
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);  
}  
to 
{ 
opacity: 0; 
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);   
} 
}
.animate_zoomOutDown
{ 
animation:2s linear 0s infinite alternate zoomOutDown; 
font-family: Arial;  
font-size: 18px;  
font-weight: bold;  
color: white;  
margin-top: 70px; 
text-align: center;  
margin-top: 15px; 
}

3.加載動畫

wxml代碼：

<view class="load-container load">  
<view class="loader">  
</view> 
</view> 
<view class="txt">關(guān)注公眾號“Java技術(shù)迷”,有更多分享！</view>

wxss代碼：

 .load-container
 { 
 width: 240px; 
 height: 240px;  margin: 0 auto; 
 position: relative;  
 overflow: hidden;
 box-sizing: border-box;
 }  
 .load .loader 
 {  
 color: #ffffff;  font-size: 90px;  text-indent: -9999em;  overflow: hidden;  
 width: 1em;  height: 1em;  border-radius: 50%;  
 margin: 72px auto;  
 position: relative;  transform: translateZ(0); 
 animation: load 1.7s infinite ease, round 1.7s infinite ease; 
 }  @keyframes load
 {  
 0% 
 { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
 }  
 5%, 95% 
 { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
 } 
 10%, 59% 
 {
 box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
 } 
 20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
 } 
 38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
 } 
 100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
 } 
 } 
 @keyframes round
 { 
 0% 
 { 
 transform: rotate(0deg);    
 } 
 100% 
 {  
 transform: rotate(360deg);     
 } 
 }

4.抖動的文字

wxml代碼：

<view class="shake-slow txt">關(guān)注公眾號“Java技術(shù)迷”,有更多分享！</view>

wxss代碼：

@keyframes shake-slow 
{ 
2%
{ 
transform: translate(6px, -2px) rotate(3.5deg);  
}  
4% 
{  
transform: translate(5px, 8px) rotate(-0.5deg);  
}  
6% 
{  transform: translate(6px, -3px) rotate(-2.5deg);   
}  
8% 
{  transform: translate(4px, -2px) rotate(1.5deg);  
}   
10% 
{  
transform: translate(-6px, 8px) rotate(-1.5deg);  
}   
12% 
{ 
transform: translate(-5px, 5px) rotate(1.5deg);  
} 
14% {  transform: translate(4px, 10px) rotate(3.5deg);  
}   16% {  transform: translate(0px, 4px) rotate(1.5deg); 
}   18% {  transform: translate(-1px, -6px) rotate(-0.5deg); 
}   20% {  transform: translate(6px, -9px) rotate(2.5deg); 
}  
22% {  transform: translate(1px, -5px) rotate(-1.5deg);  
}   24% {  transform: translate(-9px, 6px) rotate(-0.5deg); 
}   26% {  transform: translate(8px, -2px) rotate(-1.5deg);   
}   
28% {  transform: translate(2px, -3px) rotate(-2.5deg);   }   
30% 

{  transform: translate(9px, -7px) rotate(-0.5deg);   }   
32% 
{  transform: translate(8px, -6px) rotate(-2.5deg);   }   
34%
{  transform: translate(-5px, 1px) rotate(3.5deg);   }   
36%
{  transform: translate(0px, -5px) rotate(2.5deg);   }   
38% 
{  transform: translate(2px, 7px) rotate(-1.5deg);   }   
40% 
{  transform: translate(6px, 3px) rotate(-1.5deg);   }   
42% 
{  transform: translate(1px, -5px) rotate(-1.5deg);   }   
44%
{  transform: translate(10px, -4px) rotate(-0.5deg);   }  
46% {  transform: translate(-2px, 2px) rotate(3.5deg);   }   
48% {  transform: translate(3px, 4px) rotate(-0.5deg);   }   
50% {  transform: translate(8px, 1px) rotate(-1.5deg);   }   
52% {  transform: translate(7px, 4px) rotate(-1.5deg);   }   
54% {  transform: translate(10px, 8px) rotate(-1.5deg);   }   
56% {  transform: translate(-3px, 0px) rotate(-0.5deg);   }   
58% {  transform: translate(0px, -1px) rotate(1.5deg);   }   
60% {  transform: translate(6px, 9px) rotate(-1.5deg);   }  
62% {  transform: translate(-9px, 8px) rotate(0.5deg);   }  
64% {  transform: translate(-6px, 10px) rotate(0.5deg);   }  
66% {  transform: translate(7px, 0px) rotate(0.5deg);   }   
68% {  transform: translate(3px, 8px) rotate(-0.5deg);   }  
70% {  transform: translate(-2px, -9px) rotate(1.5deg);   }  
72% {  transform: translate(-6px, 2px) rotate(1.5deg);   }   
74% {  transform: translate(-2px, 10px) rotate(-1.5deg);   }  
76% {  transform: translate(2px, 8px) rotate(2.5deg);   }  
78% {  transform: translate(6px, -2px) rotate(-0.5deg);   }   
80% {  transform: translate(6px, 8px) rotate(0.5deg);   }  
82% {  transform: translate(10px, 9px) rotate(3.5deg);   }   
84% {  transform: translate(-3px, -1px) rotate(3.5deg);   }   
86% {  transform: translate(1px, 8px) rotate(-2.5deg);   }   
88% {  transform: translate(-5px, -9px) rotate(2.5deg);   }  
90% {  transform: translate(2px, 8px) rotate(0.5deg);   }  
92% {  transform: translate(0px, -1px) rotate(1.5deg);   }  
94% {  transform: translate(-8px, -1px) rotate(0.5deg);   }   
96% {  transform: translate(-3px, 8px) rotate(-1.5deg);   }  
98%

{  
transform: translate(4px, 8px) rotate(0.5deg);   
}  
0%,100%
{ 
transform: translate(0, 0) rotate(0);  
}
}  
.shake-slow
{ 
animation:shake-slow 5s infinite ease-in-out;
}

在實際開發(fā)過程中，遠(yuǎn)不止這些炫酷的動畫效果，在互聯(lián)網(wǎng)迅速的發(fā)展?fàn)顟B(tài)下，還需要更多的程序員來實現(xiàn)功能需求，因此本文只做簡單的介紹，未完待續(xù).....

到此這篇關(guān)于css實現(xiàn)快速炫酷抖動動畫效果的文章就介紹到這了,更多相關(guān)css抖動效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

標(biāo)簽：大同 泰州 保定 赤峰 延邊 萍鄉(xiāng) 林芝

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《css實現(xiàn)快速炫酷抖動動畫效果》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266