1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css3属性实现三维圆周效果

其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下非常漂亮的CSS3制作的三维圆周效果代码,喜欢的朋友学习收藏下来吧。

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">      <title></title>  <style>  	body {      		margin-top: 100px;      	}  @keyframes rotate1{      100%{transform:rotateX(60deg) rotate(360deg);}  }  @keyframes rotate2{      100%{transform:rotateX(60deg) rotate(-360deg);}  }  body{      perspective: 700px;  }  #backup{      height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:100px;left:100px;transform:rotateX(60deg) rotate(0);  }  #test{      height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%  }  </style>  </head>  <body>  <button id="btn1">顺时针旋转</button>  <button id="btn2">逆时针旋转</button>  <button id="btn3">暂停</button>  <button id="reset">还原</button>  <div id="result"></div>  <div id="backup">      <div id="test"></div>  </div>  <script>  reset.onclick = function(){      history.go();  }  btn1.onclick = function(){      backup.style.animation= 'rotate1 4s infinite linear';  }  btn2.onclick = function(){      backup.style.animation= 'rotate2 4s infinite linear';  }  btn3.onclick = function(){      backup.style.animationPlayState = 'paused';  }  </script>  </body>  </html>

原文链接:https://www.qiquanji.com/post/7045.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: