3.2-day12 移动web第一天(2D平移旋转缩放渐变)

我在某马学前端

已于 2023-03-06 21:11:53 修改

阅读量62

点赞数

文章标签： html 前端 css Powered by 金山文档

于 2023-03-03 23:47:11 首次发布

本文链接：https://blog.csdn.net/weixin_45190461/article/details/129328214

版权

1.移动web学习路线图

2.今日知识点

iconfont

注解:incofont 我的项目路径(网页设计太烂,我的项目路径不好找)

1.使用Unicode

必须掌握的两种使用方式:
第一种:Unicode

第二步：定义使用iconfont的样式
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用iconfont的样式
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">&#x33;</i>

注意此处也可使用伪元素:伪元素更加简单(推荐使用)
<div></div>
1.首先引入@font-face
2.编写伪元素
div:after {
content:"\e602"  此处注意格式
font-family:"iconfont"  必须引入字体格式
}

2.使用font-class

第一步：拷贝项目下面生成的fontclass代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-xxx"></i>

3.上传字体图标

上传为svg格式的字体图标

平面位移:translate

平面的各种效果是要和transition配合使用的,才能看出来效果

style中的代码:
  <style>
    .f {
      width: 600px;
      height: 600px;
      border:1px dotted #000000;
    }
    .s {
      width: 100px;
      height: 50px;
      background-color: pink;
      transition:all 1s linear 0.35s;
    }
    .f:hover .s {
      width: 100%;
      transform: translate(100px,100px);
    }
</style>

body:
<body>
  <div class="f">
    <div class="s"></div>
  </div>

平面旋转:rotate

旋转的参数还有一个transform-origin:旋转中心

旋转度数的单位为deg

此处注意:旋转的话,物体的x轴指向会随之变化的

<style>
      img {
          width: 100px;
          transition: all 2s;
          transform-origin:bottom center;
      }
        img:hover {
            transform:rotate(360deg);
        }
  </style>

<body>
    <img src="./images/rotate.png" alt="">
</body>

4.缩放:scale

5.渐变:

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: #fff;
      background-image: linear-gradient(#fff,pink,black);
    }
  </style>

注意:
透明度使用方法:
background-image: linear-gradient(transparent,rgba(0,0,0,.3));

3.今日随堂练习

位移:汽车开门

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
        }

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

        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
            transform: translate(-100%);
        }

        .box:hover::after {
            transform: translateX(100%);
        }
    </style>

<body>
    <div class="box">

    </div>
</body>

缩放:和平精英案

隐藏元素:opacity 设置元素的透明度:1为显示:

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

        li {
            list-style: none;
        }

        img {
            width: 100%;
        }

        .box {
            width: 249px;
            height: 210px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        .box p {
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }

        .box .pic {
            position: relative;
        }

        .box .pic::after {
            /* 播放按钮压在图片上面 - 居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            /* transform: translate(-50%, -50%); */

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

            /* 大图 */
            transform: translate(-50%, -50%) scale(5);

            /* 透明,看不见 */
            opacity: 0;
            transition: all .5s;
        }

        /* lihover的时候,  谁变小pic::after */
        .box li:hover .pic::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>

<div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt=""></div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>

综合案例:华为官网

鼠标移入:背景图片放大,文字上移,渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华为官网</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3923027_mx80dk96ef.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
    }
    a {
      text-decoration: none;
    }
    ul li {
      position: relative;
      overflow: hidden;
      width: 788px;
      height: 549px;
    }
    .pic img{
      width: 788px;
      transition: all 0.5s;
    }
    .text {
     position: absolute;
      top: 0;
      left:0;
      margin-top: 400px;
      color: white;
      line-height: 40px;
      padding: 40px;
      transition: all 1s;
    }
    .more {
      margin-top: 50px;
    }

    ul li:hover .text{
      transform: translateY(-80px);
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(transparent,rgba(0,0,0,0.3));
      opacity: 0;
    }
    ul li:hover .mask {
      opacity: 1;
    }
    ul li:hover .pic img {
      transform: scale(1.2);
    }

  </style>
</head>
<body>
<div>
  <ul>
    <li>
      <a href="">
        <div class="pic">
          <img src="img.png" alt="">
        </div>

        <div class="text">
          <h3>产品</h3>
          <h1>HUAWEI WATCH GT 3 Pro</h1>
          <div class="more">
            <span>了解更多</span>
            <i class="iconfont icon-arrow-right"></i>
          </div>
        </div>
        <div class="mask"></div>
      </a>
    </li>
  </ul>
</div>
</body>
</html>