第9章 过渡、变形和动画

最新推荐文章于 2024-05-20 21:21:56 发布
最新推荐文章于 2024-05-20 21:21:56 发布
阅读量926 收藏 25
点赞数 29
分类专栏： web前端 文章标签： html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010321564/article/details/135380737
版权

学习目标

  • 掌握过渡的各种属性，能够为网页中的元素添加过渡效果。

  • 掌握变形的各种属性，能够制作2D变形效果和3D变形效果。

  • 掌握动画的各种属性，能够为网页中的元素添加动画效果。

在传统的Web设计中，当网页中要显示动画或特效时，往往需要使用JavaScript脚本或者Flash来实现。在CSS3中，新增了过渡、变形和动画属性，可以轻松实现旋转、缩放、移动和过渡等动画效果，让动画和特效的实现变得更加简单。本章将对CSS3中的过渡、变形和动画进行详细讲解。

9.1 过渡

CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐隐、速度的变化等。在CSS3中，过渡属性主要包括transition-property、transition-duration、transition-timing-function、transition-delay，本节将分别对这些过渡属性进行详细讲解。

9.1.1 transition-property属性

transition-property属性用于设置应用过渡效果的CSS属性。

transition-property属性的基本语法格式:

transition-property:none|all|property;

transition-property属性值:

属性值描述
none没有属性会获得过渡效果。
all所有属性都将获得过渡效果。
property定义应用过渡效果的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>transition-property属性</title>
    <style type="text/css">
    div{
        width:400px;
        height:100px;
        background-color:red;
        font-weight:bold;
        color:#FFF;
        }
        div:hover{
	background-color:yellow;
	/*指定动画过渡的CSS属性*/
	transition-property:background-color;
	/*指定动画过渡的CSS属性*/
	transition-duration:5s;
}

    </style>
</head>
<body>
    <div>杨花落尽子规啼，闻道龙标过五溪。</div>
</body>
</html>

9.1.2 transition-duration属性

transition-duration属性用于定义过渡效果持续的时间。

transition-duration属性的基本语法格式:

9.1.3 transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线。

transition-timing-function属性的基本语法格式:

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

transition-timing-function常见属性值

