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

css3实现特殊动画，支持手机

2014-09-16 15:41 525 查看

以上是效果图

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>BHR</title>

<style>

.main{overflow:hidden;height:250px;}

.ball-arc {

-webkit-animation: ball-x 2.5s linear;

}

.ball {

-webkit-animation: ball-y 2.5s ;

width:50px;height:50px;background-color:blue;

}

/* cubic-bezier 函数的使用是用来调节动画运行的速度，这里我们使球慢慢减速*/

@-webkit-keyframes ball-x {

0% { -webkit-transform: translateX(0px); }

100% { -webkit-transform: translateX(100%); }

}

@-webkit-keyframes ball-y {

0% { -webkit-transf orm: translateY(0px);}

25% { -webkit-transform: translateY(200px);background-color:red;}

50% { -webkit-transform: translateY(0px);background-color:blue;}

75% { -webkit-transform: translateY(200px);background-color:red;}

100% { -webkit-transform: translateY(0px);background-color:blue;}

}

</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

</head>

<body>

<div class="main">

<div class="ball-arc">

<div class="ball"></div>

</div>

</div>

</body>

</html>

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

标签： css html

相关文章推荐

新的分享

章节导航