CSS：空间转换常见案例

已于 2024-03-18 12:54:42 修改
阅读量890 收藏 11
点赞数 24
文章标签： css 前端 css3 空间转换
于 2024-03-15 19:07:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45427648/article/details/136747391
版权

空间-平移

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>空间平移</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* 电脑是平面，默认无法观察 Z 轴平移效果 */
      /* transform: translate3d(100px, 200px, 300px); */

      /* 3d 小括号里面必须逗号隔开三个数 */
      /* transform: translate3d(100px, 200px); */

      transform: translateX(100px);
      transform: translateY(-100%);
      transform: translateZ(300px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

视距

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    /* 视距属性必须添加给 直接父级 */
    .father {
      perspective: 1000px;
      /* perspective: 10000px;
      perspective: 100px; */
    }

    .son {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .son:hover{
      /* transform: translateZ(-300px); */
      transform: translateZ(300px);
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

空间旋转-Z轴

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-Z轴</title>
    <style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box img:hover {
        transform: rotateZ(360deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

空间旋转-X轴

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-X轴</title>
    <style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box {
        /* 透视效果：近大远小，近实远虚 */
        perspective: 1000px;
      }

      .box img:hover {
        transform: rotateX(60deg);
        transform: rotateX(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

空间旋转-Y轴

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间旋转-Y轴</title>
    <style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box {
        /* 透视效果：近大远小，近实远虚 */
        perspective: 1000px;
      }

      .box img:hover {
        transform: rotateY(60deg);
        transform: rotateY(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>

立体呈现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立体呈现</title>
    <style>
      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        /* background-color: pink; */
        transition: all 2s;

        transform-style: preserve-3d;

        /* 旋转与案例效果无关，用来看前后移动的效果 */
        /* transform: rotateY(89deg); */
      }

      .cube div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }

      .front {
        background-color: orange;
        transform: translateZ(100px);
      }

      .back {
        background-color: green;
        transform: translateZ(-100px);
      }

      .cube:hover {
        transform: rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>
  </body>
</html>

3D导航

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D导航</title>
    <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .nav {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }

      .nav ul {
        display: flex;
      }

      .nav li {
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;

        transform-style: preserve-3d;

        /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
        /* transform: rotateX(-20deg) rotateY(30deg); */
      }

      .nav li a {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
      }

      /* 立方体每个面都有独立的坐标轴，互不影响 */
      .nav li a:first-child {
        background-color: green;
        transform: translateZ(20px);
      }

      .nav li a:last-child {
        background-color: orange;
        transform: rotateX(90deg) translateZ(20px);
      }

      .nav li:hover {
        transform: rotateX(-90deg);
      }
    </style>
  </head>

  <body>
    <div class="nav">
      <ul>
        <li>
          <a href="#">首页</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">登录</a>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">注册</a>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>
  </body>
</html>

空间-缩放

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空间缩放</title>
    <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .nav {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }

      .nav li {
        position: relative;
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;
        transform-style: preserve-3d;

        /* transform: scaleX(0.5);
        transform: scaleY(2);
        transform: scaleZ(3); */

        transform: scale3d(0.5, 2, 3);
      }

      .nav li a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
      }

      .nav li a:first-child {
        background-color: green;
        transform: translateZ(20px);
      }

      .nav li a:last-child {
        background-color: orange;
        transform: rotateX(90deg) translateZ(20px);
      }

      .nav li:hover {
        transform: rotateX(-90deg);
      }
    </style>
  </head>

  <body>
    <div class="nav">
      <ul>
        <li>
          <a href="#">首页</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">登录</a>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">注册</a>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>
  </body>
</html>

动画-体验

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>体验动画</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;

        animation: change 1s infinite alternate;
      }

      @keyframes change {
        0% {
          transform: translate(0);
        }

        100% {
          transform: translate(600px);
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

动画实现步骤

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画实现步骤</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        animation: change 1s;
      }

      /* 动画一：宽度从200变化到800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }


      /* 动画二：从 200*100 变化到 300*300 变化到800*500 */
      /* 百分比：表示的意思是动画时长的百分比 */
      /* @keyframes change {
        0% {
            width: 200px;
            height: 100px;
        }
        20% {
            width: 300px;
            height: 300px;
        }
        100% {
            width: 800px;
            height: 500px;
        }
      } */

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

animation复合属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation复合属性</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        /* linear：匀速 */
        /* animation: change 1s linear; */

        /* steps：分步动画，工作中，配合精灵图实现精灵动画 */
        /* animation: change 1s steps(3); */

        /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
        /* animation: change 1s 2s; */

        /* 重复次数，infinite：无限循环 */
        /* animation: change 1s 3; */
        /* animation: change 1s infinite; */

        /* alternate：反向 */
        /* animation: change 1s infinite alternate; */

        /* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
        animation: change 1s forwards;
        /* animation: change 1s backwards; */
      }

      /* 宽度 从 200 变化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

animation拆分写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation拆分写法</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        /* 动画名称 */
        animation-name: change;
        /* 动画时长 */
        animation-duration: 1s;
        /* 播放次数 */
        animation-iteration-count: infinite;

        /* animation-play-state: paused; */
      }

      .box:hover {
        /* 暂停动画 */
        animation-play-state: paused;
      }


      /* 宽度从 200 变化到 800 */
      @keyframes change {
        0% {
            width: 200px;
        }
        100% {
            width: 800px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

走马灯

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>走马灯</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        display: flex;
        animation: move 6s infinite linear;
      }

      /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
      @keyframes move {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(-1400px);
        }
      }

      .box:hover ul {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!-- 替身：填补显示区域的露白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

精灵动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

多组动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多组动画</title>
  <style>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
        run 1s steps(12) infinite,
        move 3s forwards
      ;
    }

    /* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */
    @keyframes run {
      /* from {
        background-position: 0 0;
      } */
      to {
        background-position: -1680px 0;
      }
    }

    @keyframes move {
      /* 0% {
        transform: translate(0);
      } */
      100% {
        transform: translate(800px);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

全民出游季

在这里插入图片描述

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全民出游季</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 云 -->
  <div class="cloud">
    <img src="./images/yun1.png" alt="">
    <img src="./images/yun2.png" alt="">
    <img src="./images/yun3.png" alt="">
  </div>

  <!-- 文字 -->
  <div class="text">
    <img src="./images/font1.png" alt="">
  </div>
</body>
</html>
css
* {
  margin: 0;
  padding: 0;
}

/* 大背景 */
/* 默认状态HTML和body的高度是0，所以导致cover缩放背景图不成功 */
html {
  height: 100%;
}
body {
  height: 100%;
  background: url(../images/f1_1.jpg) no-repeat center 0 / cover;
  /* background-size: cover; */
}

/* 云 */
.cloud img {
  position: absolute;
  left: 50%;
}

.cloud img:nth-child(1) {
  margin-left: -250px;
  top: 20px;
  animation: cloud 1s infinite alternate linear;
}
.cloud img:nth-child(2) {
  margin-left: 400px;
  top: 100px;
  animation: cloud 1s infinite alternate linear 0.4s;
}
.cloud img:nth-child(3) {
  margin-left: -550px;
  top: 200px;
  animation: cloud 1s infinite alternate linear 0.6s;
}

@keyframes cloud {
  100% {
    transform: translate(20px);
  }
}

/* 文字 */
.text img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: text 1s;
}

/* 默认 → 小 → 大 → 小 → 默认 */
@keyframes text {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -50%) scale(0.1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.4);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
程序员无羡
关注
  • 24
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS之空间转换以及动画
c_perfectworld的博客
10-28 229
空间转换 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果 1、空间：是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 2、空间转换也叫3D转换 属性：transform 空间位移 目标：使用translate实现元素空间位移效果 语法： transform：translate3d(x,y,z); transform：translateX(值) transform：translateY(值) transform：transl
13、CSS空间转换
执手天涯@的博客
12-12 612
一、空间转换 解释： 实现元素在空间内的位移、旋转、缩放等效果。 空间： 是从坐标轴的角度定义，和数学中的三维空间一样，但是z轴的方向指向屏幕。 属性： transform 1、空间转换之位移 语法： transform: translate3d(X,Y,Z)； 取值： 正负值都可以、可以是像素也可以是百分比。 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
CSS——空间转换 和 动画
qq_48613863的博客
04-07 607
一、空间转换 空间：x、y、z三个坐标轴，z轴和用户的视线在一条直线上，z轴的正轴指向用户自己；空间转换也叫3D转换；（不是网页开发重点、因为目前设计师追求简洁风，空间转换用得少） 属性：transform 1、空间位移： transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值); 取值（正负均可）：像素单位数值；百分比。 只
CSS3 3D空间转换
m0_55960697的博客
03-07 210
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成一个立体空间，z轴与视线方向相同。 rotate3d(x,y,z,a)坐标 位移 1.空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 2.空间转换也叫3D转换 3.属性：transform 语法 transform: translate3d(x, y, z); transform: translat
前端基础知识学习总结--空间转换
m0_64371862的博客
07-11 1041
#博学谷IT学习技术支持#一、空间转换作用：使用transform属性可以实现元素在空间内的位移、旋转、缩放等效果空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换。属性：transform二、空间位移：使用translate实现元素空间位移效果三、透视：使用perspective属性实现透视效果...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS3、1000+案例.zip
05-12
5. **简单实用的点击切换选项卡代码**：选项卡式布局在网页设计中很常见，这个案例提供了一种使用CSS3实现的简单且高效的选项卡切换机制，通过伪类和transition，实现平滑的切换动画。 6. **CSS3动画下拉菜单 带...
001：CSS：层叠样式表
欢迎来到关关雎鸠儿的博客
10-14 673
学习笔记
CSS教程:最基本的条状图表
09-27
在这个案例中，我们将利用CSS的百分比宽度特性，来精确地表示数据的百分比。 首先，我们需要在HTML中创建一个结构，用于构建图表。这包括一个具有类名`graph`的`div`容器，以及在其中的`strong`标签。`strong`标签...
前端CSS
haizheguaishou的博客
07-23 681
CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 CSS代码语法 p（选择器）{color（属性）:blue（值）} 选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。 声明：在英文大...
css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例
qq_66318904的博客
03-24 1077
空间：是从坐标轴角度定义xyz三条坐标轴构成了一个立体空间按，z轴位置与视线方向相同。像素单位数值deg百分比（参照盒子自身尺寸计算结果）
CSS空间转换
weixin_51757999的博客
07-08 474
一、空间位移语法：transform: translate3d(x, y, z); transform: translateX(值);transform: translateY(值); transform: translateZ(值);取值：像素单位数值 百分比（以盒子自身尺寸为参照物）二、透视语法：perspective: 值;（添加给父级）取值：像素单位数值， 数值一般在800 px– 1200px（表示眼睛到屏幕的距离）作用 :空间转换时，为元素添加近大远小、近实远虚的视觉效果三、空间旋转语法 ： t
css空间转换
m0_62181310的博客
04-22 433
目录 空间转换 空间位移: 透视: 空间旋转 立体呈现: 缩放 使用位移、缩放、旋转等空间转换效果丰富网页呈现效果 空间转换 坐标轴:X、Y、Z ​ 属性:transform 空间位移: 语法: ⚫ transform: translate3d(x, y, z); ⚫ transform: translateX(值); ⚫ transform: translateY(值); ⚫ transform: translateZ(值); 取值（正负均可）: ⚫ 像素单位数值 ⚫
CSS 常用元素属性
最新发布
2301_79881188的博客
09-11 508
CSS 属性有很多, 可以参考文档。
html css jquery选项卡 代码练习小项目
Json的知识梦工厂
09-08 890
在学习 html 和 css jquery 结合使用的时候 做好是能尝试做一些简单的小功能，来提高自己的 逻辑能力，熟悉代码的编写语法。下面分享一段代码 使用html css jquery选项卡 代码练习。代码实现起来还是比较简单的 有兴趣的 兄弟们可以尝试练习以下。html 使用的是 div dl dd标签实现的。简单的写了一些 css 样式。
用CSS 方式设置 table 样式
weixin_45274678的博客
09-09 786
在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 689
讲解CSS中的一般布局以及浮动布局
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1733
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员无羡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值