更新第51个小实例

2021-11-23 17:20:16 +08:00 · 2021-11-23 17:20:16 +08:00 · 0337cbbe36
parent f4ac680a28
commit 0337cbbe36
3 changed files with 87 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -54,4 +54,5 @@
 47. HTML5+CSS3小实例之隐藏式侧边栏菜单
 48. HTML5+CSS3小实例之3D立方体旋转相册
 49. HTML5+CSS3小实例之3D分层图像悬停效果
-50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
+50. HTML5+CSS3小实例之不偷看密码的超萌猫头鹰登录界面
+51. HTML5+CSS3小实例之动感的金属质感闪光文字
--- a/css/51.css
+++ b/css/51.css
@ -0,0 +1,65 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #000;
+}
+.container{
+    /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
+    filter: brightness(300%);
+    /* 溢出隐藏 */
+    overflow: hidden;
+}
+span.text{
+    color: #fff;
+    font-size: 200px;
+    font-weight: bold;
+    background-color: #000;
+}
+span.text::before{
+    content: "HELLO!";
+    /* 绝对定位 */
+    position: absolute;
+    /* 设置混合模式为：差别 */
+    mix-blend-mode: difference;
+    /* 模糊 */
+    filter: blur(2px);
+}
+span.back{
+    /* 渐变背景 */
+    background: linear-gradient(113deg,rgba(193,148,63,1),rgba(238,205,108,1));
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    /* 设置混合模式为：乘法（类似PS的正片叠底） */
+    mix-blend-mode: multiply;
+}
+span.shine{
+    /* 径向渐变背景，并且尺寸缩放为25%，按照默认方式平铺 */
+    background: radial-gradient(circle at center,#fff,#000 35%) center / 25% 25%;
+    position: absolute;
+    top: -100%;
+    left: -100%;
+    bottom: 0;
+    right: 0;
+    /* 设置混合模式为：颜色减淡 */
+    mix-blend-mode: color-dodge;
+    animation: move 2s linear infinite;
+}
+
+/* 定义动画 */
+@keyframes move {
+    to{
+        transform: translate(50%,50%);
+    }
+}
--- a/html/51.html
+++ b/html/51.html
@ -0,0 +1,20 @@
+<!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/51.css">
+</head>
+
+<body>
+    <div class="container">
+        <span class="text">HELLO!</span>
+        <span class="back"></span>
+        <span class="shine"></span>
+    </div>
+</body>
+
+</html>