我浏览网页已经有一段时间了,试图找到一种方法,让图标在您加载页面时移动到屏幕上(从左侧移动到 body div 的中心)。如何才能做到这一点?
这是我目前所拥有的:
CSS3
a#rotator {
text-decoration: none;
padding-right: 20px;
margin-left: 20px;
float: left;
}
a#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
a#rotator img:hover {
box-shadow: 0 3px 15px #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: translate()
}
最佳答案
如果您想要纯 CSS 解决方案,可以使用 CSS3 动画功能。
您可以使用关键字 @animation
后跟要为该动画指定的名称来创建或声明动画。在大括号内,您必须指明动画的关键帧以及将在该关键帧中应用的 CSS 属性,以便完成关键帧之间的转换。
您必须至少指定两个关键帧,即动画的开始和结束,关键字为 from
和 to
,后跟大括号内的属性。例如:
@keyframes myanimation
{
from {
left: 0;
}
to {
left: 50%;
}
}
或者以三个关键帧为例(百分比表示持续时间的百分比):
@keyframes myanimation
{
0% {
left: 0;
}
10% {
left: 50%;
}
100% {
left: 10%;
}
}
创建动画后,您必须指定要为哪个元素设置动画,它只是匹配该元素的 CSS 规则中的 animation
属性。请注意,值中的名称必须与您之前创建的名称以及动画的持续时间相匹配。例如:
a#rotator {
animation: myanimation 5s;
}
您可以在此处指定持续时间、必须重复的次数等。您可以在此处阅读完整规范:http://www.w3.org/TR/css3-animations/
在这里您可以看到一个使用您提供的代码的工作示例:http://jsfiddle.net/mcSL7/1/
我已经停止 float 该元素并为其分配了绝对位置,因此我可以使用 top 和 left 属性将其移动到 body 中。
几乎所有现代浏览器都支持此 CSS 功能,即使其中一些需要 -webkit- 供应商前缀。在这里查看:http://caniuse.com/#feat=css-animation
关于image - 使用 CSS3 在屏幕上移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23184346/