四时宝库

程序员的知识宝库

2024年10月23日

web前端:less转css实现transition过渡动画

1.less实现：transition-timing-function：贝塞尔斜率曲线运动

*{
    margin: 0;
    padding: 0;
    height: 100%;
    body{
        width: 60%;
        height: 75%;
        border: 1px solid;
        //margin:上左右下
        margin: 15% auto 0;
        &:hover #wrap{
            /**
                                        如果暴露的为2个property
             1.先根据hover的property重新定义transition，进行渲染height和font
             2.在移出#wrap后，再次调用已定义的proterty，进行渲染background和width
             */
            transition-property: height,font;     
            height: 100px;
            font: 20px/100px "微软雅黑";
            background: salmon;
            width: 100px;
            
        }
        #createDiv{
            height: 800px;
            position: relative;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            transition-property: height;
            transition-duration: 2s;
            transition-timing-function: cubic-belizer(.12,1.36,.65,-0.28);
        }
        #wrap{
            width: 300px;
            height: 300px;
            font: 50px/300px "微软雅黑";
            text-align: center;
            background: aquamarine;
            border-radius: 50%;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            transition-property: background,width;
            transition-duration: 4s,3s;
            //cubic-bezier: 函数中定义值。可能的值是 0 至 1 之间的数值(开始时间值，开始峰值，结束时间值，结束峰值)
            transition-timing-function: cubic-belizer(.12,1.36,.65,-0.28);
              
        }
    }
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过渡存在的坑bug</title>
	</head>
	<body>
		<div id="wrap">
			cevent
		</div>
	</body>
	<link rel="stylesheet" href="css/less019.css" />
	<script type="application/javascript" src="js/less019.js"></script>
</html>

123456789101112131415

2.less实现动画：rotate旋转、translate位置、skew倾斜、scale缩放

* {
    margin: 0;
    padding: 0;
    height: 100%;
    //overflow: hidden;
    body {
        width: 60%;
        height: 75%;
        border: 1px solid;
        margin: 15% auto 0;
        //transform属性执行时，页面发生变化，会出现滚动条，这里使用overflow:hidden隐藏滚动条，如果这里不行，则继续在上一级html设置overflow
        overflow: hidden;
        &:hover #wrap {
            //transform只能被调用一次
            //变形旋转：rotate(旋转角度)
            transform: rotate(360deg);
            //变形移动：translateX/translateY/translate(单值-x轴位移y轴不变，双值-按照xy取中间位置斜移)
            transform: translateX(200px);
            transform: translateY(200px);
            transform: translate(200px, 200px);
        }
        #wrap {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: seagreen;
            text-align: center;
            font: 30px/300px "微软雅黑";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transition: 2s;
        }
        &:hover #skew {
            //变形倾斜：skewX/Y(值deg),倾斜X即为以x轴为平衡线进行横向拉扯元素，倾斜Y则相反，默认skew(单值)=skewX(值)，skew(x值,y值)
            transform: skew(45deg);
            transform: skewX(-45deg);
            transform: skewY(45deg);
            transform: skewY(-45deg);
            //skew(45,45)相加为90度垂直拉成一条线
            transform: skew(45deg, 45deg);
        }
        #skew {
            width: 200px;
            height: 200px;
            background: aquamarine;
            border-radius: 15%;
            text-align: center;
            font: 20px/200px "微软雅黑";
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transition: 2s;
        }
        &:hover #scale {
            //变形缩放(推荐使用正值，负值有旋转效果)：scale(单值)=scale(x轴单值，y轴单值)，可指定x轴/y轴缩放scaleX/Y
            transform: scale(2);
            transform: scale(.5, .8);
        }
        #scale {
            width: 100px;
            height: 100px;
            background: darkorange;
            border-radius: 30px;
            color: white;
            font: 20px/100px "微软雅黑";
            text-align: center;
            position: absolute;
            top: 60%;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transition: 2s;
        }
        &:hover #rotate_center {
            transform: rotate(360deg);
            //改变基点（中心点位置）transform-origin:可以是坐标属性，也可以是具体坐标，也可以是%百分比，基于原始基点位置
            transform-origin: TOP LEFT;
            transform-origin: 100px 100px;
            //基点变化对位移没有影响
            transform-origin: 100% 100%;
        }
        #rotate_center {
            width: 200px;
            height: 200px;
            background: tomato;
            border-radius: 50%;
            color: white;
            font: 20px/200px "微软雅黑";
            text-align: center;
            position: absolute;
            top: 80%;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transition: 2s;
        }
    }
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2D变形transform</title>
	</head>
	<body>
		<div id="wrap">cevent</div>
		<div id="skew">刘一刀</div>
		<div id="scale">缩放</div>
		<div id="rotate_center">基点</div>
	</body>
	<link rel="stylesheet" href="css/less021.css" />
</html>

123456789101112131415

