一个关于CSS3的动画

jsstudentcz 2016-09-29 05:42:40

自己没写过CSS3动画，一个小需求让一个图片在一个小范围内进行一个飘动的效果，我通过

width: 300px;
height: 300px;
background: url(img/light.jpg)no-repeat center;
background-size: 70%;
-moz-animation: animations 3.5s ease infinite alternate;
-webkit-animation: animations 3.5s ease infinite alternate;
animation: animations 3.5s ease infinite alternate;
我把图片放到了div的背景上通过控制DIV来控制它，但是我写了keyframes 让他动起来了以后就会发现特别僵硬死板，求助各位大神一下怎么让它就飘起来很流畅的

...全文

712 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

业余草 2016-10-10

打赏
举报

www.codedq.net

天际的海浪 2016-10-08

打赏
举报

引用 6 楼 jsstudentcz 的回复:

[quote=引用 4 楼 jslang 的回复:] “我想根据屏幕的的倾斜的同时也改变这个相对运行的轨迹方向呢” 没明白这话的意思

呃呃呃动画随着手机屏幕的角度也相应的改变着运动[/quote] http://www.cnblogs.com/starweb/archive/2012/11/05/2755345.html

KK3K2005 2016-10-08

打赏
举报

引用 6 楼 jsstudentcz 的回复:

[quote=引用 4 楼 jslang 的回复:] “我想根据屏幕的的倾斜的同时也改变这个相对运行的轨迹方向呢” 没明白这话的意思

呃呃呃动画随着手机屏幕的角度也相应的改变着运动[/quote] 随着角度不同给予不同的样式就可以了

jsstudentcz 2016-10-08

打赏
举报

引用 4 楼 jslang 的回复:

“我想根据屏幕的的倾斜的同时也改变这个相对运行的轨迹方向呢” 没明白这话的意思

呃呃呃动画随着手机屏幕的角度也相应的改变着运动

jsstudentcz 2016-10-08

打赏
举报

也就是说这个动画我要应用在手机上，当我拿着手机的角度不同的时候这个动画始终会保持与地面垂直的运动轨迹，也就是跟着中立感应的不同也运动不一样

jsstudentcz 2016-09-30

打赏
举报

引用 2 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
@keyframes animX{
	  0% {left: 0px;}
	100% {left: 500px;}
}
@keyframes animY{
	  0% {top: 0px;}
	100% {top: 500px;}
}

#ball {
	width: 100px;
	height: 100px;
	background-color: #f99;
	border-radius: 50%;
	position: absolute;
	animation:animX 4s ease-in-out -2s infinite alternate, animY 4s ease-in-out infinite alternate;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
</html>

谢谢大神，另外我想请问一下如果我想根据屏幕的的倾斜的同时也改变这个相对运行的轨迹方向呢，如何能够实现？

天际的海浪 2016-09-30

打赏
举报

“我想根据屏幕的的倾斜的同时也改变这个相对运行的轨迹方向呢” 没明白这话的意思

天际的海浪 2016-09-29

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
@keyframes animX{
	  0% {left: 0px;}
	100% {left: 500px;}
}
@keyframes animY{
	  0% {top: 0px;}
	100% {top: 500px;}
}

#ball {
	width: 100px;
	height: 100px;
	background-color: #f99;
	border-radius: 50%;
	position: absolute;
	animation:animX 4s ease-in-out -2s infinite alternate, animY 4s ease-in-out infinite alternate;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
</html>

jsstudentcz 2016-09-29