Home > Article > Web Front-end > CSS3 implements tilt and rotation animation effects

CSS3 implements tilt and rotation animation effects

php中世界最好的语言Original: 2018-03-22 17:49:255953browse

This time I will bring you CSS3 tilt and rotation animation effect, what are the precautions to achieve CSS3 tilt and rotation animation effect, the following is a practical case, let's take a look one time.

Let’s take a look at the effect of static first, the effect after running will be better

The sample code is as follows

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
 <title>css3学习</title>
 <style type="text/css">
 .d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;
  -webkit-animation:abc 2s infinite linear; 
  animation:abc 2s infinite linear; 
 }
 /*chrome,Safari,ff,o测试没问题，IE11一闪一闪的*/
 @keyframes abc{
  0% {transform:skew(20deg) rotate(0deg);} 
    50% {transform:skew(20deg) rotate(180deg);} 
    100% {transform:skew(20deg) rotate(360deg);} 
 }
 @-webkit-keyframes abc{
  0% {-webkit-transform:skew(20deg) rotate(0deg);} 
    50% {-webkit-transform:skew(20deg) rotate(180deg);} 
    100% {-webkit-transform:skew(20deg) rotate(360deg);} 
 }
 </style>
</head>
<body>
 <p id="abc" class="d"></p>
</body>
</html>

##I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

CSS3 implements tilt and rotation animation effects

Related articles