• 纯前端个人主页分享

    1. 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">
    7.   <link rel="shortcut icon" href="http://q.qlogo.cn/g?b=qq&nk=3487297072&s=160" type="image/ico" >
    8.  
    9.   <title>云川title>
    10.  
    11.  
    12.   <link rel="stylesheet" href="style.css">
    13. head>
    14. <style>
    15. * {
    16.   margin: 0;
    17.   padding: 0;
    18. }
    19.     body {
    20.       background-image: url('img.png'); /* 更换为你的背景图片路径 */
    21.       background-size: cover;
    22.       background-position: center;
    23.       margin: 0;
    24.       font-family: Arial, sans-serif;
    25.     }
    26.  
    27.     .main {
    28.       display: flex;
    29.       justify-content: center;
    30.       align-items: center;
    31.       min-height: 100vh;
    32.     }
    33.  
    34.     .box {
    35.       background-color: rgba(255, 255, 255, 0.8);
    36.       padding: 20px;
    37.       border-radius: 10px;
    38.       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    39.       max-width: 400px;
    40.       width: 100%;
    41.       text-align: center;
    42.     }
    43.  
    44.     @-webkit-keyframes 'Box' {
    45.       from {
    46.         box-shadow: 0 1px 5px rgba(0, 0, 0, 0);
    47.       }
    48.       to {
    49.         box-shadow: 0 1px 60px rgba(20, 50, 18, 0.2);
    50.       }
    51.     }
    52.     .info {
    53.       display: flex;
    54.       width: 100%;
    55.       flex-direction: column;
    56.       align-items: center;
    57.     }
    58.     .head {
    59.       position: relative;
    60.       width: 100px;
    61.       height: 100px;
    62.       margin-top: 45px;
    63.       margin-bottom: 20px;
    64.       border-radius: 52px;
    65.       background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
    66.       padding: 1px;
    67.     }
    68.     .head img {
    69.       border-radius: 50%;
    70.       width: 100px;
    71.       height: 100px;
    72.     }
    73.  
    74.     .head:hover {
    75.       transition: 1s;
    76.       transform: scale(1.2);
    77.     }
    78.  
    79.     /* 介绍部分 */
    80.  
    81.     .jieshao {
    82.       display: flex;
    83.       justify-content: center;
    84.       align-items: center;
    85.       margin: 10px 0;
    86.     }
    87.     .apps {
    88.       display: flex;
    89.       align-items: center;
    90.       margin: 10px 0;
    91.       background-color: #03a9f4;
    92.       padding: 5px;
    93.       border-radius: 20px;
    94.       box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
    95.     }
    96.     .apps img {
    97.       width: 25px;
    98.       height: 25px;
    99.       border-radius: 15px;
    100.       margin-right: 5px;
    101.     }
    102.     .apps h2 {
    103.       font-size: 15px;
    104.       font-weight: bold;
    105.       color: white;
    106.     }
    107.     .jie-img1 {
    108.       width: 40px;
    109.       height: 40px;
    110.       margin-left: 10px;
    111.     }
    112.     .jie-img1:hover {
    113.       transition: 1s;
    114.       transform: scale(1.1);
    115.     }
    116.     .jieshao h1 {
    117.       font-size: 16px;
    118.       text-align: center;
    119.       color: #646464;
    120.       margin-left: 10px;
    121.     }
    122.     .jieshao h3 {
    123.       font-size: 14px;
    124.       text-align: center;
    125.       color: #646464;
    126.     }
    127.     .jieshao a {
    128.       text-decoration: none;
    129.     }
    130.     .jieshao h1:hover {
    131.       color: transparent;
    132.       background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
    133.       -webkit-background-clip: text;
    134.       font-size: 18px;
    135.       transition-duration: 0.5s;
    136.     }
    137.     .div1 {
    138.       height: 100%;
    139.       width: 100%;
    140.       background-color: #60c2e0;
    141.       position: absolute;
    142.       margin: 0 auto;
    143.       text-align: center;
    144.       line-height: 100px;
    145.     }
    146.     .pic {
    147.       width: 100px;
    148.       height: 100px;
    149.       border-radius: 50px;
    150.       transition: all 0.2s;
    151.       border: 0px solid #fff;
    152.     }
    153.     .sign {
    154.       position: absolute;
    155.       bottom: 0;
    156.       right: 0;
    157.       display: flex;
    158.       width: 25px;
    159.       height: 25px;
    160.       background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
    161.       border: 2px solid #fff;
    162.       border-radius: 15px;
    163.       justify-content: center;
    164.       align-items: center;
    165.       transition: all 0.3s;
    166.     }
    167.     .sign:hover {
    168.       background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
    169.     }
    170.     .box1 {
    171.       width: 100%;
    172.       max-width: 800px;
    173.       background-color: #fff;
    174.       padding: 0px;
    175.       box-shadow: 0 1px 15px rgba(60, 90, 10, 0.15);
    176.       border-radius: 25px;
    177.       margin-top: 10px;
    178.       transition: all 0.5s;
    179.     }
    180.     .box1:hover {
    181.       margin: 10px;
    182.       padding: 5%;
    183.       box-shadow: 0 10px 50px rgba(10, 200, 60, 0.25);
    184.     }
    185.     .box2 {
    186.       width: 33%;
    187.       background-color: #29bedb;
    188.       padding: 2px;
    189.       box-shadow: 0 1px 15px rgba(20, 50, 18, 0.2);
    190.       border-radius: 25px;
    191.       display: flex;
    192.       flex-direction: row;
    193.       -webkit-animation-name: "D1";
    194.       -webkit-animation-duration: 4s;
    195.       -webkit-animation-iteration-count: 1;
    196.     }
    197.  
    198.     @-webkit-keyframes 'D1' {
    199.       from {
    200.         width: 30%;
    201.       }
    202.       to {
    203.         width: 33%;
    204.       }
    205.     }
    206.     .box3 {
    207.       width: 65%;
    208.       background-color: #4da2f7;
    209.       padding: 2px;
    210.       box-shadow: 0 1px 15px rgba(50, 50, 58, 0.2);
    211.       border-radius: 25px;
    212.       display: flex;
    213.       flex-direction: row;
    214.       -webkit-animation-name: "D2";
    215.       -webkit-animation-duration: 4s;
    216.       -webkit-animation-iteration-count: 1;
    217.     }
    218.     @-webkit-keyframes 'D2' {
    219.       from {
    220.         width: 35%;
    221.       }
    222.       to {
    223.         width: 65%;
    224.       }
    225.     }
    226.     .box4 {
    227.       width: 85%;
    228.       background-color: #864df7fc;
    229.       padding: 2px;
    230.       box-shadow: 0 1px 15px rgba(20, 50, 18, 0.2);
    231.       border-radius: 25px;
    232.       display: flex;
    233.       flex-direction: row;
    234.       -webkit-animation-name: "D3";
    235.       -webkit-animation-duration: 4s;
    236.       -webkit-animation-iteration-count: 1;
    237.     }
    238.     @-webkit-keyframes 'D3' {
    239.       from {
    240.         width: 45%;
    241.       }
    242.       to {
    243.         width: 85%;
    244.       }
    245.     }
    246.     .box5 {
    247.       width: 55%;
    248.       background-color: #f74dbcfc;
    249.       padding: 2px;
    250.       box-shadow: 0 1px 15px rgba(20, 50, 18, 0.2);
    251.       border-radius: 25px;
    252.       display: flex;
    253.       flex-direction: row;
    254.       -webkit-animation-name: "D4";
    255.       -webkit-animation-duration: 4s;
    256.       -webkit-animation-iteration-count: 1;
    257.     }
    258.     @-webkit-keyframes 'D4' {
    259.       from {
    260.         width: 30%;
    261.       }
    262.       to {
    263.         width: 55%;
    264.       }
    265.     }
    266.     .box6 {
    267.       width: 40%;
    268.       background-color: #f7cf4dfc;
    269.       padding: 2px;
    270.       box-shadow: 0 1px 15px rgba(20, 50, 18, 0.2);
    271.       border-radius: 25px;
    272.       display: flex;
    273.       flex-direction: row;
    274.       -webkit-animation-name: "D5";
    275.       -webkit-animation-duration: 4s;
    276.       -webkit-animation-iteration-count: 1;
    277.     }
    278.     @-webkit-keyframes 'D5' {
    279.       from {
    280.         width: 30%;
    281.       }
    282.       to {
    283.         width: 40%;
    284.       }
    285.     }
    286.     .cut {
    287.       width: 100%;
    288.       height: 3px;
    289.       margin: 5px 0;
    290.       /* background: linear-gradient(to right,#F74D81FC, #4D57F7FC,#DDF74DFC,#53F74DFC); */
    291.       background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
    292.       border-radius: 50px;
    293.     }
    294.     .label {
    295.       margin: 8px 0;
    296.       font-size: 13px;
    297.       color: #424242c4;
    298.     }
    299.     .label1 {
    300.       font-size: 11px;
    301.       color: #2d5256c9;
    302.       font-weight: 500;
    303.     }
    304.     .name h1 {
    305.       margin: 0 5px;
    306.       font-size: 25px;
    307.       font-weight: 600;
    308.       color: #646464;
    309.       transition: all 0.5s;
    310.     }
    311.     .name h1:hover {
    312.       color: transparent;
    313.       background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
    314.       -webkit-background-clip: text;
    315.     }
    316.     .shu {
    317.       width: 55%;
    318.       font-size: 10px;
    319.       color: #000000b3;
    320.       background-color: #05262a30;
    321.       box-shadow: 0 1px 15px rgba(20, 50, 18, 0.2);
    322.       border-radius: 15px;
    323.       padding: 7px;
    324.       font-weight: bold;
    325.       -webkit-animation-name: "W1";
    326.       -webkit-animation-duration: 4s;
    327.       -webkit-animation-iteration-count: 1;
    328.     }
    329.     @-webkit-keyframes 'W1' {
    330.       from {
    331.         width: 50%;
    332.       }
    333.       to {
    334.         width: 55%;
    335.       }
    336.     }
    337. }
    338.  
    339. style>
    340. <body>
    341.      <div class="main">
    342.         
    343.         <div class="box">
    344.             <div class="info">
    345.         <div class="head" >
    346. 			
    347.                     <img class="pic"  src="https://www.yckc666.com/wp-content/uploads/2024/05/longnian.gif" alt="">
    348.                     
    349.  
    350.                 div>
    351.                       <div class="name">
    352.                     <h1> Tom 云川h1>
    353.                     
    354.                     <div class="cut">div>
    355.                 div>
    356.                 
    357.                 <div class="label" id="qianming">
    358.                   世人千万，再难遇我
    359.                 div>
    360.  
    361. 				<div class="jieshao">
    362. 					
    363. 					<img class="jie-img1" src="img1.png">
    364. 					 <h1>学生h1>
    365.  
    366.            <img class="jie-img1" src="zhao.png">
    367. 					 <h1>安卓h1>
    368.  
    369.            <img class="jie-img1" src="lianxi.png">
    370.            <h1>联系h1>
    371. 				div>
    372.  
    373.         <div class="jieshao">
    374.           <h3>应用:h3>
    375.           <a href="https://yckc666.com">
    376.           <div class="apps">
    377.             <img src="https://www.yckc666.com/wp-content/uploads/2024/05/favicon.png">
    378.             <h2>冰河h2>
    379.           div>a>
    380.           <a href="https://yckc666.com">
    381.           <div class="apps">
    382.             <img src="icon2.png">
    383.             <h2>源码h2>
    384.           div>a>
    385.         div>
    386.  
    387.             div>
    388.  
    389. 			
    390.             <div class="box1">
    391.               <div class="box2">
    392.                 <div class="shu">
    393.                   <center>
    394.                   java 30%
    395.                   center>
    396.                 div>
    397.               div>
    398.             div>
    399.  
    400.              <div class="box1">
    401.                    <div class="box3">
    402.                          <div class="shu">
    403.                   <center>
    404.                   HTML 30%
    405.                   center>
    406.                 div>
    407.  
    408.               div>
    409.             div>
    410.  
    411.              <div class="box1">
    412.                    <div class="box4">
    413.                          <div class="shu">
    414.                   <center>
    415.                   Android 60%
    416.                   center>
    417.                 div>
    418.  
    419.               div>
    420.             div>
    421.  
    422.              <div class="box1">
    423.                    <div class="box5">
    424.                          <div class="shu">
    425.                   <center>
    426.                   CSS 40%
    427.                   center>
    428.                 div>
    429.  
    430.               div>
    431.             div>
    432.  
    433.              <div class="box1">
    434.                    <div class="box6">
    435.                          <div class="shu">
    436.                   <center>
    437.                   C++ 35%
    438.                   center>
    439.                 div>
    440.  
    441.               div>
    442.             div>
    443. 			
    444.             <div class="label1">
    445.               <center style="margin-top: 15px;">
    446.            By.YunChuan @2024 源码
    447.               center>
    448.             div>
    449.  
    450.  
    451.  
    452.      div>
    453.         div>
    454.      div>
    455.   
    456.   <script src="main.js">
    457.   script>
    458. body>
    459. html>

    感兴趣可以一起交流哦～

  • 相关阅读:
    nginx配置实例-负载均衡
    面试时需要注意的事项
    【离散化 二维差分】391. 完美矩形
    正点原子嵌入式linux驱动开发——Linux WIFI驱动
    3 内存访问
    自学系列之小游戏---贪吃蛇（vue3+ts+vite+element-plus+sass)（module.scss + tsx）
    【学习笔记】go协程和通道
    全国中职网络安全B模块之国赛题远程代码执行渗透测试 PHPstudy的后门漏洞分析
    四、文件管理（一）文件系统基础
    快速排序超详细讲解C语言
  • 原文地址：https://blog.csdn.net/m0_59073956/article/details/139687599