>웹 프론트엔드 >HTML 튜토리얼 >微信扫码显示特效_html/css_WEB-ITnose

微信扫码显示特效_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:29:451242검색

微信扫码显示特效:

 

 

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

 

 

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

 

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

演示demo的HTML内容为:

 

  1. 魔芋

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的值

 

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

 

 

弹入

 

透明度结合transform:scale

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

 

 

 

转入

 

 

  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. }

 

 

**

 

 

 



 

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.