新增第136个小实例：萌翻少女心的发光果冻泡泡

2022-04-11 16:22:17 +08:00 · 2022-04-11 16:22:17 +08:00 · 000f767d7d
parent 3c16c31984
commit 000f767d7d
3 changed files with 95 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -142,4 +142,5 @@
 132. HTML5+CSS3+JS小实例：上下滚动的数字时钟
 133. HTML5+CSS3+JS小实例：带标题描述的圆角图片手风琴效果
 134. HTML5+CSS3小实例：简单又别致的环形加载动画
-135. HTML5+CSS3+Vue小实例：左侧分类菜单右侧轮播图的组合布局
+135. HTML5+CSS3+Vue小实例：左侧分类菜单右侧轮播图的组合布局
+136. HTML5+CSS3小实例：萌翻少女心的发光果冻泡泡
--- a/code/136/136.css
+++ b/code/136/136.css
@ -0,0 +1,74 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 居中显示 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 渐变背景 */
+    background: linear-gradient(150deg,#d299c2,#fef9d7);
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+.container{
+    width: 200px;
+    height: 200px;
+    /* 相对定位 */
+    position: relative;
+}
+/* 泡泡 */
+.bubble{
+    width: 100%;
+    height: 100%;
+    /* 径向渐变 */
+    background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
+    border-radius: 50%;
+    /* 阴影 */
+    box-shadow: inset 0 0 20px #fff,
+        inset 10px 0 46px #eaf5fc,
+        inset 80px 0 60px #efcde6,
+        inset -20px -60px 100px #f9f6de,
+        inset 0 50px 140px #f9f6de,
+        0 0 90px #fff;
+    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
+    animation: bubble 4s ease-in-out infinite;
+}
+.shadow{
+    background-color: rgba(0,0,0,0.15);
+    width: 150px;
+    height: 40px;
+    border-radius: 50%;
+    /* 绝对定位 */
+    position: absolute;
+    left: 50%;
+    margin-left: -75px;
+    bottom: -100px;
+    /* 一点点模糊效果 */
+    filter: blur(1px);
+    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
+    animation: shadow 4s ease-in-out infinite;
+}
+
+/* 定义动画 */
+/* 泡泡浮动动画 */
+@keyframes bubble {
+    0%,100%{
+        transform: translateY(0);
+    }
+    50%{
+        transform: translateY(-80px);
+    }
+}
+/* 投影动画 */
+@keyframes shadow {
+    0%,100%{
+        transform: scale(0.5);
+    }
+    50%{
+        transform: scale(1);
+    }
+}
--- a/code/136/136.html
+++ b/code/136/136.html
@ -0,0 +1,19 @@
+<!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="136.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="bubble"></div>
+        <div class="shadow"></div>
+    </div>
+</body>
+
+</html>