CSS可以用于创建动态效果

简介: CSS用于创造动态效果,如过渡和动画。过渡是元素样式平滑变化的效果,例如div的宽度在鼠标悬停时2秒内从100px扩展到200px。动画更复杂,可控制多属性在关键帧间变化,如div背景色在4秒内按红、黄、蓝、绿循环,可设置速度曲线(ease-in-out)和延迟(2s)。使用`animation`属性能简化设置,如`example 4s infinite`定义动画名称、时长和无限循环。

CSS可以用于创建动态效果。以下是一些基本的CSS动画和过渡的例子:

过渡(Transitions)

过渡是元素从一种样式逐渐改变为另一种的效果。以下是创建过渡的基本语法:

css
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 200px;
}
在这个例子中,当你把鼠标指针放在 div 元素上时,div 的宽度会在2秒内从100px变为200px。

动画(Animations)

CSS动画比过渡更复杂,可以控制多个属性并在多个关键帧之间改变它们。以下是创建动画的基本语法:

css
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
75% {background-color: green;}
100% {background-color: red;}
}

div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
}
在这个例子中,div 元素的背景颜色会在4秒内按照红色、黄色、蓝色、绿色的顺序改变。这个动画由 @keyframes 规则定义。

使用 animation 属性

你也可以使用 animation 属性来简写动画的各个属性,像这样:

css
div {
animation: example 4s infinite;
}
这行代码与上面的两行代码的效果是一样的。example 是动画的名称,4s 是动画的持续时间,infinite 使动画无限次重复。

使用 animation-timing-function 和 animation-delay

你还可以控制动画的速度曲线和开始时间。例如:

css
div {
animation: example 4s ease-in-out infinite;
animation-delay: 2s;
}
在这个例子中,动画的速度在前后两半是不同的(ease-in-out),并且动画在开始前会延迟2秒。

目录
打赏
0
2
2
0
224
分享
相关文章
HTML+CSS+JS仿京东购物车页面动态效果
HTML+CSS+JS仿京东购物车页面动态效果
218 0
CSS 支持动画效果,可以通过关键帧动画或过渡动画实现动态效果。具体案例解析
CSS 支持动画效果,可以通过关键帧动画或过渡动画实现动态效果。具体案例解析
124 1
CSS3实现鼠标悬停动态效果(仿阿里云官方网站)
CSS3实现鼠标悬停动态效果(仿阿里云官方网站)
48 0
|
9天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
124 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33

热门文章

最新文章