移动web网页开发——2D转换

一条咸鱼o*v*o

已于 2022-03-29 14:11:54 修改

阅读量535

点赞数

文章标签： html

于 2022-03-29 14:11:03 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/123775679

版权

一、平面转换

1.1 平面转换概念

平面转换

改变盒子在平面内的形态（位移、旋转、缩放）
2D转换

平面转换属性

transform

1.2 位移

语法

transform:translate(水平移动距离，垂直移动距离 );

取值（正负均可）

像素单位数值
百分比（参照物为盒子自身尺寸）

注意：x轴正向为右，Y轴正向为下

技巧

translate()如果只给出一个值，表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

绝对定位的元素垂直居中（详见CSS定位）

案例——双开门布局

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            /* 设置大盒子溢出时隐藏 */
            overflow: hidden;
        }

        .box::before,
        .box::after {
            content: '';
            float: left;
            width: 50%;
            height: 600px;
            background: url('./images/fm.jpg');
            transition: all 1s;
        }

        .box::after {
            /* 只显示精灵图右侧的部分，因为图片是规则的，可以直接写right */
            background-position: right 0;
        }

        /* box hover的时候，它的伪元素 发生位移 */
        .box:hover::before {
            transform: translateX(-100%);
        }

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

<body>
    <div class="box">

    </div>
</body>

</html>

2.1旋转

语法

transform:rotate(角度);

注意：角度的单位是deg 旋转必须要有过渡属性

技巧：取值正负均可正数：顺时针负数：逆时针

2.1.1 转换原点（改的是转换的中心点，不只是旋转能用）

语法

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

取值

方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）

2.1.2 多重旋转

轮胎旋转着从左边到右边

多重旋转技巧

transform: translate() rotate();

3.1 缩放

思考：改变元素的width或height属性能实现吗？不能，这样是以左上角为中心进行缩放，希望以图片正中央为中心缩放

语法

transform: scale(x轴缩放倍数,y轴缩放倍数);
数字>1表示放大，<1表示缩小，=1表示不变

技巧

一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
- transform: scale(缩放倍数);

3.1.1 播放按钮

播放按钮

布局

::after

样式

居中

效果

缩放

   <!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>
        * {
            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 {
            content: '';
            /* 让播放按钮压在图片上面 */
            position: absolute;
            /* 让盒子在图片中间居中：先分别移动图片宽度和高度的50％，在向回移动盒子宽高的一半*/
            left: 50%;
            top: 50%;
            margin-left: -29px;
            margin-top: -29px;
            width: 58px;
            height: 58px;
            background: url('./images/play.png');
            transform: scale(5);
            transition: all .5s;
            /* 让一开始的播放按钮透明 */
            opacity: 0;
        }

        .box li:hover .pic::after {
            transform: scale(1);
            opacity: 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>

</html>

通过translate实现播放图标居中显示：注意层叠性

<style>
        .box .pic::after {
            content: '';
            /* 让播放按钮压在图片上面 */
            position: absolute;
            /* 让盒子在图片中间居中：先分别移动图片宽度和高度的50％，在向回移动盒子宽高的一半*/
            left: 50%;
            top: 50%;
            /* 使用transform实现播放按钮居中 */
            /* 不可以这样写 因为下面还有transform会覆盖 */
            /* transform: translate(-50%, -50%); */

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

            /* 通过复合属性来设置 但是伪元素里还有transform 还会覆盖 */
            transform: translate(-50%, -50%) scale(5);

            transition: all .5s;
            /* 让一开始的播放按钮透明 */
            opacity: 0;
        }

        .box li:hover .pic::after {
            /* 于是也给伪元素里的transform设置上复合属性 */
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    </style>

4.1 渐变背景

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

background-image: linear-gradient(
    颜色1,
    颜色2
)

<style>
        .box {
            width: 300px;
            height: 200px;
            background-image: linear-gradient(blue,
                    pink,
                    red,
                    green,
                    yellow);
        }
    </style>
<body>
    <div class="box"></div>
</body>

不会这样用，太丑了

案例-渐变

<!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>
    <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;
            top: 0;
            left: 0;
            /* display: none; */
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(transparent,
                    rgba(0, 0, 0, .6));
            transition: all .5s;
        }

        .box:hover .mask {
            /* display:block; */
            opacity: 1;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="../images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 设置渐变背景一般用一个盒子 类名一般是mask -->
        <div class="mask"></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>华为新闻</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <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 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right
                            "></i>
                        </p>
                    </div>
                    <!-- 渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right
                            "></i>
                        </p>
                    </div>
                    <!-- 渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right
                            "></i>
                        </p>
                    </div>
                    <!-- 渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

* {
    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;
    /* 因为给文本设置的padding会被网页重新渲染，所以只给transform设置 */
    transition: transform .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 li .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
    transition: all .5s;
}

.box li:hover .mask {
    opacity: 1;
}

/* ------------2、图片放大------ */
.box li img {
    transition: all .5s;
}

.box li:hover img {
    transform: scale(1.1);
}


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

一条咸鱼o*v*o

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动web网页开发——2D转换

一、平面转换1.1 平面转换概念平面转换改变盒子在平面内的形态（位移、旋转、缩放） 2D转换平面转换属性transform1.2 位移语法transform:translate(水平移动距离，垂直移动距离 );取值（正负均可）像素单位数值百分比（参照物为盒子自身尺寸）注意：x轴正向为右，Y轴正向为下技巧translate()如果只给出一个值，表示x轴方向移动距离单独设置某个方向的移动距离：translateX() & translateY..
复制链接

扫一扫