移动web第二天之案例

最新推荐文章于 2024-10-10 20:59:20 发布

步步生花@苏殿主

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量140

点赞数

分类专栏：移动web学习文章标签：前端 css3 学习

本文链接：https://blog.csdn.net/sjp991012/article/details/124100703

版权

移动web学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用《移动web第二天》文章里的内容完成各案例

文章目录

一、3D导航
二、多组动画
三、走马灯

一、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;
    }

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

    .navs li {
      position: relative;
      /* 立体呈现 */
      transform-style: preserve-3d;
      /* 旋转后方便观察，效果实现后去掉 */
      /* transform: rotateX(-20deg) rotateY(30deg); */
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      transition: all .5s;
    }

    .navs li a {
      /* 进行定位将两个a标签放置同一位置 */
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      text-decoration: none;
      color: #fff;
    }

    .navs li a:first-child {
      background-color: green;
      /* 两个a标签的坐标轴互不影响 */
      transform: translateZ(20px);
    }

    .navs li a:last-child {
      background-color: orange;
      /* 旋转会改变坐标轴的方向 */
      transform: rotateX(90deg) translateZ(-20px);
    }
    /* 立方体旋转 */
    .navs li:hover{
      transform: rotateX(-90deg) ;
    }
  </style>
</head>

<body>
  <div class="navs">
    <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>
    .box{
      width: 140px;
      height: 140px;
      /* 背景为精灵图 */
      background-image: url(./images/bg.png);
      /* 使用动画 */
      animation: 
        change 1s steps(12) infinite,
        move 3s forwards linear;
    }
    /* 鼠标悬停时暂停 */
    .box:hover{
      animation-play-state: paused;
    }
    /* 定义动画 */
    @keyframes change {
      from{
        background-position: 0 0;
      }
      to{
        background-position: -1680px 0;
      }
    }
    @keyframes move {
      /* 动画的开始状态与盒子的默认样式相同时，可省略开始状态样式 */
      /* from{
        transform: translateX(0);
      } */
      to{
        transform: translateX(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>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      
      li {
        list-style: none;
      }

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

      .box ul{
        width: 2000px;
        animation: move 3s infinite linear;
      }

      .box li{
        float: left;
      }
      @keyframes move {
        to{
          transform: translateX(-1400px);
        }
      }   
    </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>