首页 > 代码库 > 关于折纸的动画

关于折纸的动画

其实关于折纸的重点是在HTML和CSS的布局上主要就是要一个嵌套一个,如果不是的话,会有撑开的宽高从而难以连接在一起。不过折纸还没有写完一些兼容,也是参考视频上作的小练习

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<style type="text/css">
@-webkit-keyframes show{
0%
{
-webkit-transform:rotateX(-120deg);
}
25%
{
-webkit-transform:rotateX(30deg);
}
50%
{
-webkit-transform:rotateX(-15deg);
}
75%
{
-webkit-transform:rotateX(8deg);
}
100%
{
-webkit-transform:rotateX(0deg);
}
}
@-webkit-keyframes hide{
0%{
-webkit-transform:rotateX(0deg);
}
100%
{
-webkit-transform:rotateX(-100deg);
}
}

#one{
width: 300px;
margin: 30px auto;
position: relative;
-webkit-perspective:800px;
}
h2{
width: 300px;
height: 50px;
background-color: #FF7F27;
color:#ffffff;
position: absolute;
z-index: 12;
top:-30px;
}
#one div{
width: 300px;
height: auto;
position: absolute;
top:35px;
-webkit-transform-style:preserve-3d; //注意每个div都是一个3d空间
-webkit-transform-origin:top;
-webkit-transform:rotateX(-100deg);

}
span{
width: 100%;
height: 30px;
color: #ffffff;
background-color: #27BD53;
box-shadow:inset 0 0 0 20px rgba(0,0,0,1); transition:1s;
display: block;
}
#one .shown{
-webkit-animation:1s show;
-webkit-transform:rotateX(0deg);
}
#one .shown>span{
box-shadow:inset 0 0 0 20px rgba(0,0,0,0);
}//这里是设置阴影的变化。
#one .hiden{
-webkit-animation:1s hide;
}


</style>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByTagName(‘input‘)[0];
var odiv=document.getElementById(‘one‘).getElementsByTagName(‘div‘);
var onoff=true;
var timer=null;
var j=0;
btn.onclick=function(){
if(onoff){
timer=setInterval(function(){
odiv[j].className=‘shown‘;
j++;
if (j==8) {onoff=false;clearInterval(timer);};
},100);
}


else{
timer=setInterval(function(){
j--;
odiv[j].className=‘hiden‘;
if(j==0){
onff=true;
clearInterval(timer);
}
},100);
}
}
}
</script>
<input type="button" value="http://www.mamicode.com/get">
<div id="one">
<h2>清单</h2>
<div>
<span>1</span>
<div>
<span>2</span>
<div>
<span>3</span>
<div>
<span>4</span>
<div>
<span>5</span>
<div>
<span>6</span>
<div>
<span>7</span>
<div>
<span>8</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

还有关于就是CSS的优先级上面我竟然还没弄懂,真的很惭愧

1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

 

2、权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100

发现这点基础还是需要补补的!!

关于折纸的动画