篮球投掷动画
使用
H5
和
CSS3
实现的一个篮球投掷动画。
玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
亮点：
- 使用
复选框和伪类选择器代替 JS 实现按钮控制效果。 - 使用
多重渐变完成背景的绘制。
演示视频如下：
篮球投掷动画
源代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><!-- 总的容器 --><divclass="container"><!-- 左侧篮球容器 --><divclass="left-container"><!-- 投篮触发器 --><inputtype="checkbox"class="trigger"></input><!-- 篮球容器 --><divclass="groove"><!-- 篮球 --><divclass="ball"></div></div></div><!-- 右侧篮筐容器 --><divclass="right-container"><!-- 篮筐 --><divclass="hoop"></div></div></div></body></html>
本文转载自: https://blog.csdn.net/m0_73777400/article/details/141474279
版权归原作者 懒羊羊大王呀 所有， 如有侵权，请联系我们删除。
版权归原作者 懒羊羊大王呀 所有， 如有侵权，请联系我们删除。