转载

CSS动画实例: 仍扔炸弹式效果

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

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

CSS动画实例: 仍扔炸弹式效果代码也是很简单的:

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%;

最后效果:

CSS动画实例: 仍扔炸弹式效果实例完成. 你也可以尝试写出向左扔出炸弹的效果.

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

原文 http://www.wutongwei.com/front/infor_showone.tweb?id=199

正文到此结束

所属分类：编程技术

本文标签： src web QQ群 key 实例 HTML 代码文章 CSS 博客 UI http
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

CSS动画实例: 仍扔炸弹式效果

HTML

CSS

CSS

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流