css 动画效果设置

最新推荐文章于 2024-09-04 17:17:13 发布

weixin_45615623

最新推荐文章于 2024-09-04 17:17:13 发布

阅读量474

点赞数

本文链接：https://blog.csdn.net/weixin_45615623/article/details/101020147

版权

本文详细介绍了CSS3中的动画和变形效果，包括before和after伪元素的使用，2D和3D变形的各种方法如translate、scale、rotate等，以及transform-origin和perspective的设置。此外，还讲解了CSS3的过渡效果和动画语法，帮助开发者创建出丰富的动态视觉体验。

摘要由CSDN通过智能技术生成

before和after伪元素(详解)

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意：
一定要有content，否则伪元素不起作用
## 过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
在CSS3里使用transition可以实现补间动画（过渡效果），A状态，B状态，
语法格式:
transition: 要过渡的属性花费时间运动曲线何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。