首页css过渡效果

css过渡效果

时间: 2023-07-23 17:05:54 浏览: 95

CSS 过渡效果可以让网页元素在改变样式时以平滑动画的形式过渡，使页面更加流畅和美观。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>CSS 过渡效果示例</title> <style type="text/css"> .box { width: 100px; height: 100px; background-color: red; transition: background-color 1s ease-out; } .box:hover { background-color: blue; } </style> </head> <body> <div class="box"></div> </body> </html> ``` 在上面的代码中，我们定义了一个名为 `.box` 的 div 元素，当鼠标悬停在该元素上时，背景颜色会从红色过渡到蓝色，过渡时间为 1 秒，并且以 `ease-out` 的缓动函数进行过渡。其中，`transition` 属性指定了要过渡的 CSS 属性和过渡时间，`hover` 选择器则表示当鼠标悬停在该元素上时应用的样式。

阅读全文