太极效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-color: #779999;}
*{margin: 0;padding: 0;}
.box-taiji{
/*只设置高度不给宽度*/
width:0px;
height:400px;
position:relative;
margin:50px auto;
/*用border写出左右的宽度和颜色*/
border-left:200px solid #000;
border-right:200px solid #fff;
border-radius:50%;
animation:move 4s linear infinite;
}
/*在盒子内添加两个元素*/
.box-taiji:before,.box-taiji:after{
position:absolute;
content:"";
display:block;
}
/*before为容器内的大圆*/
.box-taiji:before{
width:200px;
height:200px;
top:0px;
left:-100px;
z-index:1;
background-color:#fff;
border-radius:50%;
/*倒影出另外一半的大圆 颜色相反*/
box-shadow:0 200px 0 #000;
}
/*after为大圆中心的小圆*/
.box-taiji:after{
width:60px;
height:60px;
top:70px;
left:-30px;
z-index:2;
background-color:#000;
border-radius:50%;
/*倒映出另外一半的小圆 颜色相反*/
box-shadow:0 200px 0 #fff;
}
@keyframes move{
100%{
transform:rotate(0deg);
}
0%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box-taiji"></div>
</body>
</html>
魔方效果图:
魔方的hover效果,散开:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>魔方</title>
<link rel="stylesheet" type="text/css" href="css/lifangti.css"/>
</head>
<body>
<ul>
<li>
div*9
</li>
<li>
div*9
</li>
<li>
div*9
</li>
<li>
div*9
</li>
<li>
div*9
</li>
<li>
div*9
</li>
</ul>
</body>
</html>
body{background: black;}
ul{
width: 300px;
height: 300px;
margin: 10%;
list-style: none;
position: relative;
animation: rotate 5s linear 0s infinite;
transform-style: preserve-3d;
}
@keyframes rotate{
form{
transform: rotateX(0deg)rotateY(0deg);
}
to{
transform: rotateX(360deg)rotateY(360deg);
}
}
li{
width: 300px;
height: 300px;
position: absolute;
font-size: 60px;
color: white;
line-height: 300px;
text-align: center;
}
div{
width:96px;
height:96px;
border: 2px solid white;
float: left;
border-radius: 5px;
}
/*前面*/
ul li:first-child{
transform: translateZ(150px);
}
ul li:first-child div{
background-color:blue;
}
/*后面*/
ul li:nth-child(2){
transform: translateZ(-150px);
}
ul li:nth-child(2) div{
background-color:green;
}
/*左面*/
ul li:nth-child(3){
transform: rotateY(-90deg)translateZ(150px);
}
ul li:nth-child(3) div{
background-color:#ADFF2F;
}
/*右面*/
ul li:nth-child(4){
transform: rotateY(90deg)translateZ(150px);
}
ul li:nth-child(4) div{
background-color: hotpink;
}
/*上面*/
ul li:nth-child(5){
transform: rotateX(-90deg)translateZ(150px);
}
ul li:nth-child(5) div{
background-color: #779999;
}
/*下面*/
ul li:last-child{
transform: rotateX(90deg)translateZ(150px);
}
ul li:last-child div{
background-color:yellow;
}
/*hover效果*/
/*前面*/
ul:hover li:first-child{
transform: translateZ(200px);
}
/*后面*/
ul:hover li:nth-child(2){
transform: translateZ(-200px);
}
/*左面*/
ul:hover li:nth-child(3){
transform: rotateY(-90deg)translateZ(200px);
}
/*右面*/
ul:hover li:nth-child(4){
transform: rotateY(90deg)translateZ(200px);
}
/*上面*/
ul:hover li:nth-child(5){
transform: rotateX(-90deg)translateZ(200px);
}
/*下面*/
ul:hover li:last-child{
transform: rotateX(90deg)translateZ(200px);
}