3.less实现matrix矩阵动画：matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

*{
    margin: 0;
    padding: 0;
    height: 100%;
    body{
        width: 60%;
        height: 75%;
        border: 1px solid;
        margin: 15% auto 0; 
        overflow: hidden;
        &:hover #wrap{
            background: sandybrown;
            transform: rotate(360deg);
            //矩阵平移postion，一个元素每次只能一次tansform(1,0,0,1,x轴,y轴)
            transform: matrix(1,0,0,1,300,0);
            transform-origin: 100%;
            
            //矩阵旋转rotate：需要matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
            //sinθ=360，Math.sin( 360-->角度转弧度-->角度*2π/360 =》 角度*π/180 )
            // TODO Math.sin(360*2PI/360) ==> Math.sin(2PI) ==> Math.sin(2*Math.PI) ==>值：0
            // TODO Math.cos(360) ==>值：1
            
            /**H-Build快捷键选取列：ctrl+alt+C
             * JS对于浮点数值计算不精确
             * Math.sin(2*Math.PI) ==？-2.4492935982947064e-16 实际==0
                0.1+0.2==0.3 ==？ false 实际==true
                */
             //TODO matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
            //Math.sin(359)==>值：0.7568221986283603  Math.cos(359)==>值：0.6536208072447929
            transform: matrix(0.6536208072447929,0.7568221986283603,-0.7568221986283603,0.6536208072447929,0,0);
            
            //矩阵缩放scale：matrix(scaleX,0,0,scaleY,0,0)
            
            //矩阵倾斜skew：matrix(1,tanβ,tanα,1,0,0)
        }
        #wrap{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: tomato;
            color: white;
            font: 30px/300px "微软雅黑";
            text-align: center;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            transition: 2s;
        }
    }
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>矩阵matrix</title>
	</head>
	<body>
		<div id="wrap">cevent</div>
	</body>
	<link rel="stylesheet" href="css/less022.css" />
</html>

123456789101112

4.less实现：

* {
    margin: 0;
    padding: 0;
    height: 100%;
    body {
        width: 80%;
        height: 75%;
        border: 1px solid;
        margin: 10% auto 0;
        //变换组合：变换顺序不同，变换值相同，变换结果也会不同
        /**
                          变换组合时：变化方向 ← 自右向左
         html渲染：→ 自左向右
                            选择器渲染：← 自右向左
                                矩阵渲染：← 自右向左
         */
        &:hover #wrap1 {
            transform: rotate(360deg) scale(2);
        }
        #wrap1 {
            width: 100px;
            height: 100px;
            background: salmon;
            color: wheat;
            font: "微软雅黑";
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 15%;
            left: 12%;
            margin: auto;
            transition: 2s;
        }
        &:hover #wrap2 {
            transform: scale(2) translateX(200px);
        }
        #wrap2 {
            width: 100px;
            height: 100px;
            background: salmon;
            color: wheat;
            font: "微软雅黑";
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 28%;
            left: 12%;
            margin: auto;
            transition: 2s;
        }
        /**
                        实现组合矩阵的结果相同，将属性反转，第二个属性值*2
         */
        &:hover #wrap3 {
            transform: translateX(200px) scale(.5);
        }
        #wrap3 {
            width: 100px;
            height: 100px;
            background: salmon;
            color: wheat;
            font: "微软雅黑";
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 44%;
            left: 12%;
            margin: auto;
            transition: 2s;
        }
        &:hover #wrap4 {
            transform: scale(.5) translateX(400px);
        }
        #wrap4 {
            width: 100px;
            height: 100px;
            background: salmon;
            color: white;
            font: "微软雅黑";
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 64%;
            left: 12%;
            margin: auto;
            transition: 2s;
        }
        &:hover #wrap5 {
            transform: rotate(180deg) translateX(200px);
        }
        #wrap5 {
            width: 100px;
            height: 100px;
            background: salmon;
            color: wheat;
            font: "微软雅黑";
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 80%;
            left: 12%;
            margin: auto;
            transition: 2s;
        }
        &:hover #wrap6 {
            transform: translateX(200px) rotate(180deg);
        }
        #wrap6 {
            width: 100px;
            height: 100px;
            background: salmon;
            color: wheat;
            font: "微软雅黑";
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 90%;
            left: 12%;
            margin: auto;
            transition: 2s;
        }
    }
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>变换组合transition-transform-group</title>
	</head>
	<body>
		<div id="wrap1">cevent1</div>
		<div id="wrap2">cevent2</div>
		<div id="wrap3">cevent3</div>
		<div id="wrap4">cevent4</div>
		<div id="wrap5">cevent5</div>
		<div id="wrap6">cevent6</div>
	</body>
	<link rel="stylesheet" href="css/less023.css" />
</html>

1234567891011121314151617

标签：cssskew 

作者:sishi88 , 分类:技术教程 , 浏览:4 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接