当前位置: 首页 > news >正文

css:过渡transition 、转换transform、动画animation

一、过渡效果:transition 属性

transition 属性是CSS3中用来实现元素过渡效果的属性之一。它定义了元素在不同状态之间平滑过渡的效果,让元素的改变更加流畅和动态。

transition 属性包括以下几个子属性:

  • transition-property:指定要过渡的CSS属性名称,可以使用通配符 all 表示所有属性都要过渡。
  • transition-duration:指定过渡的持续时间,单位可以是秒(s)或毫秒(ms)。
  • transition-timing-function:指定过渡的时间函数,用于控制过渡的速度曲线,常见的值有 easelinearease-inease-outease-in-out 等。
  • transition-delay:指定过渡的延迟时间,即过渡开始前等待的时间,单位可以是秒(s)或毫秒(ms)。

二、2D,3D转换效果:transform

“transform” 是一个 CSS 属性,可以用来对元素进行变形。它可以改变元素的位置、大小、方向和形状,以及应用旋转、缩放、倾斜和扭曲等效果。

下面是一些常用的 transform 属性值:

  • translate():平移元素的位置。它接受一个或两个参数,分别表示水平和垂直方向的偏移量。单位可以是像素、百分比或关键字(如translateX()translateY())。

  • scale():缩放元素的大小。它接受一个或两个参数,分别表示水平和垂直方向的缩放比例。如果只提供一个参数,则表示在两个方向上使用相同的缩放比例。

  • rotate():旋转元素。它接受一个参数,表示旋转的角度。角度可以是正负值,单位可以是度(deg)或弧度(rad)。

  • skew():倾斜元素。它接受一个或两个参数,分别表示水平和垂直方向的倾斜角度。角度可以是正负值,单位可以是度(deg)或弧度(rad)。

  • matrix():通过矩阵变换来实现复杂的变形效果。它接受六个参数,分别代表矩阵变换的各个元素。具体来说,第一个参数控制水平缩放、倾斜和旋转,第二个参数控制水平和垂直倾斜,第三个参数控制垂直缩放、倾斜和旋转,第四个参数控制水平和垂直位移,第五个和第六个参数控制透视效果。

示例

.element {/* 元素沿着X轴平移100像素,沿着Y轴平移100像素,即向右下方移动100像素。 */transform: translate(100px, 100px);/* 也可以分开写,只是达不到两个样式同时出现的效果*//* 沿X轴向右平移100像素 */transform: translateX(100px);/* 沿Y轴向下平移100像素 */transform: translateY(100px);
}.element {/* 在X轴和Y轴上均匀地缩小为原来的0.5倍 */transform: scale(0.5, 0.5);/* 也可以分开写,只是达不到两个样式同时出现的效果*//* 沿着X轴的缩放,将元素的宽度缩小到原来的一半 */transform: scaleX(0.5);/* 沿着Y轴的缩放,将元素的高度缩小到原来的一半 */transform: scaleY(0.5);
}.element {/* 将元素按照顺时针方向旋转45度,绕着自身的中心点进行旋转 */transform: rotate(45deg);/* 沿着X轴的旋转,使元素绕着X轴旋转45度 */transform: rotateX(45deg) rotateY(45deg);
}.element {/* 元素在X轴方向上沿顺时针方向斜切30度,在Y轴方向上沿逆时针方向。transform: skew(<x-angle>, <y-angle>); */transform: skew(30deg, -20deg);
}.element {/* 使用一个2D变换矩阵来对元素进行变换。这个矩阵包含六个值,按顺序分别表示缩放、倾斜和平移。 *//* transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY); *//* scaleX和scaleY表示在X轴和Y轴上的缩放比例;skewX和skewY表示在X轴和Y轴上的倾斜角度(正值为顺时针,负值为逆时针);translateX和translateY表示在X轴和Y轴上的平移距离。 */transform: matrix(1, -0.2, 0, 1.5, 0, 0);/* 	在X轴方向上不进行缩放(scaleX为1)在Y轴方向上按1.5倍进行缩放(scaleY为1.5)在X轴方向上按逆时针倾斜0.2弧度(skewY为-0.2)在Y轴方向上不进行倾斜(skewX为0)不进行平移(translateX和translateY都为0) */
}

三、创建动画效果的属性:animation(@keyframes

animation 是 CSS 中用于创建动画效果的属性。它是一个复合属性,包含了多个子属性,在其中我们可以设置动画名称、持续时间、动画函数、延迟时间、重复次数、方向以及是否暂停等属性。

  • animation-name: 指定要应用到元素上的关键帧动画的名称。
  • animation-duration: 指定动画的持续时间,单位为秒或毫秒。
  • animation-timing-function: 指定动画变化的速度曲线,也称为缓动函数。
  • animation-delay: 指定动画开始之前的延迟时间,单位为秒或毫秒。
  • animation-iteration-count: 指定动画播放的次数,可以使用 infinite 表示无限循环。
  • animation-direction: 指定动画在每次重复时的播放方向,可以设置为 normal(正常),reverse(反转),alternate(交替)或 alternate-reverse(交替反转)。
  • animation-fill-mode: 指定动画播放前和播放后应用到元素上的样式,可以设置为 noneforwardsbackwards 或 both
  • animation-play-state: 指定动画的播放状态,可以设置为 running(运行中)或 paused(暂停)。

例子

<template><view id="my-element"></view>
</template>
<script>export default {data() {return {}},methods: {}};
</script>
<style>#my-element {animation: my-animation 2s ease-in-out 1s infinite alternate forwards;background-color:red;width:100rpx;height:100rpx;}@keyframes my-animation {0% {opacity: 0;transform: translateX(-100%);}50% {opacity: 1;transform: translateX(0);}100% {opacity: 0;transform: translateX(100%);}}
</style>

http://www.lryc.cn/news/189333.html

相关文章:

  • 双边滤波算法及例程
  • 排序算法-希尔排序法(ShellSort)
  • 交通物流模型 | 基于自适应图卷积网络的轨道交通短时客流预测
  • 2.1python 常用的三种数据类型_python量化实用版教程(初级)
  • C++游戏后端开发(魔兽世界,MMO,TrinityCore源码拆解) 教程
  • MySQL 之 死锁日志的查看和分析
  • Docker运行docker中指定一个jar
  • nodejs+vue家教管理系统
  • vuex入门
  • 交叉熵Loss多分类问题实战(手写数字)
  • 如何看待Unity新的收费模式?(InsCode AI 创作助手)
  • Android Studio git 取消本地 commit(未Push)
  • ViewModifier/视图修饰符, ButtonStyle/按钮样式 的使用
  • 科技资讯|微软AR眼镜新专利曝光,可拆卸电池解决续航焦虑
  • idea系列---【上一次打开springboot项目还好好的,现在打开突然无法启动了】
  • 查询资源消耗
  • conda: error: argument COMMAND: invalid choice: ‘activate‘
  • 新鲜速递:Spring Cloud Alibaba环境在Spring Boot 3时代的快速搭建
  • 网络-网络状态网络速度
  • ACL访问控制列表的解析和配置
  • 记一次使用vue-markdown在vue中解析markdown格式文件,并自动生成目录大纲
  • 力扣每日一题35:搜索插入的位置
  • Iptabels的相关描述理解防火墙的必读文章
  • Maven 构建项目测试
  • 机器学习 - 似然函数:概念、应用与代码实例
  • LeetCode 热题 100-49. 字母异位词分组
  • TensorFlow入门(十九、softmax算法处理分类问题)
  • 刷题用到的非常有用的函数c++(持续更新)
  • 黑客技术(网络安全)——自学思路
  • lNmp安装: