微信掃碼效果如下所示：
下面是實際效果：(可以自己移動滑鼠，嘗試效果)
(由于篇幅長度，沒有加相容性字首，示範環境為谷歌浏覽器。)
現在就一個一個效果單獨示範：
示範demo的HTML内容為：
複制代碼代碼如下:
魔芋
CSS：
複制代碼代碼如下:
div {
width:px;
height:px;
background: red;
margin:px;
color:#fff;
line-height:px;
font-size:px;
text-align:center;
}
--------------------------------------------------------------------------------
淡入：(改變透明度)
複制代碼代碼如下:
moyu {
-webkit-animation: change s ease;
animation: change s ease;
}
@-webkit-keyframes change {
%{
opacity:;
}
%{
opacity:;
}
}
@keyframes change {
%{
opacity:;
}
%{
opacity:;
}
}
效果：
淡出就是調整opacity從1到0.
淡入-從下
說明：就是加是transform 的translate
複制代碼代碼如下:
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的值
複制代碼代碼如下:
@-webkit-keyframes change {
%,
%,
%,
%,
%{
-webkit-transform: translateY();
}
%{
-webkit-transform: translateY(-px);
}
%{
-webkit-transform: translateY(-px);
}
}
彈入透明度結合transform:scale
複制代碼代碼如下:
@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: scale(.);
}
%{
opacity:;
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale(.);
}
%{
-webkit-transform: scale();
}
}
轉入
複制代碼代碼如下:
@-webkit-keyframes change {
%{
opacity:;
-webkit-transform: rotate(-deg);
}
%{
opacity:;
-webkit-transform: rotate();
}
}
翻轉
複制代碼代碼如下:
@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;
}
}
閃爍
複制代碼代碼如下:
@keyframes change {
%,
%,
%{
opacity:;
}
%,
%{
opacity:;
}
}
震顫
複制代碼代碼如下:
@keyframes change{
%,
%{
transform: translateX();
}
%,
%,
%,
%,
%{
transform: translateX(-px);
}
%,
%,
%,
%{
transform: translateX(px);
}
}
搖擺：
複制代碼代碼如下:
@keyframes change{
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate(deg);
}
%{
transform: rotate(-deg);
}
%{
transform: rotate();
}
}
搖晃：
複制代碼代碼如下:
@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();
}
}
響鈴：
複制代碼代碼如下:
@keyframes change {
%{
transform: scale();
}
%,
%{
transform: scale(.) rotate(-deg);
}
%,
%,
%,
%{
transform: scale(.) rotate(deg);
}
%,
%,
%{
transform: scale(.) rotate(-deg);
}
%{
transform: scale() rotate();
}
}