（前端开发）移动Web开发Day01

最新推荐文章于 2024-07-12 16:55:56 发布

A宝呀

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量60

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_73254888/article/details/130513249

版权

移动转换

平移

transform: translate(X轴移动距离, Y轴移动距离);

取值

像素单位数值

百分比（参照盒子自身尺寸计算结果）

正负均可

技巧

translate() 只写一个值，表示沿着 X 轴移动

单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

定位居中

案例：双开门

<!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>
</head>
<style>
    .window {
        display: flex;
        margin: 100px auto;
        width: 1366px;
        height: 600px;
        background-image: url(./bg.jpg);
        overflow: auto;
    }
    .window .left,
    .window .right {
        width: 50%;
        height: 600px;
        background-image: url(./fm.jpg);
        transition: all 1s;
    }
    .window .right {
        background-position: right 0;
    }
    .window:hover .left {
        transform: translate(-100%);
    }
    .window:hover .right {
        transform: translate(100%);
    }
</style>
<body>
    <div class="window">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

旋转

.father:hover img {
        transform: rotate(360deg);
        transform-origin: center center;
        transition: all 2s;
    }

多重转换

transform: translate() rotate();

···多重转换原理：以第一种转换方式坐标轴为准转换形态

1、旋转会改变网页元素的坐标轴向

2、先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

技巧

1、通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放

2、取值大于1表示放大，取值小于1表示缩小

案例：播放效果

/* 1. 摆放播放按钮：图片区域的中间 */
.box li {
  overflow: hidden;
}

.pic {
  position: relative;
}

.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;
}
/* 2. hover效果：大按钮，看不见：透明是0 → 小按钮，看得见：透明度1 */
.box li:hover .pic::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

倾斜

渐变

线性渐变

background-image: linear-gradient(
  渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

1、渐变方向：可选

···to 方位名词

···角度度数

2、终点位置：可选

···百分比

<!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>
</head>
<style>
    .box {
        position: relative;
        width: 300px;
        height: 212px;
    }
    .box img {
        width: 300px;
    }
    .box .title {
        position: absolute;
        left: 15px;
        bottom: 20px;
        width: 260px;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        z-index: 2;
    }
    .box .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
            transparent,
            rgba(0,0,0,0.5)
        );
        opacity: 0;
        transition: all 0.5s;
    }
    .box:hover .mask {
        opacity: 1;
    }
</style>
<body>
    <div class="box">
        <img src="./product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <div class="mask"></div>
    </div>
</body>
</html>

径向渐变

background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

半径可以是2条，则为椭圆

圆心位置取值：像素单位数值 / 百分比 / 方位名词

A宝呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（前端开发）移动Web开发Day01

transform: translate(X轴移动距离, Y轴移动距离);取值像素单位数值百分比（参照计算结果）均可技巧，表示沿着轴移动单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
复制链接

扫一扫