CSS3 查缺补漏 ​

<style>
    .container {
        width: 500px;
    }

    .ball {
        float: left;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-image: radial-gradient(
                /* 75+30两条渐变半径都从盒子中心点向外镜像渐变 */
                75px 30px at center center,
                blue,
                skyblue);
    }

    button {
        float: left;
        display: block;
        margin: 10px 15px;
        border: 0;
        border-radius: 5px;
        width: 120px;
        height: 40px;
        background-color:olivedrab;
        color: white;
    }

    .btn_linear {
        background-image: linear-gradient(to right,
                rgba(255, 255, 255, 0.3),
                transparent);
    }

    .btn_radial {
        background-image: radial-gradient(70px at 10px 10px,
                rgba(255, 255, 255, 0.3),
                transparent);
    }
</style>

<div class="container">
    <div class="ball"></div>
    <button>普通按钮</button>
    <button class="btn_linear">线性高光</button>
    <button class="btn_radial">径向高光</button>
</div>

<style>
  .father {
      position: relative;
      width: 360px;
      height: 270px;
      background-color: pink;
  }

  .son {
      position: absolute;
      left: 50%;
      top: 50%;

      /* 通过边距计算 实现绝对定位元素居中
      margin-left: -100px;
      margin-top: -75px; */

      /*通过位移 快速实现绝对定位元素居中*/
      transform: translate(-50%, -50%);

      width: 120px;
      height: 90px;
      background-color: skyblue;
  }
</style>
<div class="father">
    <div class="son"></div>
</div>

<style>
    .container {
        margin: 0 auto;
        width: 688px;
        height: 302px;
        background-image: url(./images/bg.jpg);
        background-size: cover;
        overflow: hidden;
    }

    .container::before,
    .container::after {
        float: left;

        content: '';
        width: 50%;
        height: 100%;
        background-color: #ccc;
        background-image: url(./images/fm.jpg);
        background-size: cover;
        transition: all .5s;
    }

    .container::after {
        background-position: right 0;
    }

    .container:hover::before {
        transform: translate(-100%);
    }

    .container:hover::after {
        transform: translate(100%);
    }
</style>
<div class="container"></div>

<style>
    img {
        width: 200px;
        height: 200px;
        transition: all 1s;
    }
    img:hover{
        transform: rotate(360deg);
    }
</style>
<img src="./images/windmill.png">

<style>
    .container {
        width: 688px;
        height: 168px;
    }
    .container img{
        height: 168px;
        transition: all .6s;
    }
    .container:hover img{
        /* 旋转会改变网页元素的坐标轴向，先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果，所以一般会将旋转放在最后 */
        transform: translate(520px) rotate(354.7deg);
    }
</style>
<div class="container">
    <img src="./images/tyre.png">
</div>

