如何使用css来写立体盒子旋转代码

发布网友发布时间：2022-04-06 10:53

共3个回答

懂视网时间：2022-04-06 15:15

这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到css3 animation动画属性），此图通过css3纯代码实现，它由若干个小圆组合而成，适合初学css3的人练练手，娱以致学，增加学习的乐趣。

HTML部分：

<div class="square">
 <div class="rect rect_one">
 <div class="inner_circle rect_one_one">
 <div class="dot rect_one_two"></div>
 </div>
 </div>
 <div class="rect rect_two">
 <div class="inner_circle rect_two_one">
 <div class="dot rect_two_two"></div>
 </div>
 </div>
 </div>
 <div style="text-align:center;clear:both">
 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
 <script src="/follow.js" type="text/javascript"></script>
 </div>

CSS部分：

<style>
 .square {
 width: 400px;
 height: 400px;
 position: relative;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 animation: rotate infinite linear 5s;
 margin: 10% auto;
 -webkit-animation: rotate infinite linear 5s;
 margin: 10% auto;
 -moz-animation: rotate infinite linear 5s;
 margin: 10% auto;
 }
 .rect {
 width: 400px;
 height: 200px;
 position: relative;
 border: 1px #d2d2d2 solid;
 border-bottom: none;
 } 
 .inner_circle {
 width: 200px;
 height: 200px;
 border-radius: 200px;
 position: absolute;
 z-index: 1;
 } 
 .dot {
 width: 50px;
 height: 50px;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 border-radius: 50%;
 } 
 .rect_one {
 border-radius: 200px 200px 0 0;
 background: white;
 } 
 .rect_one_one {
 bottom: -100px;
 left: 0;
 background: black;
 } 
 .rect_one_two {
 background: white;
 } 
 .rect_two {
 border-radius: 0 0 200px 200px;
 background: black;
 } 
 .rect_two_one {
 bottom: 100px;
 right: 0;
 background: white;
 }
 .rect_two_two {
 background: black;
 } 
 @keyframes rotate {
 from {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 }
 }
 </style>

看图看效果：

太极图.jpg

热心网友时间：2022-04-06 12:23

用css3
如下来源于书籍 HTML5布局之路，很不错的一本书

热心网友时间：2022-04-06 13:41

蝈蝈叫哥哥。