web前端学习笔记—— transform和transition

最新推荐文章于 2024-04-22 20:04:35 发布

一个平平无奇的小高

最新推荐文章于 2024-04-22 20:04:35 发布

阅读量1.1k

点赞数 3

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_44646343/article/details/104135550

版权

Transform,transition实现变形的列表

主要知识点

1.transition
transition-property:规定设置过渡效果的css属性名称（默认为all）
transition-duration:规定完成过渡效果需要多少秒或者毫秒
transition-delay:定义过渡效果何时开始（延迟数值为正，提前数值为负）
transition-timing-function:规定速度效果的速度曲线（默认为ease)
复合写法：transition:1s 2s linear;(表示持续1s,延迟2s执行，速度效果为linear)
2.transform
translate:位移

translateX(x)：定义位移转换，只是用x轴的值
translateY(y)：定义位移转换，只是用y轴的值
translateZ(z):：定义3d位移转换，只是用z轴的值
复合写法：transform：translate（100px,50px);

scale:缩放（该值为一个比例值，以当前元素中心点进行缩放。正常大小为1，放大一倍值为2，缩小一倍值为0.5）

scaleX(x)：通过设置x轴的值来定义缩放转换
scaleY(y)：通过设置y轴的值来定义缩放转换
scaleZ(z)：通过设置z轴的值来定义3d缩放转换
复合写法：transform:scale(2，2）或 transform:scale(2);

rotate:旋转(单位为角度deg，正值表示顺时针旋转，负值表示逆时针旋转)

rotateX(angle)：定义沿x轴的3d旋转
rotateY(angle)：定义沿y轴的3d旋转
rotateZ(angle)：定义沿z轴的3d旋转
复合写法：transform:rotate(-90deg);

skew:斜切（单位也是角度，正值向左倾斜，负值向右倾斜）

skewX(angle)：定义沿x轴的2d倾斜转换
skewY(angle)：定义沿y轴的2d倾斜转换
复合写法：transform:skew(30deg);

3.transform复合写法与注意点
transform复合写法： transform:translate(50px,50px) rotate(70deg);
transform注意点：

变形操作不会影响到其它元素；
变形操作只能添加给块元素，但是不能添加给内联元素；
复合写法，可以同时添加多个变形操作（执行是有顺序的，即先执行后面的操作，再执行前面的操作，translate会受到rotate,scale,skew的影响）

4.transform-origin
transform旋转默认绕着中心点旋转
写法：transform-origin:100px 100px; 或 transform-origin:center top;

案例：简单的变形列表

当鼠标移动到 li 文字上时，实现动画展示，一共两个文件，变形的列表.css 文件和变形的列表.html 文件

变形的列表.css

    *{margin: 0;padding: 0;}
     .list{list-style: none;width:250px;margin: 30px auto;}
     .list li{height:97px;border-bottom: 1px pink dashed;margin-top: 20px;}
     .list li:last-child{border-bottom: none;} 
     .list img{display:block;width:112px;height: 77px;}
     .list .list_photo{float:left;width:112px;height:77px;position:relative;overflow: hidden;}
     .list .list_photo .list_photo_box{border:2px white solid;width:92px;height:57px;position: absolute;top: 9px;left: 9px;transform: translate(0px,-90px) rotate(-90deg);transform-origin: 0,0;transition: 1s 20ms linear;}
     .list .list_photo .list_photo_text{width: 100%;text-align:center;position:absolute;bottom:25px;color:white;transition: 1s 20ms linear;transform: translate(0px,100px)}
     .list .list_text{float:left;width: 114px;height:auto;margin: 5px 5px;font-size: 12px;line-height: 21px;}
     .list .list_text a{text-decoration:none;color:black}
     .list li:hover .list_photo_box{transform: translate(0,0) rotate(0deg);}
     .list li:hover .list_photo_text{transform: translate(0,0);}

变形的列表.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变形的列表</title>
    <link rel="stylesheet" href="./变形的列表.css">
</head>
<body>
    <ul class="list">
        <li>
            <div class="list_photo">
                <img src="./image/终南山院士.png" alt="终南山院士">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">终南山院士</div>
            </div>
            <div class="list_text">
                <a href="*">钟南山院士,福建省厦门市人,1936年10月出生,中国工程院院士</a>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="./image/新型冠状病毒.jpg" alt="新型冠状病毒">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">冠状病毒</div>
            </div>
            <div class="list_text">
                <a href="*">主要感染特征为：起初发热，干咳，具备人传人的能力</a>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="./image/正确佩戴口罩.jpg" alt="正确佩戴口罩">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">佩戴口罩</div>
            </div>
            <div class="list_text">
                <a href="*">用双手紧压鼻梁两侧的金属条，使口罩上端紧贴鼻梁，向下拉伸口罩</a>
            </div>
        </li>
     
    </ul>
</body>
</html>

演示结果：（这里本来想插入一个演示视频或者可以直接进行代码演示的网页，但是由于知识储备和经验不足，只能插入几张图来说明,欢迎大家指导交流）
[这张图为初始图，hover之前的图]
在这里插入图片描述
当鼠标移动到li上时，执行动画

欢迎大家指导交流

一个平平无奇的小高

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
web前端学习笔记—— transform和transition

Transform,transition实现变形的列表主要知识点1.transitiontransition-property:规定设置过渡效果的css属性名称（默认为all）transition-duration:规定完成过渡效果需要多少秒或者毫秒transition-delay:定义过渡效果何时开始（延迟数值为正，提前数值为负）transition-timing-function:...
复制链接

扫一扫