前端进阶html5+css3+移动端

qq964705948

已于 2022-04-18 07:47:56 修改

阅读量1k

点赞数

文章标签： html css

于 2022-03-31 23:07:36 首次发布

本文链接：https://blog.csdn.net/qq_37025110/article/details/123886279

版权

前端进阶html5+css3+移动端

阿里矢量图Font class使用方法

    <link rel="stylesheet" href="./iconfont.css">
    <link rel="stylesheet" href="./base.css">
    <style>
        a {
            color: #333;
            text-decoration: none;
        }
        
        .nav {
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }
        
        .orange {
            color: orange;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">
            <!-- 必须加入iconfont -->
            <span class="iconfont icon-cart-Empty-fill orange"></span>
            <span>购物车</span>
            <span class="iconfont icon-arrow-down"></span>
        </a>
    </div>
</body>

位移-基本使用

    <style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

绝对定位元素居中

    <style>
        .father {
       	    /* 相对定位 */
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
      	    /* 绝对定位	 */
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 100px;
            background-color: pink;
            /*参考自己的位置来平移*/
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

双开门案例

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url(./images/bg.jpg);
            /* 溢出隐藏 */
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
        	/* 行内加宽加高不生效 因为2张照片要水平居中 */
            /* overflow: hidden; */
            float: left;
            content: '';
            /* 图片宽度的百分之50 */
            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>
</head>

<body>
    <div class="box">

    </div>
</body>

平面转换

1.旋转

    <style>
        img {
            width: 250px;
            /* 过渡 */
            transition: all 2s;
        }
        
        img:hover {
            旋转 也可以是负数
            transform: rotate(360deg);
        }
    </style>

2.转换原点

    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>

3.多重转换

	<style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 5s;
        }
        
        .box:hover img {
            /* 边走边转 
            旋转可以改变轴的方向 要按照顺序 
            复合属性会有层叠性 无法实现双重效果*/
            transform: translate(600px) rotate(360deg)
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre.png" alt="">
    </div>
</body>

缩放

    <style>
        .box {
            margin: 0 auto;
            width: 300px;
            height: 210px;
            background-color: pink;
        }
        
        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* 从中间缩放 */
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpg" alt="">
    </div>
</body>

案例缩放

    <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%); */
            /* 不生效 和 transform: scale(5); 重叠 需要用符合属性写法  */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            /* 图片放大5倍 */
            transform: scale(5);
            /* 图片隐藏 */
            opacity: 0;
            /* 过渡 */
            transition: all .5s;
        }
        
        .box li:hover .pic::after {
            /* 图片取消隐藏 */
            opacity: 1;
            transform: translate(-50% -50%) scale(1);
        }
    </style>
</head>

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

渐变颜色

    <style>
        .box1 {
            width: 300px;
            height: 200px;
            /* 设置渐变的方向 */
            background-image: linear-gradient(to right, pink, green, hotpink);
        }
        
        .box2 {
            width: 300px;
            height: 200px;
            /* 透明渐变 */
            background-image: linear-gradient( transparent, rgba(0, 0, 0, .6));
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

产品展示

<style>
        .box {
            /* 相对定位 */
            position: relative;
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            /* 层叠效果 */
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }
        
        .box .mask {
            position: absolute;
            left: 0;
            top: 0;
            /* 透明看不见 */
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient( transparent, rgba(0, 0, 0, .6));
        }
        
        .box:hover .mask {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 渐变背景 -->
        <div class="mask"></div>
    </div>
</body>

太极图

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: pink;
        }
        
        .box {
            /* 过渡 */
            transition: all .5s;
            position: relative;
            /* 画个圆 */
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: black;
            /* 水平居中 */
            margin: auto;
            /* 半黑半白 */
            background-image: linear-gradient(to right, black 50%, white 50%);
        }
        
        .box::before,
        .box::after {
            content: "";
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* 水平居中 */
            left: 50%;
            transform: translate(-50%);
        }
        
        .box::before {
            border: 75px solid #000;
            background-color: #fff;
            top: 0;
            /* left: 0; */
        }
        
        .box::after {
            border: 75px solid #fff;
            background-color: #000;
            bottom: 0;
            /* left: 0; */
        }
        
        .box:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="box"> </div>
</body>

鼠标经过改变背景

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 107px;
            height: 35px;
            border: 2px solid #ccc;
            border-radius: 50px;
            text-align: center;
            line-height: 35px;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        
        span {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #ccc;
            /* 过渡 */
            transition: all .5s;
            
        }
        
        div:hover span {
            /* 隐藏位置向上100 */
            transform: translate(0, -100%);
        }
    </style>
</head>

<body>
    <div>
        <a href="#">探索</a>
        <span></span>
    </div>

华为hover效果

    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>oceanstor Pacific 海量存储斩获2021</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    vertical-align: middle;
}

.box {
    width: 1110px;
    height: 247px;
    margin: 20px auto;
    /* background-color: pink; */
}

.box li {
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    margin-right: 30px;
    overflow: hidden;
}

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

.box .txt {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 350px;
    height: auto;
    padding: 20px 30px;
    z-index: 1;
    color: #fff;
    transition: transform .5s;
    /* transition: all .5s; */
}

