关于折纸的动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于折纸的动画相关的知识，希望对你有一定的参考价值。
其实关于折纸的重点是在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="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
发现这点基础还是需要补补的！！
以上是关于关于折纸的动画的主要内容，如果未能解决你的问题，请参考以下文章