<style>
    li {
        list-style: none;
        width: 300px;
    }

    .picture {
        position: relative;
        overflow: hidden;
    }

    .picture img {
        display: block;
        width: 300px;
    }

    .picture::after {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(5);
        transition: all .3s;

        content: '';
        width: 58px;
        height: 58px;
        background-image: url(./images/play.png);
        opacity: 0;
    }

    .game:hover .picture::after {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
</style>
<ul>
    <li class="game">
        <div class="picture"><img src="./images/party.jpg"></div>
        <h3>【和平精英】“初火”音乐概念片：四圣觉醒......</h3>
    </li>
</ul>

<style>
    .pic {
        position: relative;
        overflow: hidden;
        width: 360px;
        background-color: blue;
    }

    .pic img {
        display: block;
        width: 100%;
        height: 528px;
    }

    .pic::after {
        position: absolute;
        left: 50%;
        top: 50%;
        content: '';
        width: 300px;
        height: 528px;
        background-image: linear-gradient(white,transparent);
        opacity: 0.5;

        transform: translate(-60%,-50%) skew(-25deg);
    }
</style>

<div>
    <div class="pic"><img src="./images/gem.jpg" alt="gem"></div>
</div>

<style>
    li {
        position: relative;
        float: left;

        margin-right: 7px;
        list-style: none;
    }

    li:last-child {
        margin-right: 0;
    }

    li a {
        color: white;
    }

    .picture {
        height: 158px;
        overflow: hidden;
    }

    .picture img {
        width: 224px;
    }

    .picture::after {
        position: absolute;
        left: 0;
        top: 0;

        content: '';
        width: 224px;
        height: 158px;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
        opacity: 0;
    }

    .desc {
        position: absolute;
        bottom: -42px;
        padding: 18px;
    }

    .desc h4 {
        font-size: 12px;
    }

    .desc p {
        font-size: 10px;
        margin-top: 18px;
    }

    .desc,
    .picture img,
    .picture::after {
        transition: all .3s;
    }

    li:hover .desc {
        transform: translateY(-37px);
    }

    li:hover .picture img {
        transform: scale(1.2);
    }

    li:hover .picture::after {
        opacity: 1;
    }
</style>
<ul>
    <li>
        <a href="#">
            <div class="picture"><img src="./images/huawei1.jpeg"></div>
            <div class="desc">
                <h4>产品</h4>
                <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                <p>了解更多 &gt;</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="picture"><img src="./images/huawei2.jpeg"></div>
            <div class="desc">
                <h4>行业洞察</h4>
                <h5>迈向智能世界2030</h5>
                <p>了解更多 &gt;</p>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <div class="picture"><img src="./images/huawei3.jpeg"></div>
            <div class="desc">
                <h4>《ICT新视界》刊首语</h4>
                <h5>笃行致远，共建幸福智慧城市</h5>
                <p>了解更多 &gt;</p>
            </div>
        </a>
    </li>
</ul>

<style>
    body{
        perspective: 1000px;
    }
    div {
        margin: 50px auto;
        width: 100px;
        height: 100px;
        background-color: skyblue;
        transition: all .5s;
    }
    div:hover{
        /* transform: translateZ(150px); */
        transform:translate3d(25px,50px,75px);
    }
</style>
<body>
    <div></div>
</body>

<style>
  div {
      transform-style: preserve-3d;
  }

  img {
      margin-top: 50px;
      margin-right: 20px;
      width: 200px;
      transition: all .5s;
  }

  div:hover .x {
      transform: rotateX(60deg);
  }

  div:hover .y {
      transform: rotateY(60deg);
  }

  div:hover .z {
      transform: rotateZ(60deg);
  }
</style>
<div>
  <img class="x" src="./images/hero.jpeg">
  <img class="y" src="./images/hero.jpeg">
  <img class="z" src="./images/hero.jpeg">
</div>

<style>
    .cube {
        position: relative;
        transform: rotateX(-20deg) rotateY(30deg);
        transform-style: preserve-3d;
        margin: 60px;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        transition: all 3s;
    }

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

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

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

    .left {
        transform: translateX(-100px) rotateY(-90deg);
        background-color: orange;
    }

    .right {
        transform: translateX(100px) rotateY(-90deg);
        background-color: yellow;
    }

    .top {
        transform: translateY(-100px) rotateX(90deg);
        background-color: skyblue;
    }

    .bottom {
        transform: translateY(100px) rotateX(90deg);
        background-color: blue;
    }

    body:hover .cube {
        transform: rotateX(-30deg) rotateY(225deg);
    }
</style>
<div class="cube">
    <div class="front">前</div>
    <div class="back">后</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="top">上</div>
    <div class="bottom">下</div>
</div>

<style>
    ul {
        margin-top: 10px;
        width: 300px;
        height: 40px;
        list-style: none;
    }

    li {
        position: relative;
        float: left;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;

        transition: all .5s;
        transform-style: preserve-3d;
        /* 临时旋转，方便在编码过程中3D视角看到效果 */
        /* transform: rotateX(-20deg) rotateY(30deg); */
    }

    li a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: white;
    }

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

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

    li:hover {
        transform: rotateX(-90deg);
    }
</style>
<ul>
    <li>
        <a href="#">首页</a>
        <a href="#">Index</a>
    </li>
    <li>
        <a href="#">登录</a>
        <a href="#">SignIn</a>
    </li>
    <li>
        <a href="#">注册</a>
        <a href="#">SignUp</a>
    </li>
</ul>

<style>
    @keyframes run{
        to{
            background-position: -1680px 0px;
        }
    }
    @keyframes move{
        to{
            transform: translateX(560px);
        }
    }
    div{
        width: 140px;
        height: 140px;
        background-image: url(./images/bg.png);

        animation: 
            run 1s steps(12) infinite,
            move 3s linear forwards;
    }
</style>
<div></div>

