网站专题开发常用动画⛑

这是我参与更文挑战的第1天，活动详情查看： 更文挑战

网站常用动画系列（一）?

擦亮按钮

:before {content: '';position: absolute;left: 0;top: 0;width: 0.2rem;height: 0.55rem;background: -moz-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,0.4)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);background: -o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);-webkit-animation: aniBlink20 2s ease-out infinite forwards;-moz-animation: aniBlink20 2s ease-out infinite forwards;-o-animation: aniBlink20 2s ease-out infinite forwards;animation: aniBlink20 2s ease-out infinite forwards;}
@-webkit-keyframes aniBlink20{from{ left: -0.2rem; }to{ left: 90%; }}
@keyframes aniBlink20{from{ left: -0.2rem; }to{ left: 90%; }}
复制代码

火焰燃烧

.ranshao {animation: ranshao 1s ease-in-out infinite;}
@keyframes ranshao {50%{ transform: scale(0.8); }100%{ transform: scale(1); }}
复制代码

丝绸延展

@keyframes myFlash {
  0%{
      opacity: 0;
      width: 0;
  }
  100%{
      opacity: 1;
      width: 1920px;
  }
}
复制代码

字体变色

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .masked {
        background-image: -webkit-linear-gradient(left, #000, #3333 25%, #000 50%, #333 75%, #000);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
    }
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}
复制代码

鼠标悬浮图片放大或缩小

@keyframes bigger {
from {width: 100%;height: 100%;}
to {width: 110%; height: 110%;}
}
@keyframes smaller {
from {width: 110%;height: 110%;}
to {width: 100%; height: 100%;}
}
复制代码

按钮点击动效

.btn{position:reative}
.btn.on{top:2px}
复制代码

欢迎关注作者，感谢支持❗☘