属性值描述
linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）
ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）
ease-in指定以慢速开始，然后逐渐加快的过渡效果，等同于cubic-bezier(0.42,0,1,1）
ease-out指定以慢速结束的过渡效果，等同于cubic-bezier(0,0,0.58,1）
ease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）
cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间
<!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>transition-timing-function属性</title>
    <style type="text/css">
    div{
        width:424px;
        height:406px;
        margin:0 auto;
        background:url(images/HTML5.png) center center no-repeat;
        border:5px solid #333;
        border-radius:0px;	
        }
    div:hover{
        border-radius:50%;
        transition-property:border-radius;  /*指定动画过渡的CSS属性*/
        transition-duration:2s;  /*指定动画过渡的时间*/
        transition-timing-function:ease-in-out;  /*指定动画过以慢速开始和结束的过渡效果*/
        transition-delay:2s;    /*指定动画延迟触发*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

9.1.4 transition-delay属性

transition-delay属性规定过渡效果的开始时间。

transition-delay属性的基本语法格式:

9.1.5 transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。

transition属性的基本语法格式:

注意：如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用英文逗号进行分隔。

9.2 变形

在CSS3中，通过变形可以对元素进行平移、缩放、倾斜和旋转等操作。同时变形可以和过渡属性结合，实现一些绚丽网页动画效果。变形通过transform属性实现，主要包括2D变形和3D变形两种，本节将对这两种变形属性进行详细讲解。

9.2.1 认识transform

CSS3变形效果是一系列效果的集合，例如平移、缩放、倾斜和旋转。使用transform属性实现的变形效果，无需加载额外文件，可以极大提高网页开发者的工作效率和页面的执行速度。

transform属性的基本语法格式:

transform-function可以设置的变形样式:

translate()：移动元素对象，即基于X坐标和Y坐标重新定位元素。 scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数。 skew()：倾斜元素对象，取值为一个度数值。 rotate()：旋转元素对象，取值为一个度数值。

9.2.2 2D变形

平移是指元素位置的变化，包括水平移动和垂直移动。在CSS3中，使用translate()可以实现元素的平移效果。

平移的基本语法格式:

在使用translate()方法移动元素时，坐标点默认为元素中心点，然后根据指定的X坐标和Y坐标进行移动。

<!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>translate()</title>
    <style type="text/css"> 
    div{
        width:100px;
        height:50px;
        background-color:#0CC;
    }
    #div2{transform:translate(100px,30px);}
    </style>
</head>
<body>
    <div>盒子1：我寄愁心与明月，</div>
    <div id="div2">盒子2：随君直到夜郎西。</div>
</body>
</html>

在CSS3中，使用scale()可以实现元素缩放效果。

缩放的基本语法格式:

<!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>scale()</title>
    <style type="text/css"> 
    div{
        width:100px;
        height:50px;
        background-color:#FF0;
        border:1px solid black;
    }
    #div2{
        margin:100px;
        transform:scale(2,3);
    }
    </style>
</head>
<body>
    <div>未放大的元素</div>
    <div id="div2">放大后的元素</div>
</body>
</html>

在CSS3中，使用skew()可以实现元素倾斜效果。

倾斜的基本语法格式:

 

<!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>skew()</title>
    <style type="text/css"> 
    div{
        width:100px;
        height:50px;
        margin:0 auto;
        background-color:#F90;
        border:1px solid black;
    }
    #div2{transform:skew(30deg,10deg);}
    </style>
</head>
<body>
    <div>未发生倾斜的元素</div>
    <div id="div2">发生倾斜的元素</div>
</body>
</html>

在CSS3中，使用rotate()可以旋转指定的元素对象。

旋转的基本语法格式:

注意：如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开。

变形操作都是以元素的中心点为参照。默认情况下，元素的中心点在X轴和Y轴的50%位置。如果需要改变这个中心点，可以使用transform-origin属性。

更改中心点的基本语法格式:transform-origin: x-axis y-axis z-axis;

transform-origin参数说明

参数描述
x-axis定义视图被置于X轴的何处。属性值可以是单位为百分比、em、px的数字，也可以是top、right、bottom、left和center这样的关键词
y-axis定义视图被置于Y轴的何处。属性值可以是单位为百分比、em、px的数字，也可以是top、right、bottom、left和center这样的关键词
z-axis定义视图被置于Z轴的何处。需要注意的是，Z轴的属性值不能是一个百分比数字，否则将会视为无效值，一般为px单位的数字
<!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>transform-origin属性</title>
    <style>
    #div1{	
        position:relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        padding: 10px;
        border: 1px solid black;
    }
    #box02{
        padding:20px;
        position:absolute;
        border:1px solid black;
        background-color: red;
        transform:rotate(45deg);               /*旋转45°*/	
        transform-origin:20% 40%;               /*更改原点坐标的位置*/	    	   
    }
    #box03{
        padding:20px;
        position:absolute;
        border:1px solid black;
        background-color:#FF0;
        transform:rotate(45deg);               /*旋转45°*/	
    }
    </style>
</head>
<body>
    <div id="div1">
        <div id="box02">更改变换中心</div>
        <div id="box03">未更改变换中心</div>
    </div>
</body>
</html>

9.2.3 3D变形

2D变形是元素在X轴和Y轴的变化，而3D变形是元素围绕X轴、Y轴、Z轴的变化。相比于平面化2D变形，3D变形更注重于空间位置的变化。

在CSS3中，rotateX()可以让指定元素围绕X轴旋转。

rotateX()的基本语法格式:

<!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>rotateX()</title>
    <style type="text/css"> 
    div{
        width:250px;
        height:50px;
        background-color:#FF0;
        border:1px solid black;
    }
    div:hover{
        transition:all 1s ease 2s;              /*设置过渡效果*/
        transform:rotateX(60deg);
    }
    </style>
</head>
<body>
    <div>元素旋转后的位置</div>
</body>
</html>

在CSS3中，rotateY()可以让指定元素围绕Y轴旋转。

rotateY()的基本语法格式

<!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>perspective属性</title>
    <style type="text/css"> 
    div{	
        width:250px;
        height:50px;
        border:1px solid #666;
        perspective:250px;                     /*设置透视效果*/
        margin:0 auto;
        }
    .div1{
        width:250px;
        height:50px;
        background-color:#0CC;
        
    }
    .div1:hover{
        transition:all 1s ease 2s;          
        transform:rotateX(60deg);
    }
    </style>
</head>
<body>
    <div>
        <div class="div1">夕阳西下，断肠人在天涯。</div>
    </div>
</body>
</html>

rotateZ()方法和rotateX()方法、rotateY()方法功能一样，区别在于rotateZ()方法用于指定一个元素围绕Z轴旋转。如果仅从视觉角度上看，rotateZ()方法让元素顺时针或逆时针旋转，与2D中的rotate()效果等同，但rotateZ()不是在2D平面上的旋转。

rotated3d()是通过rotateX()、rotateY()和rotateZ()演变的综合属性，用于设置多个轴的3D旋转。

rotate3d()的基本语法格式

CSS3中的其他变形属性

属性名称描述属性值
transform-style用于定义元素是否保留3D位置flat：元素不保留3D位置（默认属性）
preserve-3d：元素将保留其3D位置
backface-visibility用于定义元素背面朝向观察者时是否可见。visible：背面可见
hidden：背面不可见
方法名称描述
translate3d(x,y,z)定义3D位移。
translateX(x)定义X轴位移。
translateY(y)定义Y轴位移。
translateZ(z)定义Z轴位移。
scale3d(x,y,z)定义 3D 缩放。
scaleX(x)定义X轴缩放。
scaleY(y)定义Y轴缩放，通过给定一个Y轴的值。
scaleZ(z)定义Z轴缩放。
<!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>translate3D()</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            border:2px solid #000;
            position:relative;
            transition:all 1s ease 0s;           /*设置过渡效果*/
            transform-style:preserve-3d;         /*保存嵌套元素的3D空间*/
        }
        img{
            position:absolute;
            top:0;
            left:0;
            transform:translateZ(100px);
        }
        .no2{
            transform:rotateX(90deg) translateZ(100px);
        }
        div:hover{
            transform:rotateX(-90deg);           /*设置旋转角度*/
        }
        div:visited{
            transform:rotateX(-90deg);           /*设置旋转角度*/
            transition:all 1s ease 0s;           /*设置过渡效果*/
            transform-style:preserve-3d;         /*规定被嵌套元素如何在3D空间中显示*/
        }
    </style>
