-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：关于CSS3的animation和transform 应用
作者：周乐献
撰写时间：2019/1/19
~------------------------------------------------------------------------------------------
首先我们先给它进行布局
<!doctype html>
接下来用css来进行编辑
@charset “utf-8”;
/* CSS Document */
//使其内外边距为0
*{
margin: 0;
padding: 0;
}
//给body高度和宽度都设置为100%
body{
width: 100%;
height: 100%;
background:url(…/image/I.png);//给它一张背景图片
background-size: cover;//使图片覆盖整个body
display: flex;//弹性布局，在这里是可以使内容随页面宽度变化而变化
justify-content: center;//图片居中
margin-top: 40px;//上外边距40像素
}
.xuan{
width: 600px;//宽度设置为600像素
height: 600px;//高度设置为600像素
border-radius: 350px;//边框的圆角弧度为360像素
transform: rotateX(85deg);//向x轴旋转85度（deg=度）
transform-style: preserve-3d;//3d效果
}
.zhuan{
width: 600px; //宽度设置为600像素
height: 600px; //高度设置为600像素
border-radius: 350px; //边框的圆角弧度为360像素
position: relative; //相对定位（以自身位置为中心）
animation: hen 20s infinite forwards;
//hen需要绑定到的 keyframe 名称 infinite 无限循环（可以选择填循环次数）
// forwards当动画完成后，保持最后一个属性值
transform-style: preserve-3d; //3d效果
}
.zhuan div{//zhuan这个类里面的所有div
width: 200px;//宽度设置为200像素
height: 200px; //高度设置为200像素
border:1px solid #C82A2C;//边框：1像素 solid=实线 #C82A2C 边框的颜色
border-radius: 10px;//边框弧度10像素
animation: li 3s infinite;
//li需要绑定到的 keyframe名称 3s 执行时间 infinite 无限循环（可以选择填循环次数）
}
.yi{
position: absolute;//绝对定位
top:-100px;//top=上
left: 200px;//left=左
transform: rotate(0deg) rotateX(-90deg);//图片旋转角度
background: url( …/image/A.PNG) repeat-x center; //url()引入图片 center 居中
background-size: cover;//覆盖
}
.er{
position: absolute;
top:0px;
left: 400px;
transform: rotate(45deg) rotateX(-90deg);
background: url( …/image/B.PNG) repeat-x center;
background-size: cover;
}
.san{
position: absolute;
top:200px;
left:-100px;
transform: rotate(90deg) rotateX(-90deg);
background: url( …/image/C.PNG) repeat-x center;
background-size: cover;
}
.si{
position: absolute;
top:400px;
right:0px;
transform: rotate(135deg) rotateX(-90deg);
background: url( …/image/D.PNG) repeat-x center;
background-size: cover;
}
.wu{
position: absolute;
bottom: -100px;
left: 200px;
transform:rotate(180deg) rotateX(-90deg);
background: url( …/image/E.PNG) repeat-x center;
background-size: cover;
}
.liu{
position: absolute;
top:400px;
left:0px;
transform: rotate(225deg) rotateX(-90deg);
background: url( …/image/F.png) repeat-x center;
background-size: cover;
}
.qi{
position: absolute;
top:200px;
right: -100px;
transform: rotate(270deg) rotateX(-90deg);
background: url( …/image/G.png) repeat-x center;
background-size: cover;
}
.ba{
position: absolute;
top:0px;
left:0px;
transform: rotate(315deg) rotateX(-90deg);
background: url( …/image/H.png) repeat-x center;
background-size: cover;
}
.zhuan i.me,.zhuan i.do{
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 200px;
transform: rotateX(-90deg) translateY(-200px);
}
.zhuan i.do{
transform: rotateX(-90deg) translateY(-200px) rotateY(90deg);
}
.me div.left,.me div.right,.do div.left,.do div.right{
width: 100px;
height: 160px;
border: 1px solid #F90C10;
background: #F90C10;
animation: bie 3s infinite;
}
.me div.left,.do div.left{
border-radius:100px 100px 0 0;
transform: rotate(-45deg) translate(19px,22px);
}
.me div.right,.do div.right{
border-radius: 100px 100px 0 0;
transform: rotate(45deg) translate(-63px,-164px);
}
@keyframes hen{
0%{
transform: rotate(0);
}
12.5%{
transform: rotate(45deg);
}
25%{
transform: rotate(90deg);
}
37.5%{
transform: rotate(135deg);
}
50%{
transform: rotate(180deg);
}
62.5%{
transform: rotate(225deg);
}
75%{
transform: rotate(270deg);
}
87.5%{
transform: rotate(315deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes li{
0%{
box-shadow: 0 0 50px #7520FD;//box-shadow设置阴影
}
50%{
box-shadow: 0 0 100px #FC20E6;
}
100%{
box-shadow: 0 0 50px #7520FD;
}
}
@keyframes bie{
0%{
box-shadow: 0 0 100px #F90C10;
}
50%{
box-shadow: 0 0 200px #F90C10;
}
100%{
box-shadow: 0 0 100px #F90C10;
}
}