CSS特效实现双开门

被object制裁

已于 2022-11-18 08:47:34 修改

阅读量809

点赞数

文章标签：学习前端 html css

于 2022-07-12 18:05:42 首次发布

本文链接：https://blog.csdn.net/qq_53847322/article/details/125748000

版权

1.字体图标

字体图标展示的是图标，本质是字体

优点：灵活性，轻量级，兼容性，使用方便

推荐使用阿里矢量图标库：iconfont-阿里巴巴矢量图标库

如何使用图标：登录阿里巴巴矢量图标库→选择图标库→选择图标→加入购物车→购物车→添加至项目→下载至本地→打开文件夹→复制到需要使用图标的项目中→重命名文件夹为iconfont。如何正确引入使用图标可打开下载的文件中的demo_index.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>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      li {
        list-style: none;
      }
      .w {
        width: 600px;
        margin: 100px auto;
      }
      .icon-favorites-fill {
        font-size: 52px;
        color: red;
      }
      .icon-cart-Empty-fill {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box w">
      <i class="iconfont icon-favorites-fill"></i>
      <i class="iconfont icon-auto"></i>
      <i class="iconfont icon-favorites-fill"></i>
    </div>
    <div class="car w">
      <li>
        <span class="iconfont icon-cart-Empty-fill"></span>
        <span>购物车</span>
        <span class="iconfont icon-arrow-down"></span>
      </li>
    </div>
  </body>
</html>

效果图

2.平面转换

语法：transform:translate(水平移动距离,垂直移动距离);

典型案例：垂直居中

<!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>Document</title>
    <style>
      .father {
        position: relative;
        margin: 0 auto;
        width: 500px;
        height: 400px;
        background-color: pink;
      }
      .son {
        position: absolute;
        /*移动父盒子的距离*/
        left: 50%;
        top: 50%;
        /*移动盒子本身的距离*/
        transform: translate(-50%, -50%);
        width: 200px;
        height: 150px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></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>Document</title>
    <style>
      .box {
        /* 溢出隐藏 */
        overflow: hidden;
        margin: 0 auto;
        width: 1366px;
        height: 600px;
        background-image: url(./images/bg.jpg);
      }
      /* 左右盒子优化成伪元素 */
      .box::before,
      .box::after {
        content: "";
        float: left;
        width: 50%;
        height: 600px;
        background-image: url(./images/fm.jpg);
        /* 过渡属性 */
        transition: all 3s;
      }
      /* 精灵图 */
      .box::after {
        background-position: right 0;
      }
      /* 左边盒子向左移动自身宽度的百分之百 */
      .box:hover::before {
        transform: translatex(-100%);
      }
      /* 右边盒子向右移动自身宽度的百分之百 */
      .box:hover::after {
        transform: translatex(100%);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

旋转：transform: rotate(角度);

转换：transform-origin: 原点水平位置原点垂直位置; （默认是盒子中心位置）

多重转换：transform: translateX(800px) rotate(360deg);

缩放：transform: scale(x轴缩放倍数, y轴缩放倍数);

背景渐变： background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));

/* 基线渐变 */

/* background-image: linear-gradient(pink, aqua); */

/* 径线渐变 */

/* background-image: radial-gradient(pink, aqua); */

被object制裁

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS特效实现双开门

字体图标iconfont 位移transform:translate 旋转transform: rotate 缩放transform: scale 渐变background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));多重转换：transform: translateX(800px) rotate(360deg);
复制链接

扫一扫