1200字范文 > CSS 过渡效果

CSS 过渡效果

时间：2020-05-05 17:10:36

相关推荐

CSS 过渡效果

简述:

CSS过渡，就是样式发生变化时，可以看上去更自然，更柔和。想让哪个盒子有过渡样式，就把transition属性加在那个盒子上。

语法:

CSS过渡效果

代码:

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>/* 设置盒子的初始样式 */div {float: left;margin-right: 10px;width: 200px;height: 200px;text-align: center;line-height: 200px;background-color: skyblue;}/* 鼠标悬停时改变盒子颜色 */div:hover {background-color: greenyellow;}/* 第一个盒子设置过度效果 */div:first-child {transition: all .8s linear 0s;}</style><body><div>设置过度效果</div><div>未设置过度效果</div></body></html>

运行:

解释:

例中代码很简单，<body>部分就是两个<div>盒子，<style>中, 第一部分设置两个盒子的初始样式, 第二部分设置两个盒子鼠标悬停时的样式。

第三部分才是实现过渡的地方，

还记得文章开头说的，想让哪个盒子使用过渡效果，就把 transition加在那个盒子上

此处，因为想对第一个盒子使用过渡效果, 所以这里用 div:first-child选择了第一个盒子, 然后使用了过渡属性的简写形式

transition: all .8s linear 0s;

all: 所有样式变化，都应用过渡效果

.8s：过渡效果持续0.8秒

linear: 过渡效果匀速展示

0s: 不延迟，发生CSS属性改变后，马上使用过渡效果展示新样式

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。