大風(fēng)車
01大風(fēng)車
*{ 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; 動(dòng)畫}
@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 = '結(jié)束'；
box.style.animationPlayState = 'running';
}else{
this.value = '開始'；
box.style.animationPlayState = 'paused';
}}
</script>
</body>
</html>
再把剛才的進(jìn)行打開 獲取元素這塊id獲取
其實(shí)速度這塊也可以調(diào)。
盒子模型
盒子模型.gif
要注意給透視點(diǎn) ，
*{ 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="開始" />
先把動(dòng)畫注掉
需要作出一個(gè)，六個(gè)面 只需要將空間拉開就可以了，分為三部分 前后面，左右面，上下面，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 = '結(jié)束';
box.style.animationPlayState = 'running';
}eles{
this.value = '開始';
box.style.animationPlayState = 'paused';
}
}
</script> </dody> </html>
透視點(diǎn)可以調(diào)，度數(shù)是可以調(diào) 數(shù)度也是可以調(diào) 要是有規(guī)則就取一樣的值，當(dāng)然360 是最好。
另外推薦兩部電影
《異次元世界》、《終極面試》 不是恐怖片 對(duì)心理有關(guān)的電影！
時(shí)鐘
時(shí)鐘.gif
