css3几个常用动效

1.放大的圈

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

@keyframes zoom3 {   0% {     opacity: 0;     transform: scale(0);   }   70% {     opacity: 1;   }   100% {     opacity: 0.7;     transform: scale(1);   } }   .play {   position: absolute;   left: 14.62rem;   top: 4.12rem;   margin: 1rem auto;   width: 0.38rem;   height: 0.43rem;   cursor: pointer;   background: url(./images/play.png) no-repeat center / 100% 100%;     &::after {     content: "";     .size(0.7rem, 0.7rem);     animation: zoom3 2s ease-in-out infinite;     border: 1px solid hsla(0, 0%, 100%, 0.6);     border-radius: 100%;     position: absolute;     transform-origin: center;     right: -0.12rem;     bottom: -0.12rem;   }   &::before {     content: "";     .size(0.6rem, 0.6rem);     animation: zoom3 2s ease-in-out 0.4s infinite;     right: -0.08rem;     bottom: -0.08rem;     border: 1px solid hsla(0, 0%, 100%, 0.6);     border-radius: 100%;     position: absolute;     transform-origin: center;   } }

　　

2.呼吸（忽大忽小）

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.play {   position: absolute;   left: 14.62rem;   top: 4.12rem;   margin: 1rem auto;   width: 0.38rem;   height: 0.43rem;   cursor: pointer;   background: url(./images/play.png) no-repeat center / 100% 100%;     animation: zoom2 2s ease-in-out infinite alternate; }   @keyframes zoom2 {   from {     transform: scale(1);   }     to {     transform: scale(0.8);   } }

　　

3.小圈旋转

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

.play {   position: absolute;   left: 14.62rem;   top: 4.12rem;   margin: 1rem auto;   width: 0.38rem;   height: 0.43rem;   cursor: pointer;   background: url(./images/play.png) no-repeat center / 100% 100%;     &::before {     content: "";     .size(0.6rem, 0.6rem);     background: url(./images/circle2.png) no-repeat center / 100% 100%;     position: absolute;     right: -0.08rem;     bottom: -0.08rem;     pointer-events: none;     animation: circle 6s linear infinite;   }   &::after {     content: "";     .size(0.66rem, 0.66rem);     background: url(./images/circle2.png) no-repeat center / 100% 100%;     position: absolute;     right: -0.11rem;     bottom: -0.11rem;     pointer-events: none;     animation: circle2 6s linear infinite;   } }   @keyframes circle {   0% {     transform: rotate(0deg);   }   100% {     transform: rotate(-360deg);   } }   @keyframes circle2 {   0% {     transform: rotate(-315deg);   }   100% {     transform: rotate(45deg);   } }