CSS动画实例: 仍扔*式效果_html/css_WEB-ITnose

扔*式效果,在游戏中会用得多,H5页面效果里面也有相应的效果应用.这种效果也是非常有感觉的.

我们先把布局弄好,效果如下:

代码也是很简单的:

HTML

 <div class="outer_box">    <div class="inner_box"></div> </div>

.outer_box {     width: 200px;    height: 200px;    border: #bbb 5px solid;    margin: 200px auto;}.inner_box {    background-color: #44b549;    width: 100%;    height: 100%;}

结构代码写好后,我们来分析扔*的效果:

首先*是在某一个点扔出,这里我们设为原始状态的点.

其次就是将*以弧形方式在空中做弧形运动

最后在一个点消失.

这三步骤就实现扔*的简单效果.OK,我们直接用代码来给你解释:

CSS

@keyframes bomb_right {

0% {

tramsform: rotate(0deg);

}

50% {

opacity: 0.8;

}

100% {

transform: rotate(130deg);

opacity: 0;

}

}

然后将下面动画属性加入到内部BOX的CSS属性中

CSS

animation: bomb_right 1s ease-out infinite;

transform-origin: 200% 100%;

最后效果:

实例完成. 你也可以尝试写出向左扔出*的效果.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=199 ,欢迎大家传播与分享.