CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式

简介: 【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。

CSS 支持两种类型的动画:关键帧动画和过渡动画。

  • 关键帧动画是由一系列关键帧组成的动画,每个关键帧定义了某个时刻的样式,浏览器会在这些关键帧之间平滑地插入过渡帧以创建动画效果。以下是一个简单的例子:
    ```css
    @keyframes example {
    0% {background-color:red;}
    25% {background-color:yellow;}
    50% {background-color:blue;}
    75% {background-color:green;}
    100% {background-color:red;}
    }

.example {animation-name:example; animation-duration:5s;}


此示例将 div 元素的背景色从红色渐变到黄色,再到蓝色,最后变为绿色,整个过程持续 5 秒。

  * 过渡动画是在属性变化时发生的动画,例如当鼠标悬停在元素上时发生的变化。以下是一个简单的例子:
```css
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s ease-in-out, height 2s ease-in-out;
}

div:hover {
  width: 200px;
  height: 200px;
}

当鼠标悬停在 div 元素上时,宽度和高度将会从 100px 平滑地变为 200px,整个过程持续 2 秒。

以上是 CSS 动画的基本示例,您可以通过调整关键帧的时间、顺序和样式,或者添加更多的过渡属性来创建更多复杂的效果。通过 CSS 动画,您可以制作吸引人的动态效果,提升网站用户体验。

目录
相关文章
|
10天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
25 6
|
14天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
21天前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
29天前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
49 3
|
1月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
|
21天前
|
前端开发 开发者
几种常见的 CSS 文档应用,快看看你会几种?
几种常见的 CSS 文档应用,快看看你会几种?
|
28天前
|
XML 前端开发 安全
如何使用 CSS 中的 :root 伪类选择器
如何使用 CSS 中的 :root 伪类选择器
25 0
|
2月前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
33 0
|
2月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
43 0