扔*式效果,在游戏中会用得多,h5页面效果里面也有相应的效果应用.这种效果也是非常有感觉的.
我们先把布局弄好,效果如下:
代码也是很简单的:
HTML
登录后复制
- .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 ,欢迎大家传播与分享.
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
