通过Web 编码示例培养技能
通过为各个级别的学习者设计的全面实用编码示例集来提高您的 Web 开发技能。探索各种编码技术，以提高您在 Web 开发方面的熟练程度和信心。
示例：HTML+CSS 制作烟效果！
效果预览 
HTML
<body>
<div id="smoke-box">
<span class="s0"></span>
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span>
<span class="s5"></span>
<span class="s6"></span>
<span class="s7"></span>
<span class="s8"></span>
<span class="s9"></span>
</div>
</body>CSS
body {
background-color: #08e7ef;
}
#smoke-box {
position: absolute;
width: 1px;
height: 160px;
bottom: 50%;
left: 50%;
z-index: 3;
}
#smoke-box span {
display: block;
position: absolute;
left: 50%;
bottom: -35px;
margin-left: -20px;
width: 0;
height: 0;
border: 35px solid #4b4b4b;
border-radius: 35px;
opacity: 0;
transform: scale(0.2);
}
@keyframes smoke-boxL {
0% {
transform: scale(0.2) translate(0, 0)
}
10% {
opacity: 1;
transform: scale(0.2) translate(0, -5px)
}
100% {
opacity: 0;
transform: scale(1) translate(-20px, -130px)
}
}
@keyframes smoke-boxR {
0% {
transform: scale(0.2) translate(0, 0)
}
10% {
opacity: 1;
transform: scale(0.2) translate(0, -5px)
}
100% {
opacity: 0;
transform: scale(1) translate(20px, -130px)
}
}
#smoke-box .s0 {
animation: smoke-boxL 10s 0s infinite
}
#smoke-box .s1 {
animation: smoke-boxR 10s 1s infinite
}
#smoke-box .s2 {
animation: smoke-boxL 10s 2s infinite
}
#smoke-box .s3 {
animation: smoke-boxR 10s 3s infinite
}
#smoke-box .s4 {
animation: smoke-boxL 10s 4s infinite
}
#smoke-box .s5 {
animation: smoke-boxR 10s 5s infinite
}
#smoke-box .s6 {
animation: smoke-boxL 10s 6s infinite
}
#smoke-box .s7 {
animation: smoke-boxR 10s 7s infinite
}
#smoke-box .s8 {
animation: smoke-boxL 10s 8s infinite
}
#smoke-box .s9 {
animation: smoke-boxR 10s 9s infinite
}JavaScript
//javascript