.box .txt h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #fff;
}

.box .txt h5 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.5em;
    color: #fff;
}

.box .txt p {
    color: #fff;
    font-size: 14px;
}

.box .txt p .iconfont {
    color: #c7000b;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
}

/* 1. 渐变背景的盒子 */
.box .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
    transition: all .5s;
}

/* 2. hover效果 */
/* 2.1 图片缩放 */
.box li .pic img {
    transition: all .5s;
}
.box li:hover .pic img {
    transform: scale(1.2);
}


/* 2.2 渐变背景显示 */
.box li:hover .mask {
    opacity: 1;
}

/* 2.3 文字向上移动 */
.box li:hover .txt {
    transform: translateY(-50px);
}

空间位移

  <style>
    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover {
      /* transform: translate3d(50px, 100px, 200px); */
      transform: translateX(100px);
      transform: translateY(100px);
      transform: translateZ(100px);
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

透视效果

  <style>
    body {
      /*800到1200*/
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

空间旋转-ZXY轴

    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }
        
        img {
            width: 300px;
            transition: all 2s;
        }
        .box {
            /* 透视效果：近大远小，近实远虚
            添加视距 */
            perspective: 1000px;
        }
        
        
        .box img:hover {
            /* z轴 x轴 y轴 */
            transform: rotateZ(360deg);
            transform: rotateX(60deg);
            transform: rotateY(60deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>

立体呈现

    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

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

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>

3D导航

    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li 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;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .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>

animation复合属性

    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* animation: change 1s linear; */

            /* 分步动画 */

            /* 3: 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */

            /* 无限循环 */
            /* animation: change 1s infinite alternate; */

            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */

            /* 动画停留在结束状态 */
            animation: change 1s forwards;
        }

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

animation拆分写法

    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation-name: change;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            
        }

        .box:hover {
           /* 鼠标移入的时候暂停动画 */
           animation-play-state: paused;
        }


        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

动画的实现步骤

       <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation: change 1s;
        }
        /* 定于动画 从200变成600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        
        /* 定义动画：200到 500*300 到800*500 */
        
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

animation：动画属性

animation：复合属性动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕的状态
animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;

注意:
动画名称和动画时长必须赋值取值不分先后顺序
值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

使用animation相关属性控制动画执行过程 在这里插入图片描述

精灵动画

    <style>
        .box {
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(./images/bg.png);
            /* 精灵小图的个数 无限循环 */
            animation: move 1s steps(12) infinite, 
            /* 跑过去要3秒 停留此处 */
            run 3s forwards;
        }
        
        @keyframes move {
            from {
                /* 指定元素背景图片的位置 */
                background-position: 0 0;
            }
            to {
                /* 精灵图的宽度 */
                background-position: -1680px 0;
            }
        }
        /* 定义跑过去的盒子的大小 */
        @keyframes run {
        /* 动画开始的状态和盒子的默认样式相同，可以省略 */
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(800px);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

走马灯

    <style>
        * {
            margin: 0;
            padding: 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 2s infinite;
        }
        
        .box li {
            float: left;
        }
        
        @keyframes move {
            to {
                transform: translateX(-1400px);
            }
        }
        
        .box:hover ul {
            /* 用户鼠标移入box，动画暂停 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="./images/images/1.jpg" alt=""></li>
            <li><img src="./images/images/2.jpg" alt=""></li>
            <li><img src="./images/images/3.jpg" alt=""></li>
            <li><img src="./images/images/4.jpg" alt=""></li>
            <li><img src="./images/images/5.jpg" alt=""></li>
            <li><img src="./images/images/6.jpg" alt=""></li>
            <li><img src="./images/images/7.jpg" alt=""></li>
            <li><img src="./images/images/1.jpg" alt=""></li>
            <li><img src="./images/images/2.jpg" alt=""></li>
            <li><img src="./images/images/3.jpg" alt=""></li>
        </ul>

    </div>

</body>

主轴对齐方式

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

        .box {
            display: flex;

            /* 居中 */
            justify-content: center;

            /* 间距在弹性盒子(子级)之间 两端排列*/
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-evenly;

            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;
            
            height: 200px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

侧轴对齐方式

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

        .box {
            display: flex;

            /* 居中 */
            /* align-items: center; */

            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
            /* align-items: stretch; */

            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }
        
        .box div {
            /* width: 100px; */
            /* height: 100px; */
            background-color: pink;
        }

        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;
        }
        
    </style>
</head>

<body>
    <div class="box">
        <div>1111</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

伸缩比

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

        .box {
            display: flex;

            height: 300px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }

        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 3;
        }

        .box div:nth-child(3) {
            flex: 1;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

less

在这里插入图片描述

less 嵌套

在这里插入图片描述

less 变量

在这里插入图片描述

less导入

在这里插入图片描述

less导出

在这里插入图片描述

less 禁止导出
在这里插入图片描述

qq964705948

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端进阶html5+css3+移动端

web前端进阶教程阿里案例图使用方法 <link rel="stylesheet" href="./iconfont.css"> <link rel="stylesheet" href="./base.css"> <style> a { color: #333; text-decoration: none; } .nav {
复制链接

扫一扫