Home > Developer > Web Develop
1, yesterday with 3 Div realized Taiji figure (click to see),today try to use 1 div to do.
2, the company just busy double 10 anniversary, recently idle down, idle is also idle, have to write something.
3, Master Mo Spray, the younger brother just is nothing to toss a bit, do a record.
4, there are netizens reaction rotation when the card.
5, IE browser, go out left, walk not send ~ ~ ~
Implementation steps:Html:
Step One:class="Box-taiji"></div>
. Box-taiji {width:0; height:400px;position:relative;margin:50px auto;border-left:200px solid # ; border-right:200px solid #fff; Box-shadow:00 30px rgba (0,0,0,. 5); border-radius:400px;}Combine border to achieve left black right white squares, plus rounded corners, shadows. PS: Start with Background-image:linear-gradient (left, #000 50%, #fff 50%), to achieve the black edge of the circle. IE10 under test. So I used the border.
Step Two:. Box-taiji {width:0 ; height:400px;position:relative;margin:50px Auto; border-left:200px solid #000 ; border-right:200px solid #fff; box-shadow:0 0 30px rgba (0 , 0 , 0 ,. 5 ); Border-radius:400px;} . Box -taiji:after {width:200px;height:200px;position:absolute; Content:;d isplay:block;top:0 ; Left: -100px;z-index:1 ; Background-color: #fff; Border-radius: 50 %;} Add a pseudo-class to achieve a white circle and position it well.
. Box-taiji {width:0; height:400px;position:relative;margin:50px auto;border-left:200px Solid # the; border-right:200px solid #fff; Box-shadow:0 030px Rgba (0,0,0,.5); border-radius:400px;}. Box-taiji:after {width:200px;height:200px;position:absolute;content:"";d Isplay:block;top:0; Left:-100px;z-index:1; Background-color: #fff; Border-radius: -%;Box-shadow:0 200px 0 #;}
Using box-shadow:0 200px 0 #000, achieve the same size of the circle, put it well.
Step Three:. Box-taiji {width:0; height:400px;position:relative;margin:50px auto;border-left:200px Solid # the; border-right:200px solid #fff; Box-shadow:0 030px Rgba (0,0,0,.5); border-radius:400px;}. Box-Taiji:before,. Box -taiji:after{position:absolute;content:"";d Isplay:block;}. Box-taiji:before {width:200px;height:200px;top:0; Left:-100px;z-index:1; Background-color: #fff; Border-radius: -%;box-shadow:0200px0# the;} . Box -taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2; background-color:#000 ; Border-radius:%;box-shadow:0 200px 0 #fff;}
The same principle of step two, then realize the black and white two circle, put in the relevant position. Our Taiji figure is painted, the following task is to move up ~ ~
Step Four:. Box-taiji {width:0; height:400px;position:relative;margin:50px auto;border-left:200px Solid # the; border-right:200px solid #fff; Box-shadow:0 030px Rgba (0,0,0,.5); border-radius:400px;animation:rotation2.5s Linear Infinite;-webkit-animation:rotation2.5s Linear Infinite;-moz-animation:rotation2. 5s linear Infinite;}. Box-Taiji:before,.box-taiji:after {position:absolute;content:"";d Isplay:block;}. Box-taiji:before {width:200px;height:200px;top:0; Left:-100px;z-index:1; Background-color: #fff; Border-radius: -%;box-shadow:0200px0# the;}. Box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2; background-color:# the; Border-radius: -%;box-shadow:0200px0#fff;} @keyframes Rotation {0%{transform:rotate (0deg);} -% {transform:rotate (-360deg);}} @-webkit-keyframes Rotation {0% {-webkit-transform:rotate (0deg);} -% {-webkit-transform:rotate (-360deg);}} @-moz-keyframes Rotation {0% {-moz-transform:rotate (0deg);} -% {-moz-transform:rotate (-360deg);}}
Add @keyframes, animation and other CSS3 animation effects, OK, done.
Principle Analysis:Let's adjust the background color first, the principle is clear at once. In fact, is: two semi-circle at the bottom, four small circle using positioning overlay up.
Full code:<!doctype Html>"Utf-8"><TITLE>CSS3 realization of Rotating Taiji figure (ii): only 1 div</title><style>/*using Background-image to achieve left black right white circle, ie under the test is not ideal*//*. Box-taiji {width:400px;height:400px;position:relative;margin:30px auto;border-radius:400px;box-shadow:0 0 30px Rgba (0,0,0,.5); Background-image:linear-gradient (left, #000 50%, #fff 50%); background-image:- Webkit-linear-gradient (left, #000 50%, #fff 50%) background-image:-moz-linear-gradient (left, #000 50%, #fff 50%);}. Box-taiji:before,.box-taiji:after {position:absolute;content: "";d isplay:block;}. Box-taiji:before {width:200px;height:200px;top:0;left:100px;z-index:1;background-color: #fff; border-radius:50%; box-shadow:0 200px 0 #000;}. Box-taiji:after {width:60px;height:60px;top:70px;left:170px;z-index:2;background-color: #000; border-radius:50%; box-shadow:0 200px 0 #fff;} */. Box-taiji {width:0; height:400px;position:relative;margin:50px auto;border-left:200px Solid # the; border-right:200px solid #fff; Box-shadow:0 030px Rgba (0,0,0,.5); border-radius:400px;animation:rotation2.5s Linear Infinite;-webkit-animation:rotation2.5s Linear Infinite;-moz-animation:rotation2. 5s linear Infinite;}. Box-Taiji:before,.box-taiji:after {position:absolute;content:"";d Isplay:block;}. Box-taiji:before {width:200px;height:200px;top:0; Left:-100px;z-index:1; Background-color: #fff; Border-radius: -%;box-shadow:0200px0# the;}. Box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2; background-color:# the; Border-radius: -%;box-shadow:0200px0#fff;} @keyframes Rotation {0%{transform:rotate (0deg);} -% {transform:rotate (-360deg);}} @-webkit-keyframes Rotation {0% {-webkit-transform:rotate (0deg);} -% {-webkit-transform:rotate (-360deg);}} @-moz-keyframes Rotation {0% {-moz-transform:rotate (0deg);} -% {-moz-transform:rotate (-360deg);}}</style>class="Box-taiji"></div></body>CSS3 realization of rotation Taiji figure (ii): only 1 div
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
