通过Web 编码示例培养技能
通过为各个级别的学习者设计的全面实用编码示例集来提高您的 Web 开发技能。探索各种编码技术，以提高您在 Web 开发方面的熟练程度和信心。
示例：HTML+CSS 制作一个切西瓜动效！
效果预览 
HTML
<body>
<div class="watermelon">
<div class="slice-a"></div>
<div class="seed-a"></div>
<div class="seed-b"></div>
<div class="seed-c"></div>
<div class="seed-d"></div>
<div class="seed-e"></div>
<div class="slice-b"></div>
</div>
</body>CSS
:root {
--bg: #b6d887;
--green: #009400;
--red: #e70001;
--seeds: #4f2500;
}
body {
background-color: var(--bg);
}
.watermelon {
position: absolute;
width: 500px;
height: 500px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.slice-a {
position: absolute;
width: 200px;
height: 100px;
top: 40%;
left: 30%;
border-radius: 50%;
transform: rotate(45deg);
background-color: var(--red);
}
.slice-a:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: -15%;
border-bottom: 60px solid var(--green);
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
.seed-a, .seed-b, .seed-c, .seed-d, .seed-e {
height: 10px;
width: 10px;
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
background-color: var(--seeds);
}
.seed-a {
position: absolute;
top: 40%;
left: 45%;
}
.seed-b {
position: absolute;
top: 40%;
left: 50%;
}
.seed-c {
position: absolute;
top: 45%;
left: 45%;
}
.seed-d {
position: absolute;
top: 35%;
left: 40%;
}
.seed-e {
position: absolute;
top: 45%;
left: 40%;
}
.slice-b {
position: absolute;
height: 100px;
width: 200px;
top: 40%;
left: 30%;
border-radius: 50%;
transform: rotate(-130deg);
background-color: var(--green);
animation: slice 5s ease-in-out infinite;
}
.slice-b:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: -15%;
border-bottom: 60px solid var(--green);
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
@keyframes slice {
from {
top: 40%;
left: 30%;
}
to {
top: 50%;
left: 45%;
}
}JavaScript
//javascript
