通过Web 编码示例培养技能
通过为各个级别的学习者设计的全面实用编码示例集来提高您的 Web 开发技能。探索各种编码技术，以提高您在 Web 开发方面的熟练程度和信心。
示例：HTML+CSS 制作火焰！
效果预览 
HTML
<body>
<div class="flame-box">
<div class="red flame"></div>
<div class="orange flame"></div>
<div class="yellow flame"></div>
<div class="white flame"></div>
<div class="blue circle"></div>
<div class="black circle"></div>
</div>
</body>CSS
body{
height: 95vh;
display: grid;
place-items: center;
background: black;
}
.flame-box{
height: 60px;
width: 60px;
transform-origin: center bottom;
animation: flicker 3ms 200ms ease-in infinite alternate;
}
.flame{
bottom: 0;
position: absolute;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
transform: rotate(-45deg) scale(1.5, 1.5);
}
.yellow{
height: 30px;
width: 30px;
left: 15px;
background: #ffd700;
box-shadow: 0px 0px 9px 4px #ffd700;
}
.orange{
left: 10px;
width: 40px;
height: 40px;
background: #ffa500;
box-shadow: 0px 0px 9px 4px #ffa500;
}
.red{
height: 50px;
width: 50px;
left: 5px;
background: #ff4500;
box-shadow: 0px 0px 5px 4px #ff4500;
}
.white{
height: 30px;
width: 30px;
left: 15px;
bottom: -4px;
background: #ffffff;
box-shadow: 0px 0px 9px 4px #ffffff;
}
.circle{
border-radius: 50%;
position: absolute;
}
.blue{
left: 25px;
bottom: -25px;
width: 10px;
height: 10px;
background: #6a5acd;
box-shadow: 0px 0px 15px 10px #6a5acd;
}
.black{
left: 10px;
bottom: -60px;
width: 40px;
height: 40px;
background: #000000;
box-shadow: 0px 0px 15px 10px #000000;
}
@keyframes flicker{
0% {transform: rotate(-1deg);}
20%{transform: rotate(1deg);}
40%{transform: rotate(-1deg);}
60%{transform: rotate(1deg) scaleY(1.04);}
80%{transform: rotate(-2deg) scaleY(0.92);}
100% {transform: rotate(1deg);}
}JavaScript
//javascript
