WeChat コード スキャン表示の特殊効果_html/css_WEB-ITnose

微信扫码显示特效：

 

 

下面是实际效果：(可以自己移动鼠标，尝试效果)

 

 

(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)

 

现在就一个一个效果单独演示：

演示demo的HTML内容为：

 

1. 魔芋

CSS：

1. div {
2. width:200px;
3. height:200px;
4. 背景: red;
5. margin:50px;
6. color:#fff;
7. 行の高さ: 200px;
8. font-size:30px;
9. text-align:center;
10. }

淡入：（改变透明度）

1. 。 moyu {
2. -webkit-animation: 2 秒の容易さを変更;
3. アニメーション: 2 秒の容易さを変更;
4. }
5. @-webkit-keyframes 変更 {
6. 0%{
7. opacity:0;
8. }
9. 100 %{
10. 不透明度:1;
11. }
12. }
13. @キーフレーム変更 {
14. 0%{
15. 不透明度:0;
16. }
17. 100%{
18. 不透明度:1;
19. }
20. }

效果：

淡出就是调整不透明度从1to0.

淡入-从下

说明：就是加是transform 的翻訳

1. .moyu {
2. -webkit-animation: 2 秒の緩和を無限に変更;
3. アニメーション: 2 秒の緩和を無限に変更;
4. }
5. @-webkit-keyframes 変更 {
6. 0%{
7. 不透明度:0;
8. -webkit-変換:translateY(-100px);
9. 変換:translateY(-100px);
10. }
11. 100%{
12. 不透明度:1;
13. -webkit-transform:translateY(0px);
14. 変換:translateY( 0px);
15. }
16. }
17. @keyframes 変更 {
18. 0%{
19. 不透明度:0;
20. -webkit-transform:translateY(-100px);
21. transform:translateY(-100px);
22. }
23. 100%{
24. 不透明度:1;
25. -webkit-transform:translateY(0px);
26. translateY(0px);
27. }
28. }

（魔芋解释：录製gif写真効果不遇、请见谅。）

弹跳

変更transform:translateYの値

2. @-webkit-keyframes 変更 {
3. 0％、
20％、
4. 50％、
80％、
5. 100％{
12. transl}
14. 40％{ :translateY(-30px);
15. }
16. 60%{

-webkit-transform:translateY(-15px);

}

}

弹入

透明度結合transform:scale
5. @-webkit-keyframes 変更 {
6. 0%{
7. opacity:0;
8. -webkit-transform:scale(0.3);
9. }
10. 50% {
11. 不透明度:1;
12. -webkit-transform:scale(1.05);
13. }
14. 70%{
15. -webkit-transform:scale(0.9);
16. }
17. 100%{

- webkit-transform:scale(1);

}

}

🎜转入🎜 🎜 🎜 🎜 🎜

@-webkit-keyframes 変更 {
0%{
不透明度:0;
-webkit-transform: 回転(-200度);
}
100%{
不透明度:1 ;
-webkit-transform:rotate(0);
}
}

转

@keyframes 変更 {
0%{
変換: 視点(400px)rotateY(0);
3. アニメーションタイミング関数:ease-out;
4. }
5. 40%{
6. transform:perspective(400px)translateZ(150px)rotateY(170deg);
7. アニメーションタイミング-関数: イーズアウト;
}
80%{
変換: 視点(400px) 回転 Y(360 度) スケール(0.95);
アニメーション タイミング関数: イーズイン;
}
100 %{
変換: パースペクティブ(400px) スケール(1);
アニメーション タイミング関数: イーズイン;
}
}

闪烁

@キーフレーム変更 {

1. 0%,
2. 50%,
3. 100%{
4. 不透明度:1;
5. }
6. 25%,
7. 75%{
8. 不透明度:0;
9. @キーフレーム変更{
10. 0%,
11. 100%{

変換:translateX(0);

}

10%、

30%、

50%、

70%、

90%{

変換:translateX(-10px);

}

20%、
40%、
60%,
80%{
transform:translateX(10px);
}
}
14. 摇摆：
@キーフレーム変更{
20%{
変換: 回転(15 度);
}

40%{

変換: 回転(-10 度);

}

60%{

変換: 回転(5 度);

}

80%{

変換: 回転(-5度);

}
100%{
変換: 回転(0);
}
}
12. 摇晃：
@keyframeschange{
0%{
transform:translateX(0);

}

15%{

変換: 変換X(-100px) 回転(-5度);

}

30%{

変換: 変換X(80px) 回転(3度);

}

45%{

変換: 変換X(-65ピクセル) 回転(-3度);

}
60%{
変換:translateX(40px) 回転(2度);
}
75%{
変換:translateX(-20px) 回転(-1度);
}
100% {
変換:translateX(0);
}
}
17. 响铃：
1. @keyframes 変更 {
2. 0%{
3. 変換: スケール(1);
4. }
5. 10%,
6. 20%{
7. 変換: スケール(0.9) 回転(-3度);
8. }
30%,
50%,
70%,
90%{
変換: スケール(1.1) 回転(3度);
}
14. 40%,
15. 60%,
16. 80%{
17. 変換: スケール(1.1) 回転(-3度);
18. }
19. 100%{
20. 変換: スケール(1) 回転(0);
21. }
22. }

**