html 鼠标火花效果,css简单实现火焰效果

/*清除边距*/

body, div {

margin: 0;

padding: 0;

}

/*设置背景色*/

body {

background: #000;

}

.flame {

width: 300px;

height: 300px;

margin: 200px auto;

/*background: #FFFFFF;*/

position: relative;

}

/*火焰效果，用简单div实现*/

.flame div:nth-child(-n+6) {

width: 0px;

height: 0px;

background: #D81818;

border-radius: 20%;

transform: rotateZ(45deg);

position: absolute;

left: 45%;

top: 60%;

}

.flame div:nth-child(1) {

animation: gun 6s linear Infinite;

}

.flame div:nth-child(2) {

animation: gun1 6s linear Infinite;

animation-delay: 1s;

}

.flame div:nth-child(3) {

animation: gun 6s linear Infinite;

animation-delay: 2s;

}

.flame div:nth-child(4) {

animation: gun1 6s linear Infinite;

animation-delay: 3s;

}

.flame div:nth-child(5) {

animation: gun 6s linear Infinite;

animation-delay:4s;

}

.flame div:nth-child(6) {

animation: gun1 6s linear Infinite;

animation-delay:5s;

}

/*添加伪类元素实现火花效果*/

.flame1::before {

content: "";

width: 0px;

height: 0px;

background: #FFC001;

border-radius: 50%;

transform: rotateZ(45deg);

position: absolute;

left: 45%;

top: 60%;

animation: gun2 4s ease-in Infinite;

animation-delay: 1s;

background: radial-gradient(

5px at center,

red,

#FFC001

)

}

.flame3::before {

content: "";

width: 0px;

height: 0px;

background: #FFC001;

border-radius: 50%;

transform: rotateZ(45deg);

position: absolute;

left: 45%;

top: 60%;

animation: gun2 4s ease-in Infinite;

animation-delay: 3s;

background: radial-gradient(

5px at center,

red,

#FFC001

)

}

.flame5::before {

content: "";

width: 0px;

height: 0px;

background: #FFC001;

border-radius: 50%;

transform: rotateZ(45deg);

position: absolute;

left: 45%;

top: 60%;

animation: gun2 4s ease-in Infinite;

animation-delay: 6s;

background: radial-gradient(

5px at center,

red,

#FFC001

)

}

/*设置动画实现火焰上升*/

@keyframes gun {

0% {

width: 10px;

height: 10px;

transform: translateY(0px) translateX(0px) rotateZ(45deg);

}

100% {

width: 40px;

height: 40px;

transform: translateY(-200px) translateX(-30px) rotateZ(45deg);

opacity:0.2;

}

}

@keyframes gun1 {

0% {

width: 10px;

height: 10px;

transform: translateY(0px) translateX(0px) rotateZ(45deg);

}

100% {

width: 40px;

height: 40px;

transform: translateY(-200px) translateX(30px) rotateZ(45deg);

opacity:0.2;

}

}

@keyframes gun2 {

0% {

width: 3px;

height: 3px;

transform: translateY(0px) translateX(0px) rotateZ(45deg);

}

50%{

width: 5px;

height: 5px;

transform: translateY(-130px) translateX(-30px) rotateZ(45deg);

}

100% {

width: 5px;

height: 5px;

transform: translateY(-200px) translateX(-70px) rotateZ(45deg);

}

}

/*树枝*/

.branch1, .branch2 {

width: 260px;

height: 20px;

background: #DB4732;

position: absolute;

top: 80%;

left: 8%;

}

.branch1 {

transform: rotateZ(15deg);

}

.branch2 {

transform: rotateZ(-15deg);

}

这是一个简单用css+div布局实现的火焰效果，在网上看到觉得挺有趣，也比较美观，所以模仿一下。

这里没有用任何的js代码，仅用css动画等相关技术就可以实现。

css3 calc()：css简单的数学运算-加减乘除

css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html

CSS简单使用

CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

前端学习日记之HTML、CSS 简单总结

前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 < ...

css简单实现带箭头的边框