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

HTML5基础加强css样式篇（animation简写，控制多个动画，动画帧简写）（三十二）

2017-04-05 16:01 295 查看
1.animation简写例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange;
/* 动画的名字，播放时间，延时时间，动画效果，播放次数，播放顺序*/
animation: anim2 3s 2s linear infinite alternate;

}
/*当鼠标悬浮在.box时，暂停播放动画*/
.box:hover {
animation-play-state: paused;
}

@keyframes anim2 {
0%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
50%{
background: url("img/2.png") no-repeat;
background-size: 100%;
}
100%{
background: url("img/3.png") no-repeat;
background-size: 100%;
}
}

</style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

2.动画应用：
   <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box-3d{

width: 200px;
height: 200px;
/*开启3D*/
transform-style: preserve-3d;

margin: 200px auto;

position: relative;

/*设置3D盒子的变换中心点*/
transform-origin: center center -100px;

/*transform: rotateX(15deg) rotateY(15deg);*/

animation: anim1 10s linear infinite alternate;

}

@keyframes anim1 {
0%{
transform: rotateX(0deg) rotateY(0deg);
}

100%{
transform: rotateX(360deg) rotateY(360deg);
}
}

.box{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 36px;

position: absolute;
}
.box1{ background-color: rgba(0, 0, 0, .2); top: -200px;
transform-origin: bottom;
transform: rotateX(90deg)}
.box2{ background-color: rgba(255, 0, 0, .2); left: 200px;
transform-origin: left;
transform: rotateY(90deg)
}
.box3{ background-color: rgba(0, 255, 0, .2); top: 200px;
transform-origin: top;
transform: rotateX(-90deg)

}
.box4{ background-color: rgba(0, 0, 255, .2); left: -200px;
transform-origin: right;
transform: rotateY(-90deg)
}
.box5{ background-color: rgba(255, 255, 0, .2);
transform: translateZ(-200px)
}
.box6{ background-color: rgba(0, 255, 255, .2);}

</style>
</head>
<body>

<div class="box-3d" id="box3d">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>

</body>
</html>
3,控制多个动画：已，分割即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange;

animation: anim2 3s 2s linear infinite alternate, anim3 3s;

}
/*当鼠标悬浮在.box时，暂停播放动画*/
.box:hover {
animation-play-state: paused;
}

@keyframes anim2 {
0%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
50%{
background: url("img/2.png") no-repeat;
background-size: 100%;
}
100%{
background: url("img/3.png") no-repeat;
background-size: 100%;
}
}

@keyframes anim3 {
10%{
border: 10px solid red;
}
50%{
border: 50px solid blue;
}
}

</style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

4.动画帧简写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/* .box 默认样式 */
margin: 200px 0 0 200px;
width: 200px;
height: 200px;
background-color: orange;

animation: anim2 3s linear infinite alternate;

}
/*当鼠标悬浮在.box时，暂停播放动画*/
.box:hover {
animation-play-state: paused;
}

@keyframes anim2 {
/*使用,设置各帧的相同样式 0%{} 和 90{} 使用相同样式*/
0%, 90%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}
50%{
background: url("img/2.png") no-repeat;
background-size: 100%;
}
100%{
background: url("img/3.png") no-repeat;
background-size: 100%;
}
}

</style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 css 动画 经验 html
相关文章推荐
新的分享
章节导航