c3---过渡

最新推荐文章于 2022-05-05 18:21:07 发布

miku@meow

最新推荐文章于 2022-05-05 18:21:07 发布

阅读量487

点赞数

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

本文链接：https://blog.csdn.net/weixin_51847874/article/details/122720351

版权

笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        7、过渡
        1）作用
        使元素从一个样式逐渐变为另外一个样式
        2）过渡必须有触发事件
        例如：鼠标悬停、鼠标点击等
        3）属性
        ①过渡的属性 必需
        多个属性之间用逗号隔开，简写为all
        transition-property: all;

        可以过渡的属性：
        1、取值为颜色
        2、取值为数值
        3、阴影  box-shadow:;  text-shadow:;
        4、转换  transform:;
        5、背景渐变

        ②过渡持续时间 必需
        默认0s|0ms
        1s = 1000ms
        transition-duration: ;

        ③过渡的速度变化类型 可选
        transition-timing-function:;
        ease 默认值  先加速后减速
        ease-in  加速
        ease-out  减少
        ease-in-out  先加速后减速
        linear  匀速

        ④过渡的延迟时间 可选
        默认0s|0ms
        可以取负值  表示把这段时间的效果跳过
        transition-delay:;

        ⑤简写
        transition:过渡的属性 持续时间 速度变化类型 延迟时间;
                     必须       必须    可选        可选
                     all
        */
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*transition-property: background-color,width,transform;*/
            /*transition-property: all;*/
            /*transition-duration: 2s;*/
            /*transition-timing-function: linear;*/
            /*!*transition-delay: 1s;*!*/
            /*transition-delay: -1s;*/

            /*transition: all 2s linear -1s;*/
            transition: all 2s;

        }
        .box:hover{
            background-color: green;
            width: 1200px;
            transform: translateY(100px);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

miku@meow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c3---过渡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 7、过渡 1）作用使元素从一个样式逐渐变为另外一个样式 2）过渡必须有触发事件例如：鼠标悬停、鼠标点击等
复制链接

扫一扫