2021.4.9 北京林业大学 web前端开发基础 CSS3 过渡与动画、3D变换

最新推荐文章于 2024-08-26 23:54:42 发布

小张喝奶茶了吗

最新推荐文章于 2024-08-26 23:54:42 发布

阅读量252

点赞数

分类专栏：北京林业大学 web前端开发文章标签： html css3

本文链接：https://blog.youkuaiyun.com/ITzz_qqzi/article/details/115537918

版权

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

6 篇文章

订阅专栏

北京林业大学

4 篇文章

订阅专栏

本文介绍了CSS3中的过渡transition和动画animation的使用，包括transition-property、transition-duration、transition-timing-function和transition-delay的详细说明，并给出了代码示例。同时，文章还深入讲解了3D变换，包括transform-style: preserve-3d、rotateX/Y/Z及perspective属性的应用，帮助理解3D空间中的元素旋转和透视效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过渡与动画

一、过渡transition（设置在初始状态下）
（两个效果之间渐进的动画）
将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”
*属性名持续时间过渡方法
1.transition-property 属性名|all 对哪个属性进行变化（谓词属性）
多个属性过渡可以用all关键字
2.transition-duration 持续时间
3.transition-timing-function 过渡使用的方法（函数）
4.transition-delay （即时启动还是延时启动）
在这里插入图片描述
代码示例如下：

<div>web design</div>

div {
height: 30px;
width: 100px;
line-height: 30px;
border-radius:5px;
color:#000;
background-color:silver;
transition:all 1s linear;
}
div:hover {
color:white;
background-color:#45B823;
}

在这里插入图片描述
二、动画animation
1.定义动画@keyframes规则
2.调用动画animation属性
代码示例如下：

div:hover
{
animation: mycolor 5s linear;
}

@keyframes mycolor
{
0% {background-color:red;}
30% {background-color:blue;}
60% {background-color:yellow;}
100% {background-color:green;}
}

在这里插入图片描述

3D变换

一、3D transform-style： preserve-3d
坐标系：x轴rotateX() y轴rotateY() z轴rotateZ()
1.父容器：旋转
transform-style: preserve-3d;
transform:rotateY(60deg);
舞台：透视关系
眼睛到舞台的距离
perspective:100px;
二、旋转 transform属性
rotateX( )
rotateY( )
rotateZ( )
角度deg
三、透视 perspective属性
例子如下：

<div id="stage">
<div class="box x">
<img src="frog.jpg" />
</div>
<div class="box y">
<img src="frog.jpg" />
</div>
<div class="box z">
<img src="frog.jpg" />
</div>
</div>

#stage{
width: 300px;
margin: 100px auto;
perspective:100px;
}
.box{
width: 100px;
height:100px;
float:left;
transition:linear 1s;
transform-style: preserve-d;
}
img{
width:100px;
height:75px;
}
.x:hover
{
transform:rotateX(60deg);
}
.y:hover
{
transform:rotateY(60deg);
}
.z:hover
{
transform:rotateZ(60deg);
}

在这里插入图片描述