移动web第一天之案例

最新推荐文章于 2024-04-18 01:30:33 发布

步步生花@苏殿主

最新推荐文章于 2024-04-18 01:30:33 发布

阅读量161

点赞数

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

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

版权

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

10 篇文章 0 订阅

订阅专栏

本文通过四个示例详细介绍了如何使用HTML和CSS实现网页动态效果，包括购物车字体图标、双开门位移效果、图片缩放以及位移+缩放+渐变的综合效果。每个案例都提供了完整代码，并强调动态效果需运行查看。这些技巧在前端开发中常用于提升用户体验。

摘要由CSDN通过智能技术生成

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

一、购物车【字体图标】

在这里插入图片描述

<!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>
  <meta name="description" content="网页描述">
  <meta name="keywords" content="网页关键字">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入字体图标样式表 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    a {
      color: #333;
      text-decoration: none;
    }

    .nav {
      width: 200px;
      margin: 50px auto;
      font-size: 18px;
    }

    .orange {
      color: orange;
    }
  </style>
</head>

<body>
  <div class="nav">
    <ul>
      <li>
        <span class="iconfont icon-cart-Empty-fill orange"></span>
        <span>购物车</span>
        <span class="iconfont icon-arrow-down"></span>
      </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">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box{
      width: 1366px;
      height: 600px;
      margin: 20px auto;
      background-image: url(./images/bg.jpg);
      /* 超出盒子部分隐藏 */
      overflow: hidden;
    }
    .left,
    .right{
      float: left;
      width: 683px;
      height: 600px;
      background-image: url(./images/fm.jpg);
      /* 过渡 */
      transition: all 2s;
    }
    .right{
      background-position: right 0;
    }
    .box:hover .left{
      transform: translateX(-100%);
    }
    .box:hover .right{
      transform: translateX(100%);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left"></div>
    <div class="right"></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">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 1066px;
      height: 664px;
      margin: 20px auto;
      background-image: url(./images/bg.jpg);
      text-align: center;
    }

    img {
      width: 660px;
      opacity: 0;
      /* 过渡 */
      transition: all 1s;
    }

    .box:hover img {
      transform: scale(0.2);
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/play.png" 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">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      margin: 20px;
      width: 300px;
      height: 187px;
      overflow: hidden;
    }
    .box img{
      width: 300px;
      transition: all .5s;
    }
    .box .title{
      position: absolute;
      left: 15px;
      bottom: -25px;
      z-index: 2;
      width: 260px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      transition: transform .7s;
    }
    .box .title p{
      margin-top: 20px;
    }
    .box .mask{
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      width: 300px;
      height: 187px;
      background-image: linear-gradient(transparent,rgba(0,0,0,.6));
    } 
    .box:hover img{
      transform: scale(1.3);
    }
    .box:hover .title{
      transform: translate(0,-50%) ;
    }
    .box:hover .mask{
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./images/9.jpeg" alt="">
    <div class="title">常见后即可免费与<p>了解更多</p></div>
    <div class="mask"></div>
  </div>
</body>

</html>