微信扫码显示特效

微信扫码显示特效：

 

 

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

 

 

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

 

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

演示demo的HTML内容为：

 

1. <div class="moyu">魔芋</div>

CSS：

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

 

 

 

---

 

淡入：（改变透明度）

1. .moyu {
2. -webkit-animation: change 2s ease;
3. animation: change 2s ease;
4. }
5. @-webkit-keyframes change {
6. 0%{
7. opacity:0;
8. }
9. 100%{
10. opacity:1;
11. }
12. }
13. @keyframes change {
14. 0%{
15. opacity:0;
16. }
17. 100%{
18. opacity:1;
19. }
20. }

 

效果：

 

淡出就是调整opacity从1到0.

 

淡入-从下

说明：就是加是transform 的translate

1. .moyu {
2. -webkit-animation: change 2s ease infinite;
3. animation: change 2s ease infinite;
4. }
5. @-webkit-keyframes change {
6. 0%{
7. opacity:0;
8. -webkit-transform:translateY(-100px);
9. transform:translateY(-100px);
10. }
11. 100%{
12. opacity:1;
13. -webkit-transform:translateY(0px);
14. transform:translateY(0px);
15. }
16. }
17. @keyframes change {
18. 0%{
19. opacity:0;
20. -webkit-transform:translateY(-100px);
21. transform:translateY(-100px);
22. }
23. 100%{
24. opacity:1;
25. -webkit-transform:translateY(0px);
26. transform:translateY(0px);
27. }
28. }

 

 

（魔芋解释：由于录制gif图片效果不是很好，请见谅。）

 

 

弹跳

改变transform:translateY的值

 

2. @-webkit-keyframes change {
3. 0%,
4. 20%,
5. 50%,
6. 80%,
7. 100%{
8. -webkit-transform: translateY(0);
9. }
10. 40%{
11. -webkit-transform: translateY(-30px);
12. }
13. 60%{
14. -webkit-transform: translateY(-15px);
15. }
16. }

 

 

弹入

 

透明度结合transform:scale

2. @-webkit-keyframes change {
3. 0%{
4. opacity:0;
5. -webkit-transform: scale(0.3);
6. }
7. 50%{
8. opacity:1;
9. -webkit-transform: scale(1.05);
10. }
11. 70%{
12. -webkit-transform: scale(0.9);
13. }
14. 100%{
15. -webkit-transform: scale(1);
16. }
17. }

 

 

 

转入

 

 

1. @-webkit-keyframes change {
2. 0%{
3. opacity:0;
4. -webkit-transform: rotate(-200deg);
5. }
6. 100%{
7. opacity:1;
8. -webkit-transform: rotate(0);
9. }
10. }

 

 

翻转

 

1. @keyframes change {
2. 0%{
3. transform: perspective(400px) rotateY(0);
4. animation-timing-function: ease-out;
5. }
6. 40%{
7. transform: perspective(400px) translateZ(150px) rotateY(170deg);
8. animation-timing-function: ease-out;
9. }
10. 80%{
11. transform: perspective(400px) rotateY(360deg) scale(0.95);
12. animation-timing-function: ease-in;
13. }
14. 100%{
15. transform: perspective(400px) scale(1);
16. animation-timing-function: ease-in;
17. }
18. }

 

 

 

闪烁

 

1. @keyframes change {
2. 0%,
3. 50%,
4. 100%{
5. opacity:1;
6. }
7. 25%,
8. 75%{
9. opacity:0;
10. }
11. }

 

 

 

震颤

 

1. @keyframes change{
2. 0%,
3. 100%{
4. transform: translateX(0);
5. }
6. 10%,
7. 30%,
8. 50%,
9. 70%,
10. 90%{
11. transform: translateX(-10px);
12. }
13. 20%,
14. 40%,
15. 60%,
16. 80%{
17. transform: translateX(10px);
18. }
19. }

 

 

 

 

摇摆：

1. @keyframes change{
2. 20%{
3. transform: rotate(15deg);
4. }
5. 40%{
6. transform: rotate(-10deg);
7. }
8. 60%{
9. transform: rotate(5deg);
10. }
11. 80%{
12. transform: rotate(-5deg);
13. }
14. 100%{
15. transform: rotate(0);
16. }
17. }

 

 

 

 

摇晃：

 

1. @keyframes change{
2. 0%{
3. transform: translateX(0);
4. }
5. 15%{
6. transform: translateX(-100px) rotate(-5deg);
7. }
8. 30%{
9. transform: translateX(80px) rotate(3deg);
10. }
11. 45%{
12. transform: translateX(-65px) rotate(-3deg);
13. }
14. 60%{
15. transform: translateX(40px) rotate(2deg);
16. }
17. 75%{
18. transform: translateX(-20px) rotate(-1deg);
19. }
20. 100%{
21. transform: translateX(0);
22. }
23. }

 

 

 

 

响铃：

 

1. @keyframes change {
2. 0%{
3. transform: scale(1);
4. }
5. 10%,
6. 20%{
7. transform: scale(0.9) rotate(-3deg);
8. }
9. 30%,
10. 50%,
11. 70%,
12. 90%{
13. transform: scale(1.1) rotate(3deg);
14. }
15. 40%,
16. 60%,
17. 80%{
18. transform: scale(1.1) rotate(-3deg);
19. }
20. 100%{
21. transform: scale(1) rotate(0);
22. }
23. }

 

 

**