前端：篮球投掷动画
篮球投掷动画
使用 H5 和 CSS3 实现的一个篮球投掷动画。
玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
亮点：
- 使用
复选框和伪类选择器代替 JS 实现按钮控制效果。 - 使用
多重渐变完成背景的绘制。
演示视频如下：
篮球投掷动画
源代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>投篮机title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #03a9f4;
font-family: "sans-serif";
width: 100%;
height: 100%vh;
}
/* 最大的容器 */
.container {
position: relative;
margin: 0px auto;
margin-top: 350px;
width: 350px;
height: 200px;
text-align: center;
display: fles;
}
/* 篮筐下面的地面 */
.container::after {
content: "";
position: absolute;
bottom: 143px;
left: 0;
width: 100%;
height: 5px;
border-radius: 2px;
background-color: rgb(128, 128, 128, 0.7);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 3px 10px 0 rgba(0, 0, 0, 0.2);
}
/* 左侧篮筐容器 */
.left-container {
position: relative;
float: left;
width: 120px;
}
/* 篮球的容器 */
.groove {
width: 120px;
height: 50px;
background-color: purple;
border-radius: 25px;
padding: 2px;
}
/* 投球的触发器 */
.trigger {
position: absolute;
/* 有内边距,这里是想与内容区对齐 */
left: 2px;
top: 2px;
width: 120px;
height: 50px;
opacity: 0;
}
/* 复选框选中就改变颜色 */
.trigger:checked+.groove {
background-color: purple;
}
/* 复选框选中就投球 */
.trigger:checked+.groove .ball {
animation: ball 2s linear forwards;
}
/* 未选中就改变颜色 */
.trigger:not(:checked)+.groove {
background-color: green;
}
/* 篮球 */
.ball {
height: 46px;
width: 46px;
background-color: rgb(217, 98, 58);
border-radius: 50%;
border: 2px solid black;
background-image: radial-gradient(circle at 0px 50%, transparent 13px, black 13px, black 15px, transparent 15px), radial-gradient(circle at 46px 50%, transparent 13px, black 13px, black 15px, transparent 15px), linear-gradient(90deg, transparent 22px, black 22px, black 24px, transparent 24px), linear-gradient(0deg, transparent 22px, black 22px, black 24px, transparent 24px);
}
/* 投蓝的动画，挺搞心态的 */
@keyframes ball {
0% {
transform: translate(0px, 0px) rotate(15deg);
}
6% {
transform: translate(30px, -93px) rotate(30deg);
}
10% {
transform: translate(50px, -145px) rotate(60deg);
}
14% {
transform: translate(70px, -189px) rotate(75deg);
}
16% {
transform: translate(80px, -208px) rotate(90deg);
}
18% {
transform: translate(90px, -225px) rotate(100deg);
}
20% {
transform: translate(100px, -240px) rotate(120deg);
}
24% {
transform: translate(120px, -264px) rotate(130deg);
}
26% {
transform: translate(130px, -273px) rotate(135deg);
}
30% {
transform: translate(150px, -285px) rotate(140deg / 2);
}
34% {
transform: translate(170px, -290px) rotate(150deg);
}
42% {
transform: translate(210px, -273px) rotate(160deg / 6 * 5);
}
46% {
transform: translate(230px, -253px) rotate(170deg);
}
48% {
transform: translate(240px, -240px) rotate(180deg);
}
50% {
transform: translate(250px, -225px) rotate(190deg);
}
52% {
transform: translate(260px, -208px) rotate(195deg);
}
54% {
transform: translate(270px, -189px) rotate(198deg);
}
56% {
transform: translate(290px, -145px) rotate(200px);
}
58% {
transform: translate(297px, -120px) rotate(203deg);
}
60% {
transform: translate(297px, -80px) rotate(205deg);
}
75% {
transform: translate(297px, -40px) rotate(208deg);
}
80% {
transform: translate(297px, 0px) rotate(210deg);
}
85% {
transform: translate(290px, -15px) rotate(213deg);
}
88% {
transform: translate(287px, 0px) rotate(215deg);
}
90% {
transform: translate(285px, -10px) rotate(218deg);
}
93% {
transform: translate(283px, 0px) rotate(220deg);
}
97% {
transform: translate(280px, -5px) rotate(220deg);
}
100% {
transform: translate(280px, 0px) rotate(220deg);
}
}
/* 右侧篮筐容器 */
.right-container {
position: relative;
float: right;
width: 230px;
height: 200px;
}
/* 篮筐 */
.hoop {
position: absolute;
top: -80px;
right: 0;
width: 56px;
height: 10px;
background-color: rgb(240, 46, 23);
}
/* 篮网 */
.hoop::before {
content: "";
position: absolute;
left: 3px;
top: 100%;
box-sizing: border-box;
width: 50px;
height: 35px;
border-radius: 0 0 6px 6px / 0 0 20px 20px;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
background-image: repeating-linear-gradient(45deg, #fff 20%, #fff 25%, transparent 25%, transparent 40%), repeating-linear-gradient(-45deg, #fff 30%, #fff 35%, transparent 35%, transparent 50%);
}
/* 篮板 */
.hoop::after {
content: "";
position: absolute;
right: -10px;
bottom: -10px;
background-color: rgb(69, 201, 133);
width: 10px;
height: 70px;
}
style>
head>
<body>
<div class="container">
<div class="left-container">
<input type="checkbox" class="trigger">input>
<div class="groove">
<div class="ball">div>
div>
div>
<div class="right-container">
<div class="hoop">div>
div>
div>
body>
html>