飞道的博客

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

2022-07-02 21:07 472人阅读  评论(0)

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

进阶版JavaScript下周更新。

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

22

1、body代码


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

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

在div里放两个span

 按F12查看

 2、CSS样式

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


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

（2）设置背景色为黑


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

（3）设置div盒子


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

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


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

 （5）设置字体

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

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

 

（6）设置第一个span元素

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


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

（7）设置第二个span元素


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

完整代码


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


转载：https://blog.csdn.net/m0_61901625/article/details/125510753
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场