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

HTML5中动画实现的效果

2016-05-18 15:21 330 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<style>

body{

background-color:black;

}

.point{

width:10px;

height: 10px;

background-color: white;

/*圆角半径*/

border-radius: 5px;

/*位置有关的移动要有定位*/

position: absolute;

top:200px;

/*动画关联动画名称执行时间线性执行无限执行*/

animation:run 10s linear infinite;

}

/*定义关键帧动画 translateX,translateX*/

@keyframes run{

0%{}

/*平移x轴y轴放大倍数背景颜色透明的*/

10%{transform:translate(150px,-50px) scale(3);background-color: blue;opacity: 0.5;}

20%{transform:translate(300px,50px) scale(1);background-color: orange;opacity: 1;}

30%{transform:translate(450px,-50px) scale(3);background-color: green;opacity: 0.5;}

40%{transform:translate(600px,50px) scale(1);background-color: yellow;opacity: 1;}

50%{transform:translate(750px,-50px) scale(3);background-color: red;opacity: 0.5;}

60%{transform:translate(600px,50px) scale(1);background-color: plum;opacity: 1;}

70%{transform:translate(450px,-50px) scale(3);background-color: gold;opacity: 0.5;}

80%{transform:translate(300px,50px) scale(1);background-color: hotpink;opacity: 1;}

90%{transform:translate(150px,-50px) scale(3);background-color: goldenrod;opacity: 0.5;}

100%{transform:translate(0px,50px) scale(1);background-color: brown;opacity: 1;}

}

</style>

<body>



<div class='point'></div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航