新增第207个小实例：弹出式悬停效果

2023-02-19 15:57:13 +08:00 · 2023-02-19 15:57:13 +08:00 · cb12097577
parent cf5ba1e22b
commit cb12097577
6 changed files with 81 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -214,6 +214,7 @@
 204. HTML5+CSS3+Vue小实例：彩色圆环溶解加载动画
 205. HTML5+CSS3小实例：文字涂抹动画
 206. HTML5+CSS3小实例：人物介绍卡片2.0
+207. HTML5+CSS3小实例：弹出式悬停效果

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/207/207.css
+++ b/code/207/207.css
@ -0,0 +1,63 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口宽高 */
+    min-height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fef0ff;
+}
+img{
+    /* 定义自定义属性，可通过var函数进行调用 */
+    /* 图片尺寸 */
+    --s:200px;
+    /* 边框大小 */
+    --b:6px;
+    /* 边框颜色 */
+    --c:#eb9dff;
+    /* 背景颜色 */
+    --cb:#c87be4;
+    /* 缩放值 */
+    --sc:1;
+
+    width: var(--s);
+    height: var(--s);
+    margin: 5px;
+    padding-top: 25px;
+    cursor: pointer;
+    border-radius: 0 0 999px 999px;
+    /* 设置background-position、background-repeat、background-clip */
+    --g:50%/calc(100% / var(--sc)) 100% no-repeat content-box;
+    /* 计算轮廓与边框边缘的距离 */
+    --o:calc((1 / var(--sc) - 1) * var(--s) / 2 - var(--b));
+    /* 设置轮廓 */
+    outline: var(--b) solid var(--c);
+    /* 轮廓与边框边缘的距离 */
+    outline-offset: var(--o);
+    /* 背景 */
+    background: radial-gradient(circle closest-side, var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,transparent) var(--g);
+    /* 遮罩 */
+    -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--o)) / calc(100% / var(--sc) - 2 * var(--b) - 2px) 50%,
+    radial-gradient(circle closest-side,#000 99%,transparent) var(--g);
+    /* 默认缩放值 */
+    transform: scale(var(--sc));
+    transition: 0.5s;
+}
+/* 悬停时图片放大 */
+img:hover{
+    --sc:1.4;
+}
+/* 为第2、3张图片设置背景颜色、边框颜色 */
+img:nth-child(2){
+    --c:#ffacc6;
+    --cb:#ff75a1;
+}
+img:nth-child(3){
+    --c:#4bd2ff;
+    --cb:#03aee6;
+}
--- a/code/207/207.html
+++ b/code/207/207.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>弹出式悬停效果</title>
+    <link rel="stylesheet" href="207.css">
+</head>
+<body>
+    <div class="container">
+        <img src="/images/op/3mei/luobin.png" alt="">
+        <img src="/images/op/3mei/hankuke.png" alt="">
+        <img src="/images/op/3mei/namei.png" alt="">
+    </div>
+</body>
+</html>
--- a/images/op/3mei/hankuke.png
+++ b/images/op/3mei/hankuke.png
--- a/images/op/3mei/luobin.png
+++ b/images/op/3mei/luobin.png
--- a/images/op/3mei/namei.png
+++ b/images/op/3mei/namei.png