</head>
<body>
    <div>
        <img class="no1" src="images/1.png" alt="1">
        <img class="no2" src="images/2.png" alt="2">
    </div>
</body>
</html>

9.3 动画

在CSS3中，过渡和变形只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如过渡和变形实现的动态效果不能够重复播放。为了实现更加丰富的动画效果，CSS3提供了animation属性，使用animation属性可以定义复杂的动画效果。本节将详细讲解使用animation属性设置动画的技巧。

9.3.1 @keyframes规则

@keyframes规则用于创建动画，animation属性只有配合@keyframes规则才能实现动画效果。

@keyframes规则规则的语法格式

@keyframes animationname { keyframes-selector{css-styles;} }

animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。 keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。 css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

注意：Internet Explorer 9以及更早的版本，不支持@keyframes 规则或animation属性。

9.3.2 animation-name属性和animation-duration属性

animation-name属性用于定义要应用的动画名称，该动画名称会被@keyframes规则引用。

animation-name属性的基本语法格式：

animation-duration属性用于定义整个动画效果完成所需要的时间。

animation-duration属性的基本语法格式

<!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>animation-duration 属性</title>
    <style type="text/css">
    img{
        width:200px;
        animation-name:mymove;             /*定义动画名称*/
        animation-duration:10s;            /*定义动画时间*/
        }
    @keyframes mymove{
        from {transform:translate(0) rotateY(180deg);}
        50% {transform:translate(1000px) rotateY(180deg);}
        51% {transform:translate(1000px) rotateY(0deg);}
        to {transform:translate(0) rotateY(0deg);}
        }
    </style>
