css3一些效果

kn
2018-01-27 10:02:29
前端

1.背景颜色渐变

background: linear-gradient(#6dcab7,#3878ca);

2.元素左右摆动

#redpacketsmall img {
   -webkit-animation: go 1s ease-in-out alternate infinite;
   -moz-animation: go 1s ease-in-out alternate infinite;
   animation: go 1s ease-in-out alternate infinite;
}
@keyframes go {
   0% {
       -webkit-transform: rotate(30deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(30deg);
       -moz-transform-origin: top center;
       transform: rotate(30deg);
       transform-origin: top center;
    }
    100% {
       -webkit-transform: rotate(-30deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(-30deg);
       -moz-transform-origin: top center;
       transform: rotate(-30deg);
       transform-origin: top center;
    }
}

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