php 简单动画代码,css3制作一个简单的火箭动画（附代码）

本篇文章给大家带来的内容是使用css3制作一个简单的火箭动画(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在之前的文章【css3动画之transform属性与transition属性的简单使用】中介绍了transform属性与transition属性的简单使用。下面我们介绍使用transform属性与transition属性将不同效果组合在一起，实现鼠标悬停，火箭飞起的简单动画效果。我们来看看代码吧！

html代码：

火箭

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;

}

大功告成！

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。