您的位置：首页 > Web前端 > HTML5

【HTML5学习笔记】12：尝试CSS层叠样式表和关键帧

2017-06-02 22:18 381 查看

跟着视频写的的3D隧道，用了CSS样式。建立了几个div块，用CSS改变了它的形状，然后添加关键帧使它朝着Y轴周期性移动，就形成了3D隧道的效果。

*测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="关键词，关键字">
<meta name="Description" content="描述信息">
<title>3D隧道</title>

<!-- CSS层叠样式表 -->
<style type="text/css">
*{margin: 0;}
body{overflow: hidden;}/*溢出隐藏*/
.content{
width: 100px;
height: 100px;
position: absolute;
top: 400px;
left: 47%;
transform-style: preserve-3d;/*添加3D属性*/
animation: Play 3s;

}
.d{
width: 100px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
background: url(images/ok.png);
position: absolute;
}
.d1{
animation: runA 3s linear infinite;
}
.d2{
animation: runA 3s 1s linear infinite;
}
.d3{
animation: runA 3s 2s linear infinite;
}

.b1{
animation: runB 3s linear infinite;
}
.b2{
animation: runB 3s 1s linear infinite;
}
.b3{
animation: runB 3s 2s linear infinite;
}

.c1{
animation: runC 3s linear infinite;
}
.c2{
animation: runC 3s 1s linear infinite;
}
.c3{
animation: runC 3s 2s linear infinite;
}

.k1{
animation: runK 3s linear infinite;
}
.k2{
animation: runK 3s 1s linear infinite;
}
.k3{
animation: runK 3s 2s linear infinite;
}

/*定义关键帧*/
@keyframes runA{
from{transform:perspective(10px) rotateX(17deg) rotateZ(180deg) translateY(200px)}
to{transform:perspective(10px) rotateX(17deg) rotateZ(180deg) translateY(-100px)}/*做了移动*/
}
@keyframes runB{
from{transform:perspective(10px) rotateX(-17deg) translateY(200px)}
to{transform:perspective(10px) rotateX(-17deg) translateY(-100px)}
}
@keyframes runC{
from{transform:perspective(10px) rotateY(17deg) rotateZ(-90deg) translateY(200px)}
to{transform:perspective(10px) rotateY(17deg) rotateZ(-90deg) translateY(-100px)}
}
@keyframes runK{
from{transform:perspective(10px) rotateY(-17deg) rotateZ(90deg) translateY(200px)}
to{transform:perspective(10px) rotateY(-17deg) rotateZ(90deg) translateY(-100px)}
}
@keyframes Play{
from{transform: rotate(0deg);}
to{transform: rotate(180deg);}
}
</style>
</head>
<body>
<div class="content">
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>

<div class="d b1"></div>
<div class="d b2"></div>
<div class="d b3"></div>

<div class="d c1"></div>
<div class="d c2"></div>
<div class="d c3"></div>

<div class="d k1"></div>
<div class="d k2"></div>
<div class="d k3"></div>
</div>
</body>
</html>

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航