微信扫码显示特效_html/css_WEB-ITnose
时间:2021-07-01 10:21:17
帮助过:128人阅读
微信扫码显示特效:
下面是实际效果:(可以自己移动鼠标,尝试效果)
(由于篇幅长度,没有加兼容性前缀,演示环境为谷歌浏览器。)
现在就一个一个效果单独演示:
演示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);
- }
- }
**