css3 过渡状态栏

最新推荐文章于 2024-08-30 11:12:09 发布

战斗中的老段

最新推荐文章于 2024-08-30 11:12:09 发布

阅读量113

点赞数

分类专栏： css 文章标签： html css css3

本文链接：https://blog.csdn.net/qq_48203828/article/details/128734832

版权

css 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章介绍了CSS3中的过渡效果，它是如何让页面元素从一种状态平滑地过渡到另一种状态，提升用户体验。示例代码展示了如何通过添加transition属性来创建一个简单的鼠标悬停时盒子扩大动画。需要注意的是，CSS3过渡在低版本IE浏览器中可能不支持。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7.5px;
            margin: auto;
            padding: 1px;
        }
        .box .box_in{
            width: 50%;
            height: 100%;
            background-color: red;
            /*  谁做过渡就给谁加 */
            transition: all 2s;
        }
        .box .box_in:hover{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_in"></div>
    </div>
</body>
</html>

CSS3 过渡 (重点) 谁做过渡就给谁加
过渡动画:是从一个状态渐渐的过渡到另一个状态可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。
过渡动画经常和:hover一起搭配使用

transition:要过渡的属性花费时间运动曲线何时开始；
1、属性:想要变化从css属性,宽度高度背景颜色奶外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。

 transition: all 1s;

2、花费时间:单位是秒(必须写单位)比如0.5s

3、运动曲线:默认是ease(可以省略)

 transition: width .5s ;

4、何时开始:单位是秒(必须写单位)可以设置延迟触发时间默认是0s (可以省略)

 transition: width .5s ease 1s;

‘

’

战斗中的老段

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 过渡状态栏

是从一个状态渐渐的过渡到另一个状态可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。1、属性:想要变化从css属性,宽度高度背景颜色奶外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。4、何时开始:单位是秒(必须写单位)可以设置延迟触发时间默认是0s (可以省略)transition:要过渡的属性花费时间运动曲线何时开始；3、运动曲线:默认是ease(可以省略)
复制链接

扫一扫

专栏目录