• 【css】svg动画动态骷髅旋转html

    这个是我在哪个网站上抄的笔记。

     

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Titletitle>
    6.   <style>
    7.     @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
    8.  
    9.     body {
    10.       background: black;
    11.     }
    12.  
    13.     .highPage {
    14.       position: relative;
    15.       color: #0b0;
    16.       font-size: 21px;
    17.       line-height: 1.5;
    18.       padding: 32px 16px;
    19.       max-width: 960px;
    20.       margin: 0 auto;
    21.       font-family: 'Press Start 2P', cursive;
    22.     }
    23.  
    24.      .skulls {
    25.       position: relative;
    26.       padding: 16px 0 24px;
    27.       max-width: 600px;
    28.       margin: 0 auto;
    29.       border: 24px solid;
    30.       /*!*border-image: url(https://skullctf.com/images/skull-border.svg) 32  ;*!*/
    31.       border-image: url(https://skullctf.com/images/skull-border.svg) 32 round;
    32.  
    33.     }
    34.  
    35.  
    36.     .highPage h1 {
    37.       text-align: center;
    38.     }
    39.  
    40.     .highPage table {
    41.       text-transform: uppercase;
    42.       width: 440px;
    43.       margin: 0 auto;
    44.     }
    45.  
    46.     .highPage table th {
    47.       min-width: 140px;
    48.       text-align: left;
    49.     }
    50.  
    51.     .highPage table tr:nth-child(1) td {
    52.       color: red;
    53.     }
    54.  
    55.     .highPage table tr:nth-child(2) td {
    56.       color: purple;
    57.     }
    58.  
    59.     .highPage table tr:nth-child(3) td {
    60.       color: salmon;
    61.     }
    62.  
    63.     .highPage table tr:nth-child(4) td {
    64.       color: orange;
    65.     }
    66.  
    67.     .highPage table tr:nth-child(5) td {
    68.       color: yellow;
    69.     }
    70.   style>
    71. head>
    72. <body>
    73.  
    74.  
    75. <div class="highPage">
    76.   <div class="skulls">
    77.     <h1>High Scoresh1>
    78.     <table>
    79.       <thead>
    80.       <tr>
    81.         <th>Rankth>
    82.         <th>Scoreth>
    83.         <th>Nameth>
    84.       tr>
    85.       thead>
    86.       <tbody>
    87.       <tr>
    88.         <td>1sttd>
    89.         <td>0td>
    90.         <td>td>
    91.       tr>
    92.       <tr>
    93.         <td>2ndtd>
    94.         <td>0td>
    95.         <td>td>
    96.       tr>
    97.       <tr>
    98.         <td>3rdtd>
    99.         <td>0td>
    100.         <td>td>
    101.       tr>
    102.       <tr>
    103.         <td>4thtd>
    104.         <td>0td>
    105.         <td>td>
    106.       tr>
    107.       <tr>
    108.         <td>5thtd>
    109.         <td>0td>
    110.         <td>td>
    111.       tr>
    112.       <tr>
    113.         <td>6thtd>
    114.         <td>0td>
    115.         <td>td>
    116.       tr>
    117.       <tr>
    118.         <td>7thtd>
    119.         <td>0td>
    120.         <td>td>
    121.       tr>
    122.       <tr>
    123.         <td>8thtd>
    124.         <td>0td>
    125.         <td>td>
    126.       tr>
    127.       <tr>
    128.         <td>9thtd>
    129.         <td>0td>
    130.         <td>td>
    131.       tr>
    132.       <tr>
    133.         <td>10thtd>
    134.         <td>0td>
    135.         <td>td>
    136.       tr>
    137.       tbody>
    138.     table>
    139.   div>
    140. div>
    141.  
    142.  
    143. body>
    144. html>

    这个网站我忘记在哪里去了，找一下应该找的出来的，原网站上有详细解说。

  • 相关阅读:
    Kafka架构和使用场景
    重磅！Adobe收购Figma
    三菱FX3U——ST编程流水灯
    软件架构简介
    第十五章 汇编语言与逆向编程
    版税激励错配下，创作者如何可持续地盈利？
    Deepfake 换脸真假难辨，马斯克分克已伪装成功
    ByteTrack阅读思考笔记
    Python3语法总结-数据转换②
    Django使用jinja2时出现的问题
  • 原文地址：https://blog.csdn.net/qq_33014695/article/details/126118126