<style>
    .clock {
        position: relative;
        border: 5px solid black;
        border-radius: 50%;
        width: 200px;
        height: 200px;
    }

    .clock div {
        position: absolute;
        left: 50%;
        top: 50%;
    }

    .line {
        width: 100%;
        height: 3px;
        background-color: #ccc;
        transform: translate(-50%, -50%);
    }

    .line:nth-child(2) {
        transform: translate(-50%, -50%) rotate(30deg);
    }

    .line:nth-child(3) {
        transform: translate(-50%, -50%) rotate(60deg);
    }

    .line:nth-child(4) {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .line:nth-child(5) {
        transform: translate(-50%, -50%) rotate(120deg);
    }

    .line:nth-child(6) {
        transform: translate(-50%, -50%) rotate(150deg);
    }

    .mask {
        transform: translate(-50%, -50%);

        width: 140px;
        height: 140px;
        border-radius: 50%;
        background-color: white;

    }

    .hour,
    .minute,
    .second {
        transform-origin: left center;
    }

    .hour {
        width: 40px;
        height: 6px;
        background-color: #000;
        transform: translateY(-50%) rotate(-45deg);
    }

    .minute {
        width: 50px;
        height: 6px;
        background-color: #000;
        transform: translateY(-50%);
    }

    .second {
        width: 60px;
        height: 2px;
        background-color: red;
        transform: translateY(-50%);
        animation: clock 60s steps(60) infinite;
    }

    .screw {
        border-radius: 50%;
        transform: translate(-50%, -50%);

        width: 12px;
        height: 12px;
        background-color: black;
    }

    @keyframes clock{
        to{
            transform: translateY(-50%) rotate(360deg);
        }
    }
</style>
    <!-- 表盘 -->
<div class="clock">
    <!-- 刻度线 -->
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>

    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 表针 -->
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>

    <!-- 螺丝 -->
    <div class="screw"></div>
</div>

<style>
    .container {
        border: 5px solid skyblue;
        width: 600px;
        height: 112.5px;
        overflow: hidden;
    }

    .container:hover ul {
        animation-play-state: paused;
    }

    ul {
        list-style: none;
        width: 2000px;
        animation: marquee 5s infinite linear;
    }

    .container li {
        float: left;
    }

    .container img {
        width: 200px;
    }

    @keyframes marquee {
        to {
            transform: translate(-1400px);
        }
    }
</style>

<div class="container">
    <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>

        <!-- 第567移动的时候,显示区域不能留白 -->
        <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>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body,
    .container {
        height: 100%;
    }

    .container {
        position: relative;
        background: url(./images/bg.jpg) no-repeat center 0/cover;
    }

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

    .cloud img:first-child {
        top: 40px;
        margin-left: -260px;

        animation: cloud 1s infinite alternate linear;
    }

    .cloud img:nth-child(2) {
        top: 100px;
        margin-left: 380px;
        animation: cloud 1s .3s infinite alternate linear;
    }

    .cloud img:last-child {
        top: 160px;
        margin-left: -560px;
        animation: cloud 1s .6s infinite alternate linear;
    }

    .balloon {
        position: absolute;
        left: 50%;
        top: 20%;
        margin-left: -500px;
        animation: balloon 1s alternate infinite linear;
    }

    .giraffe {
        position: absolute;
        left: 50%;
        margin-left: 200px;
        top: 20%;
    }

    .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: text 1s forwards;
    }

    .landmark img {
        position: absolute;
        left: 50%;
        bottom: 70px;
        width: 100px;
    }

    .landmark img:nth-child(1) {
        margin-left: -450px;
        animation: landmark 0.8s infinite alternate;
    }

    .landmark img:nth-child(2) {
        margin-left: -200px;
        animation: landmark 0.8s 0.2s infinite alternate;
    }

    .landmark img:nth-child(3) {
        margin-left: 45px;
        animation: landmark 0.8s 0.4s infinite alternate;
    }

    .landmark img:nth-child(4) {
        margin-left: 280px;
        animation: landmark 0.8s 0.6s infinite alternate;
    }


    @keyframes cloud {
        to {
            transform: translate(50px);
        }
    }

    @keyframes balloon {
        to {
            transform: translateY(40px);
        }
    }

    @keyframes text {
        20% {
            transform: translate(-50%, -50%) scale(0);
        }

        40% {
            transform: translate(-50%, -50%) scale(1.4);
        }

        70% {
            transform: translate(-50%, -50%) scale(0.8);
        }

        100% {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes landmark {
        to {
            transform: translateY(-30px);
        }
    }
</style>
<div class="container">
    <!-- 白云 -->
    <div class="cloud">
        <img src="images/yun1.png" />
        <img src="images/yun2.png" />
        <img src="images/yun3.png" />
    </div>

    <!-- 热气球 -->
    <div class="balloon">
        <img src="images/san.png" />
    </div>

    <!-- 长颈鹿 -->
    <div class="giraffe">
        <img src="images/lu.png" />
    </div>

    <!-- 文字 -->
    <div class="text">
        <img src="images/font1.png" />
    </div>

    <!-- 跳动文字 -->
    <div class="landmark">
        <img src="images/1.png" />
        <img src="images/2.png" />
        <img src="images/3.png" />
        <img src="images/4.png" />
    </div>
</div>