大风车
01大风车
*{ margin:0; padding:0; }
#box{
width:300px; height:300px;
margin:100px auto;
position:relative;
border-risze:50%
background-color:pink;
animation: moveCircle 1s linear infinite paused; 动画}
@keyframes moveCircle{ form{ transform:rotate(0 deg);} to{ transform:rotate( 360 deg);}}
#box div { width:150px; height: 50px;position:absolute; top:100px;
/*background-color: orange;*/
border-top-left-radius: 100%; transform-origin: bottom right; }
#box div:nth-of-type(1){
background-color: rad;
}
#box div:nth-of-type(2){
background-color: green;
transform:rotate(90deg)
}
#box div:nth-of-type(3){
background-color:deepskyblue;
transform: rotate(180deg);
}
#box div:nth-of-type(4){
background-color: yellow;
transform:rotate(270deg)
}
input {
width: 200px; height: 50px; display : block; margin : 50px auto ; font-size : 30px; background-color: orange;
}
</style>
</head>
<body>
<div id="box">
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>
<input type="button" value="开始">
写js
id是可以直接操作的，但是最好还是获取一下。
<script type="text/javascript">
var btn = document.querySelector("input");
var box = document.querySelector("#box");
btn.onclick = function () {
if (this.value == '开始'){
this.value = '结束'；
box.style.animationPlayState = 'running';
}else{
this.value = '开始'；
box.style.animationPlayState = 'paused';
}}
</script>
</body>
</html>
再把刚才的进行打开 获取元素这块id获取
其实速度这块也可以调。
盒子模型
盒子模型.gif
要注意给透视点 ，
*{ margin : 0; paddind : 0;}
#box{
width: 300px; height: 300px;
margin:100px auto;
position:relative;
transform-style：preserve-3d;
支持3D效果
animation: moveRect 2s linear infinite paused;
}
@keyframes moveRect {
from{
transform: perspective(1200px) rotateX(0) rotateY(0);
} to {
transform: perspective(1200px) rotateX(360deg) rotateY(360deg)
}
}
#box div {
width: 300px; height: 300px; position: absolute; font-size: 50px; font-weight: bold;
text-align: center; line-height: 300px; background-color: orange;
}
#box div:nth-of-type(1){
background-color: red;
transform: translateZ(150px);
}
#box div:nth-of-type(2){
background-color: deepskyblue;
transform: rotateX(90deg) translateZ(-150px);
}
#box div:nth-of-type(3){
background-color:deepskyblue;
transform: rotateX(90deg) translateZ(150px);
}
#box div:nth-of-type(4){
background-color: deeppink;
transform: rotateX(-90deg) translateZ(150px);
}
#box div:nth-of-type(5){
background-color: yellow;
transform: rotateY(90deg) translateZ(150px);
}
#box div:nth-of-type(6){
background-color:yellow;
transform: rotateY(-90deg) translateZ(150px);
}
input{
width: 200px; height: 50px; display: block;
margin: 50px auto; font-size: 30px;
background-color: orande;
}
</style> </head>
<body>
<div id="box">
<div>1<div> <div>2<div><div>3<div><div>4<div><div>5<div><div>6<div>
</div>
<input type="button" value="开始" />
先把动画注掉
需要作出一个，六个面 只需要将空间拉开就可以了，分为三部分 前后面，左右面，上下面，3oo*300 往前推300 只推一半 150 3D平移
<script type="text/javascript">
var bth = document.querySelector("input");
var box = document.querySelector("#box");
bth.onclick = function () {
if (this.value == '开始'){
this.value = '结束';
box.style.animationPlayState = 'running';
}eles{
this.value = '开始';
box.style.animationPlayState = 'paused';
}
}
</script> </dody> </html>
透视点可以调，度数是可以调 数度也是可以调 要是有规则就取一样的值，当然360 是最好。
另外推荐两部电影
《异次元世界》、《终极面试》 不是恐怖片 对心理有关的电影！
时钟
时钟.gif
网友评论