web基础学习（八） CSS3的 transition、transform

最新推荐文章于 2024-04-25 13:51:03 发布

June.1

最新推荐文章于 2024-04-25 13:51:03 发布

阅读量1.3w

点赞数

分类专栏： web基础 web前端文章标签： transform transition

本文链接：https://blog.csdn.net/qq_39043923/article/details/88948586

版权

web前端同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

web基础

15 篇文章 1 订阅

订阅专栏

1. transform 2D、3D转换

transform 属性语法：transform: none|transform-functions; 详细查看

2. 过渡

过渡属性手册
timing-function 的属性使用
transition: property duration timing-function delay;

property 指定CSS属性的name，transition效果
duration效果持续时间
timing-function指定transition效果的转速曲线方式
delay 延时时间
动画移动、旋转、缩放、倾斜所有示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*下面测试用审查元素去调整属性值可以看得更直观*/

            /*单个方位属性：rotate,scale属性操作方式一样,旋转就是在中线旋转,缩放一样是以中线*/
            /*X轴移动100px*/
            transform: translateX(100px);
            /*y轴移动100px*/
            transform: translateY(100px);
            /*z轴移动100px*/
            transform: translateZ(100px);
            /*倾斜没有z轴*/
            /*x轴倾斜1度*/
            transform: skewX(1deg);
            /*y轴倾斜1度*/
            transform: skewY(2deg);
            /* 2D方法设置*/
            /*X轴移动100px,Y轴移动200px*/
            transform: translate(100px,200px);
            /*旋转45度*/
            transform: rotate(45deg);
            /*X轴：1 为不缩放,Y轴：2放到2倍大小 */
            transform: scale(1,2);
            /*水平倾斜45度,竖直倾斜0度*/
            transform: skew(45deg,0deg);
            /*matrix:x轴缩放 , y轴倾斜角度（小数 , x轴倾斜角度 , y轴缩放 , x轴移动值（不加单位)  , y轴移动值*/
            transform: matrix(2,0.45,0.1,3,100,200);
            /*3D方法设置*/
            /*X轴移动100px,Y轴移动200px,Z轴移动100px*/
            transform: translate3d(100px,200px,100px);
            /*前三个是x、y、z ：0 是代表不旋转，为 1 时代表旋转,最后面是旋转角度,正的角度值表示顺时针旋转，负值表示逆时针旋转*/
            transform: rotate3d(1,1,0,45deg);
            /*同样三个值分别代表x、y、z。*/
            transform: scale3d(1,2,3);
            /*设置旋转元素的基点位置：x轴。y轴 3d元素可以改变z轴；0px 0px代表左上角的顶点位置*/
            transform-origin: 0px 0px ;


            /*以下测试transition过渡
                 transition: 被操作属性名  持续时间  运行效果（上面手册有详细）  延时时间;
                 下面这种写法是综合写法,也是最常用的写法。单独写法可以看一下手册用法更简单
                 并且都可以定义多个属性的过渡效果用逗号隔开
            */
            transition: transorm 3s linear 2s,background-color 3s linear;
        }
        /*这里激活上面的效果*/
        .box:hover{
            /*主要就是做一个不同的样式来切换过渡效果*/
            transform: rotate(1112deg);
            background-color: orange;
        }
    </style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

实战案例导航的过渡效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <style type="text/css">
        nav {
            width: 600px;
            height: 40px;
            margin: 100px auto 0;
            padding: 0 20px;
            background-color: #ff2121;
            box-shadow: 0px 4px 0px #f20c00;
            border-radius: 20px;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            height: 40px;
        }
        nav ul li {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: relative;
            overflow: hidden;
        }
        nav ul li::after {
            content: "";
            display: inline-block;
            width: 2px;
            height: 30px;
            background: linear-gradient(#ff2121, #bf242a, #ff2121);
            position: absolute;
            right: 0;
            top: 5px;
        }
        nav ul li:last-child::after {
            display: none;
        }
        nav ul li::before {
            content: "";
            display: inline-block;
            width: 30px;
            height: 120px;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
            position: absolute;
            top: -30px;
            left: -70px;
            transform: rotate(45deg);
            transition: all 0.4s ease;
        }

        nav ul li:hover::before {
            left: 80px;
        }
        nav ul li a {
            text-decoration: none;
            font-size: 14px;
            color: #fff;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="">index1</a></li>
        <li><a href="">index2</a></li>
        <li><a href="">index3</a></li>
        <li><a href="">index4</a></li>
        <li><a href="">index5</a></li>
        <li><a href="">index6</a></li>
    </ul>
</nav>
</body>
</html>

June.1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web基础学习（八） CSS3的 transition、transform

1. transform 2D、3D转换transform 属性语法：transform: none|transform-functions; 详细查看2. 过渡过渡属性手册timing-function 的属性使用transition: property duration timing-function delay;property 指定CSS属性的name，transi...
复制链接

扫一扫