更新第82个小实例：篮球弹跳动画

2021-12-27 18:25:22 +08:00 · 2021-12-27 18:25:22 +08:00 · d34b6ef29b
parent 326b667dae
commit d34b6ef29b
3 changed files with 130 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -85,4 +85,5 @@
 78. HTML5+CSS3小实例之按钮悬浮效果
 79. HTML5+CSS3小实例：纯CSS实现DNA双螺旋动画
 80. HTML5+CSS3小实例：始终飞向鼠标的纸飞机
-81. HTML5+CSS3+JS小实例：滑动切换的注册登录界面
+81. HTML5+CSS3+JS小实例：滑动切换的注册登录界面
+82. HTML5+CSS3小实例：篮球弹跳动画
--- a/css/82.css
+++ b/css/82.css
@ -0,0 +1,106 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(200deg,#2f80ed,#56ccf2);
+}
+.ball-box{
+    width: 150px;
+    height: 150px;
+    /* 执行动画：动画名 时长 减速 先反向再正向 无限次播放 */
+    animation: bounce 0.6s ease-out alternate-reverse infinite;
+}
+.ball{
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background-color: #f7972b;
+    box-shadow: 0 0 2px 4px #fff;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    /* 绝对定位 */
+    position: absolute;
+    z-index: 1;
+    /* 执行动画：动画名 时长 线性 无限次播放 */
+    animation: roll 3s linear infinite;
+}
+.ball::before,.ball::after{
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 5px solid #fff;
+    /* 加一点点模糊 */
+    filter: blur(0.5px);
+}
+.ball::before{
+    left: -70%;
+}
+.ball::after{
+    right: -70%;
+}
+.ball .a,.ball .b{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    background-color: #fff;
+}
+.ball .a{
+    width: 200px;
+    height: 5px;
+}
+.ball .b{
+    width: 5px;
+    height: 200px;
+}
+.shadow{
+    width: 150px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: rgba(0,0,0,0.4);
+    position: absolute;
+    bottom: 25vh;
+    z-index: -1;
+    filter: blur(1.5px);
+    animation: shadow 0.6s ease-out alternate-reverse infinite;
+}
+
+/* 定义动画 */
+/* 篮球弹跳的动画 */
+@keyframes bounce {
+    0%{
+        transform: translateY(15vh);
+    }
+    100%{
+        transform: translateY(-20vh);
+    }
+}
+/* 篮球旋转的动画 */
+@keyframes roll {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}
+/* 阴影的动画 */
+@keyframes shadow {
+    0%{
+        transform: scale(0.15,1.25);
+    }
+    100%{
+        transform: scale(1.25,0.75);
+    }
+}
--- a/html/82.html
+++ b/html/82.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>篮球弹跳动画</title>
+    <link rel="stylesheet" href="../css/82.css">
+</head>
+
+<body>
+    <div class="ball-box">
+        <div class="ball">
+            <div class="a"></div>
+            <div class="b"></div>
+        </div>
+    </div>
+    <div class="shadow"></div>
+</body>
+
+</html>