CSS實(shí)現(xiàn)微信掃碼特效
發(fā)布時間：2016-01-12 16:10:51 作者：佚名 
我要評論
我要評論這篇文章主要介紹了微信掃碼特效 的相關(guān)資料,需要的朋友可以參考下
微信掃碼效果如下所示：
下面是實(shí)際效果：(可以自己移動鼠標(biāo)，嘗試效果)
(由于篇幅長度，沒有加兼容性前綴，演示環(huán)境為谷歌瀏覽器。)
現(xiàn)在就一個一個效果單獨(dú)演示：
演示demo的HTML內(nèi)容為：
復(fù)制代碼
代碼如下:<div class="moyu">魔芋</div>
CSS：
復(fù)制代碼
代碼如下:div {
width:px;
height:px;
background: red;
margin:px;
color:#fff;
line-height:px;
font-size:px;
text-align:center;
}
--------------------------------------------------------------------------------
淡入：（改變透明度）
復(fù)制代碼
代碼如下:moyu {
-webkit-animation: change s ease;
animation: change s ease;
}
@-webkit-keyframes change {
%{
opacity:;
}
%{
opacity:;
}
}
@keyframes change {
%{
opacity:;
}
%{
opacity:;
}
}
效果：
淡出就是調(diào)整opacity從1到0.
淡入-從下
說明：就是加是transform 的translate
復(fù)制代碼
代碼如下:moyu {
-webkit-animation: change s ease infinite;
animation: change s ease infinite;
}
@-webkit-keyframes change {
%{
opacity:;
-webkit-transform:translateY(-px);
transform:translateY(-px);
}
%{
opacity:;
-webkit-transform:translateY(px);
transform:translateY(px);
}
}
@keyframes change {
%{
opacity:;
-webkit-transform:translateY(-px);
transform:translateY(-px);
}
%{
opacity:;
-webkit-transform:translateY(px);
transform:translateY(px);
}
}
（魔芋解釋：由于錄制gif圖片效果不是很好，請見諒。）
彈跳
改變transform:translateY的值
復(fù)制代碼
代碼如下:@-webkit-keyframes change {
%,
%,
%,
%,
%{
-webkit-transform: translateY();
}
%{
-webkit-transform: translateY(-px);
}
%{
-webkit-transform: translateY(-px);
}
}
彈入透明度結(jié)合transform:scale
復(fù)制代碼
代碼如下:@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: scale(.);
}
%{
opacity:;
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale();
}
}
轉(zhuǎn)入
復(fù)制代碼
代碼如下:@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: rotate(-deg);
}
%{
opacity:;
-webkit-transform: rotate();
}
}
翻轉(zhuǎn)
復(fù)制代碼
代碼如下:@keyframes change {
%{
transform: perspective(px) rotateY();
animation-timing-function: ease-out;
}
%{
transform: perspective(px) translateZ(px) rotateY(deg);
animation-timing-function: ease-out;
}
%{
transform: perspective(px) rotateY(deg) scale(.);
animation-timing-function: ease-in;
}
%{
transform: perspective(px) scale();
animation-timing-function: ease-in;
}
}
閃爍
復(fù)制代碼
代碼如下:@keyframes change {
%,
%,
%{
opacity:;
}
%,
%{
opacity:;
}
}
震顫
復(fù)制代碼
代碼如下:@keyframes change{
%,
%{
transform: translateX();
}
%,
%,
%,
%,
%{
transform: translateX(-px);
}
%,
%,
%,
%{
transform: translateX(px);
}
}
搖擺：
復(fù)制代碼
代碼如下:@keyframes change{
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate();
}
}
搖晃：
復(fù)制代碼
代碼如下:@keyframes change{
%{
transform: translateX();
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX(px) rotate(deg);
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX(px) rotate(deg);
}
%{
transform: translateX(-px) rotate(-deg);
}
%{
transform: translateX();
}
}
響鈴：
復(fù)制代碼
代碼如下:@keyframes change {
%{
transform: scale();
}
%,
%{
transform: scale(.) rotate(-deg);
}
%,
%,
%,
%{
transform: scale(.) rotate(deg);
}
%,
%,
%{
transform: scale(.) rotate(-deg);
}
%{
transform: scale() rotate();
}
}
相關(guān)文章
- 滴滴打車軟件補(bǔ)貼模式仍在繼續(xù)，近日滴滴上線出租車乘客用微信掃碼支付就能優(yōu)惠車費(fèi)的活動，本文我們就一起來看看滴滴打車出租車微信掃碼支付立減車費(fèi)送紅包詳情。2015-06-14
微信掃碼關(guān)注諸葛理財 100%得1~5元微信現(xiàn)金紅包 秒到賬
活動期間參與諸葛理財舉辦的關(guān)注微信送紅包活動的用戶，通過成功關(guān)注【諸葛理財】官方微信號并點(diǎn)擊自動推送內(nèi)容進(jìn)入活動頁面使用手機(jī)號碼完成注冊即可100%獲得1-5.2元微信2015-05-19微信掃碼注冊簡理財 秒提現(xiàn)2.19元 累計(jì)收益15.33元(親測提現(xiàn))
微信掃碼注冊簡理財，秒提現(xiàn)2.19元，另送10000元體驗(yàn)金，累計(jì)收益15.33元。小編親測提現(xiàn)是秒到銀行卡的，小編就為大家操作流程，一起來看看吧2015-05-07微信掃碼關(guān)注搜狐視頻公眾號活動 最高領(lǐng)28天去廣告會員
微信掃碼關(guān)注搜狐視頻公眾號即可100%領(lǐng)取7天以上搜狐視頻去廣告會員特權(quán)，感興趣的朋友們可以關(guān)注看看2015-04-13- 近日騰訊應(yīng)用寶上線掃紅碼搶紅包活動，下面小編就為大家?guī)響?yīng)用寶微信掃碼下載百分百得紅包2015-03-30
微信掃碼安裝快樂賺 100%免費(fèi)領(lǐng)取微信現(xiàn)金紅包(僅安卓手機(jī))
微信又出活動了，這次是掃描安裝快樂賺，就可100%免費(fèi)領(lǐng)取微信現(xiàn)金紅包。教程很簡單哦，下面就為大家介紹一下，不過這次活動僅限安卓手機(jī)，蘋果手機(jī)是沒有的2015-01-14