流光炫彩背景小特效（html+css）简易版登录页面

阅读：评论：0

以上为静态图：

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           * {
               /*去除全局内外边距*/
               margin: 0;
               padding: 0;
           }

           #box1 {
               width: 500px;
               height: 400px;
               margin: 250px auto;
               text-align: center;
               border-radius: 15px;
               box-shadow: 10px 10px 30px #888888;
               background-color: rgb(255, 255, 255, 0.5);
               font-size: 20px;
               filter: blur(0.7px);

}

           @keyframes sun {
               0% {
                   background-position: 100% 0;
               }

               100% {
                   background-position: -400% 0;
               }
           }

           /* 添加背景移动动画（添加完成这一步即可看到流光） */
           #body1:hover {
               animation: sun 120s infinite;
               /* 动画名称与循环动画 */
           }

           /* 最后添加外面的模糊光，这时流光动画会被这层模糊挡住*/
           #body1::before {
               content: "";
               position: absolute;
               left: -5px;
               right: -5px;
               top: -5px;
               bottom: -5px;
               background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
               background-size: 400%;
               filter: blur(20px);
               /* 将层级下调为-1 */
               z-index: -1;
           }

/* 给外面的模糊光也加上动画 */
           #body1:hover::before {
               animation: sun 20s infinite;
           }
           label {
               font-size: 30px;
           }
           input {
               height: 40px;
               width: 300px;
               font-size: 20px;
           }
       </style>
   </head>
   <body>
       <div id="body1">
           <div id="box1">
               <h1 style="padding:20px ;">炫彩小网页</h1>
               <br>
               <form action="" method="get">
                   <label>用户名：</label><input type="text" src="" placeholder="请输入账号" /><br>
                   <br>
                   <label>密&nbsp &nbsp码&nbsp：</label><input type="password" src="" placeholder="请输入密码" /><br>
                   <br>
                   <br><br>
                   <a href="./table_test.html" target="new" 登录</a>
               </form>
               <br>

</body>
</html>

本文发布于:2024-01-30 18:22:06，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170661013021937.html

上一篇：怎么学习分布式系统

下一篇：JavaScript基础入门

标签：流光炫彩特效背景页面

留言与评论（共有 0 条评论）