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

微信扫码显示特效：

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

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

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

演示demo的HTML内容为：

魔芋

CSS：

div { width:200px; height:200px; background: red; margin:50px;         color:#fff; line-height:200px; font-size:30px; text-align:center; }

淡入：（改变透明度）

.moyu { -webkit-animation: change 2s ease; animation: change 2s ease; } @-webkit-keyframes change { 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes change { 0%{ opacity:0; } 100%{ opacity:1; } }

效果：

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

淡入-从下

说明：就是加是transform 的translate

.moyu { -webkit-animation: change 2s ease infinite; animation: change 2s ease infinite; } @-webkit-keyframes change { 0%{ opacity:0; -webkit-transform:translateY(-100px); transform:translateY(-100px); } 100%{ opacity:1; -webkit-transform:translateY(0px); transform:translateY(0px); } } @keyframes change { 0%{ opacity:0; -webkit-transform:translateY(-100px); transform:translateY(-100px); } 100%{ opacity:1; -webkit-transform:translateY(0px); transform:translateY(0px); } }

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

弹跳

改变transform:translateY的值

@-webkit-keyframes change { 0%, 20%, 50%, 80%, 100%{ -webkit-transform: translateY(0); } 40%{ -webkit-transform: translateY(-30px); } 60%{ -webkit-transform: translateY(-15px); } }

弹入

透明度结合transform:scale

@-webkit-keyframes change { 0%{ opacity:0; -webkit-transform: scale(0.3); } 50%{ opacity:1; -webkit-transform: scale(1.05); } 70%{ -webkit-transform: scale(0.9); } 100%{ -webkit-transform: scale(1); } }

转入

@-webkit-keyframes change { 0%{ opacity:0; -webkit-transform: rotate(-200deg); } 100%{ opacity:1; -webkit-transform: rotate(0); } }

翻转

@keyframes change { 0%{ transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40%{ transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 80%{ transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100%{ transform: perspective(400px) scale(1); animation-timing-function: ease-in; } }

闪烁

@keyframes change { 0%, 50%, 100%{ opacity:1; } 25%, 75%{ opacity:0; } }

震颤

@keyframes change{ 0%, 100%{ transform: translateX(0); } 10%, 30%, 50%, 70%, 90%{ transform: translateX(-10px); } 20%, 40%, 60%, 80%{ transform: translateX(10px); } }

摇摆：

@keyframes change{ 20%{ transform: rotate(15deg); } 40%{ transform: rotate(-10deg); } 60%{ transform: rotate(5deg); } 80%{ transform: rotate(-5deg); } 100%{ transform: rotate(0); } }

摇晃：

@keyframes change{ 0%{ transform: translateX(0); } 15%{ transform: translateX(-100px) rotate(-5deg); } 30%{ transform: translateX(80px) rotate(3deg); } 45%{ transform: translateX(-65px) rotate(-3deg); } 60%{ transform: translateX(40px) rotate(2deg); } 75%{ transform: translateX(-20px) rotate(-1deg); } 100%{ transform: translateX(0); } }

响铃：

@keyframes change { 0%{ transform: scale(1); } 10%, 20%{ transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90%{ transform: scale(1.1) rotate(3deg); } 40%, 60%, 80%{ transform: scale(1.1) rotate(-3deg); } 100%{ transform: scale(1) rotate(0); } }

**