摘要:烟花特效,比较简单,直接贴代码了实现烟花特效宋体素材
烟花特效,比较简单,直接贴代码了……
css3实现烟花特效
* {
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
#fireworks{
position: absolute;
left: 50%;
margin-left: -250px;
bottom: 60%;
margin-bottom: -180px;
transform: scale(0);
animation: fireworks 5s 3s;
}
@keyframes fireworks {
0%{
transform: scale(0);
}
80%{
transform: scale(1);
}
100%{
opacity: 0;
}
}
#firecracker{
position: absolute;
left: 50%;
bottom: 0%;
margin-left: -4px;
animation: firecracker 3s forwards;
}
@keyframes firecracker {
0%{
transform: scale(1);
bottom: 0%;
}
100%{
bottom: 60%;
transform: scale(0);
}
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2051.html
摘要:自己选择一个好的图像背景填充画布注意背景图片可根据自己的喜好进行更换,还不赶紧定制一个属于自己的烟花秀七夕总结以上便是博主给大家的七夕节礼物了,代码不到行,但却完成了一个超炫的效果。完整代码可在公众号后台回复七夕获取,最后祝大家七夕节快乐。 作者:xiaoyu 微信公众号:Python数据科学 知乎:python数据分析师 showImg(https://segmentfault.c...
摘要:实现扇形动画菜单特效效果图代码如下,复制即可使用实现扇形动画菜单特效 CSS3实现扇形动画菜单特效 效果图: 代码如下,复制即可使用: DOCTYPE html> CSS3实现扇形动画菜单特效 *{padding: 0; margin: 0;} body{backg...
摘要:本篇文章将给大家带来一个的黑科技如何仅仅使用来实现全景图的效果最终效果演示页面布局基础样式首先定义一些基本的样式和动画这段代码的意思是让图片的高等于容器的高,并且水平方向自动,即图片最左边贴着容器左侧。 本篇文章将给大家带来一个css3的黑科技:如何仅仅使用css来实现全景图的效果? 最终效果演示:demo 页面布局 基础样式 首先定义一些基本的样式和动画 .panorama { ...
阅读 654·2023-04-25 19:43
阅读 3834·2021-11-30 14:52
阅读 3711·2021-11-30 14:52
阅读 3775·2021-11-29 11:00
阅读 3732·2021-11-29 11:00
阅读 3789·2021-11-29 11:00
阅读 3516·2021-11-29 11:00
阅读 5933·2021-11-29 11:00