• 【跟着项目学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>

  • 相关阅读:
    运维SRE-19 网站Web中间件服务-http-nginx
    练习 4 Web [MRCTF2020]Ez_bypass
    学大数据技术与应用的女生多吗？适合吗？
    AQS源码解析 2.简介 & 内部核心结构
    【AcWing】3449. 数字根 (数论思维、模拟)
    php新手实战：自定义书源下载api
    HTML期末作业课程设计期末大作业——我的美丽家乡湛江 海鲜之都HTML+CSS+JavaScript
    高效技巧揭秘：Java轻松批量插入或删除Excel行列操作
    自控力前言
    Leetcode—34.在排序数组中查找元素的第一个和最后一个位置【中等】
  • 原文地址：https://blog.csdn.net/m0_61901625/article/details/125510753