• 【跟着项目学CSS】第一期-闪动LOGO

    最近期末比较忙，没有上CSDN，没有回大家私信【非常对不起】。

    进阶版JavaScript下周更新。

    今天先浅浅学习一下CSS样式。

    22

    1、body代码

    1. <body>
    2.     <div class="text-box">
    3.         <span class="text-name">CSDN</span>
    4.         <span class="text-by">@GUIDM</span>
    5.     </div>
    6. </body>

    创建一个div盒子，类名为text-box。

    在div里放两个span

     按F12查看

     2、CSS样式

    （1）所有元素清除内外边框

    1. *{
    2.     margin: 0;
    3.     padding: 0;
    4.  }

    （2）设置背景色为黑

    1. body{
    2.         background-color: black;
    3.      }

    （3）设置div盒子

    1. .text-box{
    2.           position: absolute;
    3.           top: 50%;
    4.           left: 50%;
    5.           transform: translate(-50%,-50%);
    6.           color: #fff;
    7.           text-align: center;
    8.       }

     （4）将span元素设置为块级元素

    1. .text-box span{
    2.    display: block;
    3. }

     （5）设置字体

    上百度找Google字体找到自己喜欢的

    <link href="https://fonts.googlefonts.cn/css?family=Ruslan+Display" rel="stylesheet">

     

    （6）设置第一个span元素

    因为要闪动所以要创建动画

    1. .text-name{
    2.   font-family: 'Ruslan Display', cursive;
    3.   font-size: 100px;
    4.   animation: text 3s infinite;
    5. }
    6.  @keyframes text {
    7.           0% ,30%,32%,34%{
    8.               color: #222;
    9.               text-shadow:3px 0px 9px #222 ;
    10.           }
    11.           31%,32%,35%,100%{
    12.             color: #ddde8b;
    13.         text-shadow: 3px 0px 9px #ddde8b;  
    14.           }
    15.           
    16.       }

    （7）设置第二个span元素

    1. .text-by{
    2.         color: #ddde8b;
    3.         text-shadow: 3px 0px 9px #ddde8b;
    4.       }

    完整代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <link href="https://fonts.googlefonts.cn/css?family=Ruslan+Display" rel="stylesheet">
    8.     <title>Text</title>
    9.     <style>
    10.       *{
    11.           margin: 0;
    12.           padding: 0;
    13.       }
    14.       body{
    15.           background-color: black;
    16.       }
    17.       .text-box{
    18.           position: absolute;
    19.           top: 50%;
    20.           left: 50%;
    21.           transform: translate(-50%,-50%);
    22.           color: #fff;
    23.           text-align: center;
    24.       }
    25.       .text-box span{
    26.           display: block;
    27.       }
    28.       .text-name{
    29.         font-family: 'Ruslan Display', cursive;
    30.         font-size: 100px;
    31.         animation: text 3s infinite;
    32.       }
    33.       .text-by{
    34.         color: #ddde8b;
    35.         text-shadow: 3px 0px 9px #ddde8b;
    36.       }
    37.       @keyframes text {
    38.           0% ,30%,32%,34%{
    39.               color: #222;
    40.               text-shadow:3px 0px 9px #222 ;
    41.           }
    42.           31%,32%,35%,100%{
    43.             color: #ddde8b;
    44.         text-shadow: 3px 0px 9px #ddde8b;  
    45.           }
    46.           
    47.       }
    48.     </style>
    49. </head>
    50. <body>
    51.     <div class="text-box">
    52.         <span class="text-name">CSDN</span>
    53.         <span class="text-by">@GUIDM</span>
    54.     </div>
    55. </body>
    56. </html>

  • 相关阅读:
    介绍TCP窗口
    字节数组转成BLOB对象(不连接数据库)
    解析Spring Cloud面试的十道难题，帮你攻克技术关卡
    全职独立开发经验分享
    Splay
    Leetcode160. 相交链表(双指针)
    ubuntu安装Chrome浏览器
    【C++】：模板进阶
    领英如何批量添加搜索的人脉，批量加领英推荐人脉，批量加精灵推荐人脉，批量加Groups成员，通过链接批量加人
    各种存储性能瓶颈分析与优化方案
  • 原文地址：https://blog.csdn.net/m0_61901625/article/details/125510753