欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)微信掃碼特效

  發(fā)布時(shí)間：2016-01-12 16:10:51   作者：佚名   我要評(píng)論
這篇文章主要介紹了微信掃碼特效 的相關(guān)資料,需要的朋友可以參考下

 微信掃碼效果如下所示：

下面是實(shí)際效果：(可以自己移動(dòng)鼠標(biāo)，嘗試效果)
(由于篇幅長(zhǎng)度，沒有加兼容性前綴，演示環(huán)境為谷歌瀏覽器。)

現(xiàn)在就一個(gè)一個(gè)效果單獨(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.
淡入-從下
說(shuō)明：就是加是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圖片效果不是很好，請(qǐng)見諒。）

彈跳

改變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)文章

最新評(píng)論