</head>
<body>
    <img src="images/bozai.gif" >
</body>
</html>

9.3.3 animation-timing-function属性

animation-timing-function用来规定动画的速度曲线，可以定义使用哪种方式来执行动画速率。

animation-timing-function属性的基本语法格式：

animation-timing-function:value;

属性值描述
linear动画从头到尾的速度是相同的。
ease默认属性值。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在cubic-bezier方法中自己的值。可能的值是从0到1的数值。

9.3.4 animation-delay属性

animation-delay属性用于定义执行动画效果延迟的时间。

animation-delay属性的基本语法格式：

9.3.5 animation-iteration-count属性

animation-iteration-count属性用于定义动画的播放次数。

animation-iteration-count属性的基本语法格式：

9.3.6 animation-direction属性

animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。

animation-direction属性的基本语法格式

 

<!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>animation-direction属性</title>
    <style type="text/css">
        div{
            width:200px;
            height:150px;
            border-radius:50%;
            background:#F60;
            animation-name:mymove;         /*定义动画名称*/
            animation-duration:8s;         /*定义动画时间*/
            animation-iteration-count:2;   /*定义动画播放次数*/
            animation-direction:alternate; /*动画逆向播放*/
        }
        @keyframes mymove{
            from {transform:translate(0) rotateZ(0deg);}
            to {transform:translate(1000px) rotateZ(1080deg);}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

9.3.7 animation属性

animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。

animation属性的基本语法格式：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

animation: mymove 5s linear 2s 3 alternate;

上述代码也可以拆解为下列代码：

animation-name:mymove;               /*定义动画名称*/
animation-duration:5s;               /*定义动画时间*/
animation-timing-function:linear;  /*定义动画速率*/
animation-delay:2s;                   /*定义动画延迟时间*/
animation-iteration-count:3;        /*定义动画播放次数*/
animation-direction:alternate;      /*定义动画逆向播放*/

9.4 阶段案例——表情图片

本章前几节重点讲解了CSS3中的高级应用，包括过渡、变形及动画等。为了使读者更好地理解这些应用，并能够熟练运用相关属性实现元素的过渡、平移、缩放、倾斜、旋转及动画等效果，本节将通过案例的形式分步骤地制作表情图片。

<!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 href="style12.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="lian">
        <p class="meimao1 meimao"></p>
        <p class="meimao2 meimao"></p>
        <p class="yanjing1 yanjing">
            <span></span>
        </p>
        <p class="yanjing2 yanjing">
            <span></span>
        </p>
        <p class="zui"></p>
    </div>
</body>
</html>
/*重置浏览器的默认样式*/
body, ul, li, p, h1, h2, h3,img {margin:0; padding:0; border:0; list-style:none;}
.lian {
	width:200px;
	height:200px;
	border-radius:50%;
	background:#fcd671;
	margin:100px auto;
	position:relative;
}
.meimao{
	width:30px;
	height:30px;
	border-radius:50%;
	border-top:4px solid #000;
}
.meimao1{
	position:absolute;
	left:20%;
	top:14%;
	transform:rotate(20deg);
}
.meimao2{
	position:absolute;
	left:65%;
	top:14%;
	transform:rotate(-20deg);
}	
.yanjing{
	width:70px;
	height:20px;
	background:#FFF;
	border-radius:50%;
}	
.yanjing1{
	position:absolute;
	left:10%;
	top:30%;
}	
.yanjing2{
	position:absolute;
	left:55%;
	top:30%;
}	
span{
	display:block;
	width:12px;
	height:12px;
	background:#000;
	border-radius:50%;
	transform:translate(3px,4px);
	animation: yanzhu 8s linear 2s infinite alternate;
}
.zui{
	width:114px;
	height:100px;
	border-radius:50%;
	border-bottom:3px solid #000;
	position:absolute;
	left:22%;
	top:28%;
	}
/* 动画效果 */
@keyframes yanzhu
{
	from{transform:translate(3px,4px) scale(1);}      /*动画开始时的状态*/
	10%{transform:translate(3px,4px) scale(1);}
	30%{
		transform:translate(24px,4px) scale(3);
		opacity:0
		}
	31%{
		transform:translate(24px,4px) scale(3);
		opacity:1;
		background:url(images/xin.png) center center no-repeat;
		background-size:11px 9px;
		}
	69%{
		transform:translate(24px,4px) scale(3);
		opacity:1;
		background:url(images/xin.png) center center no-repeat;
		background-size:11px 9px;
		}
	70%{
		transform:translate(24px,4px) scale(3);
		opacity:0
		}
	80%{transform:translate(52px,4px) scale(1);}
	to{transform:translate(52px,4px) scale(1);}
}

本章小结

本章首先介绍了CSS3中的过渡和变形，重点讲解了过渡属性及2D变形和3D变形。然后，讲解了CSS3中的动画特效，主要包括animation的相关属性。最后，通过CSS3中的过渡、变形和动画，制作出了一个表情图片的动画。 通过本章的学习，读者应该能够掌握CSS3中的过渡、转换和动画，并能够熟练地使用相关属性实现元素的过渡、平移、缩放、倾斜、旋转及动画等特效。

笔触狂放
关注
  • 29
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
变形、过渡与动画
Han_Zhou_Z的博客
10-29 171
目录 一、变形效果 1、CSS3中实现变形的优点 2、变形的使用方法 3、变形函数 4、中心点 二、过渡效果(transition) 1、transition-property属性 2、transition-duration属性 3、transition-timing-function属性 4、transition-delay属性 5、transition属性 重点：变形和过渡的区别 三、动画效果 1、创建动画 2、动画的属性 一、变形效果 1、CSS3中实现变形的优点 .
CSS中变形过渡与动画
qq_48315043的博客
10-24 180
一、变形效果 1、CSS3中实现变形的优点： (1)不需要加载额外的文件(flash文件) (2)提供开发效率 (3)提高页面的执行速度 2、用法： transform:none | transform-function none：不变形 transform-function：指定变形函数 3、变形函数： (1)matrix(<number>,<number>,<number>,<number>...
CSS3的过渡、变形、动画、滤镜等效果
weixin_61561066的博客
05-06 1570
目录 一、过渡效果 二、变形效果 1、平移 2、旋转 3、缩放 4、倾斜 5、改变中心点 三、动画效果 1、创建动画 2、应用动画 四、滤镜效果 1、模糊效果(高斯模糊) 2、图像的亮度 3、图像对比度 4、图像阴影 5、图像灰度化 6、图像反转 7、图像透明度 8、棕褐色效果 9、饱和度 五、CSS3的精灵技术 一、过渡效果 1、transition-property：指定过渡的属性，取值如下： n...
HTML(第九章) 标签： 网页动画
m0_61835031的博客
07-11 748
标签： 网页动画CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform） Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 设置变形函数，可以是一个，也可以是多个，中间以空格分开 transform:[transform-function … …]translate()：平移函数，基于X、Y坐标重新定位元素的位置scale()：缩放函数，可以使任意元素对象尺寸发生变化scale()函数可以只接收一个值，也可以接收
利用CSS3制作动画(变形、过渡、动画)
Learn to value time
01-09 1495
CSS3变形 变形介绍 CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 CSS3变形是通过tranform实现的，可以用在块元素和行内元素上，该属性可以旋转、缩放、移动元素。 transform:[transform-function] *; 设置变形函数，可以是一个，也可以是多个，中间以空格分开。 变形函数 translate() 平移函数，基于X、Y坐标重新定位元素的位置
CCS3高级应用——过渡、变形、动画。
m0_46844278的博客
04-19 2582
标题
CSS3变形和动画
weixin_57727027的博客
03-05 856
CSS3中的变形与动画 鼠标移动到指定的区域的某一个位置，触发改变div标签的长度，宽度，背景颜色和字体颜色。移除鼠标恢复原本的长度，宽度，背景颜色和字体颜色。（简称：鼠标移入移出改变事件） eg： <title>动画transform transition animation</title> <style> .wrapper { width:200px; height:200px; border:2px dotted #4AB01A; margin:200px;
web前端HTML/CSS_9（css变形，过渡及动画和笔记）
weixin_53068339的博客
03-19 154
1，米兔动画 <!-- * @Author: your name * @Date: 2019-10-12 12:15:48 * @LastEditTime: 2021-03-13 11:09:58 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \code\exercise\11_米兔的动画.html --> <!DOCTYPE html>
html第九章课后作业5,HTML第九章
weixin_39975529的博客
06-18 208
一.CSS3变形transform1.平移：translate(x,y) translateX(x) translateY(y)注意：如果想只向X轴平移那么可以translateX，如果想只向X轴平移那么可以translateY，X和Y不能共存。如果想向两个方向平移，那么使用translatey轴^ -||||||- ---------------------------------> + ...
CSS 小结笔记之变形、过渡与动画的示例
09-22
主要介绍了CSS 小结笔记之变形、过渡与动画的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
页面切换的动画过渡
02-03
所以在触发这些操作的同时，往往需要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的，我们来看看一些常见的界面切换的过渡方式吧。淡入淡出的过渡效果是最为常见的处理手法，这种效果往往能很直观的...
Web前端框架应用：第4章 Vue过渡动画-过渡与动画.pptx
06-06
第4章 Vue过渡和动画 过渡和动画基础 多个组件过渡 多个元素过渡 列表过渡 学习目标 目录 目录 知识架构 4.1 过渡和动画 知识架构 4.2 多个元素过渡 知识架构 4.3 多个组件过渡 知识架构 4.4 列表过渡 4.1 过渡和...
对过渡和动画进行简单的总结.md
08-02
过渡个动画基础
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
【html5】04-操作DOM元素
m0_68467925的博客
05-19 913
dom获取单个、多个元素；类名操作： Dom.classList.add("类名"): 给当前dom元素添加类样式 Dom.classList.remove("类名");classList.contains("类名"); classList.toggle("active"); 自定义属性的获取与设置
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 745
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
520表白html5爱心代码
最新发布
youyouxiong的博客
05-20 2732
在HTML5中创建一个带有爱心动画的表白页面，可以通过结合CSS3动画和JavaScript来实现。这个示例创建了一个简单的表白页面，其中包含一个动态的爱心和文字。你可以根据自己的需求调整样式和动画效果，以创建一个更加个性化的表白页面。的动画，它会使爱心按照一定的时间间隔进行缩放，产生跳动的效果。类定义了表白文字的样式，包括它的位置、颜色和字体大小。类定义了爱心的样式，包括它的形状和大小。伪元素用于创建爱心的两个部分，并使用。在这个示例中，我们使用了CSS3的。属性来旋转它们，形成爱心的形状。
构建响应式网站的HTML5和CSS3最新技术
2301_79507619的博客
05-18 302
构建响应式网站需要利用HTML5和CSS3的最新技术，以确保网站在各种设备和屏幕尺寸上都能提供良好的用户体验。
CSS3的变形transform、过渡transition、动画animation学习
05-25
CSS3的变形(transform)、过渡(transition)、动画(animation)是CSS3中非常重要的特性，可以为网页设计带来更加丰富的交互效果和视觉体验。 1. 变形(transform) 变形是指通过CSS3中的transform属性对元素进行平移、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笔触狂放

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值