在之前的文章【css3动画之transform属性与transition属性的简单使用】中介绍了transform属性与transition属性的简单使用。下面我们介绍使用transform属性与transition属性将不同效果组合在一起,实现鼠标悬停,火箭飞起的简单动画效果。我们来看看代码吧!
html代码:
<div id="outerspace"> <div class="rocket"> <div> <!-- rocket --> </div> 火箭 </div> </div>
css代码1:
/* 初始状态 */ #outerspace { width: 800px; height: 500px; margin: 100px auto; position: relative; height: 400px; background: #0c0440 url(img/outerspace.jpg); color: #fff; } div.rocket { position: absolute; bottom: 10px; left: 20px; } div.rocket div { width: 92px; height: 215px; background: url(img/rocket.gif) no-repeat; }
在添加鼠标悬停效果后,css2代码:
/* 悬停效果 */ #outerspace:hover div.rocket { -webkit-transform: translate(540px, -200px); -moz-transform: translate(540px, -200px); -o-transform: translate(540px, -200px); -ms-transform: translate(540px, -200px); transform: translate(540px, -200px); } #outerspace:hover div.rocket div { -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); }当鼠标悬停时,虽然实现了变换,但效果有点突兀,需要添加一点过渡效果。
在原来的css1代码上添加过渡,css3代码:
div.rocket { position: absolute; bottom: 10px; left: 20px; -webkit-transition: 3s ease-in; -moz-transition: 3s ease-in; -o-transition: 3s ease-in; transition: 3s ease-in; } div.rocket div { width: 92px; height: 215px; background: url(img/rocket.gif) no-repeat; -webkit-transition: 2s ease-in-out; -moz-transition: 2s ease-in-out; -o-transition: 2s ease-in-out; transition: 2s ease-in-out; }大功告成!
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是css3制作一个简单的火箭动画(附代码)的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
……