HTML5基础加强css样式篇（css过渡属性简写，cubic-bezier过度曲线函数使用）（二十）

最新推荐文章于 2024-01-28 19:18:07 发布

咸鸭蛋炒饭

最新推荐文章于 2024-01-28 19:18:07 发布

阅读量1.2k

点赞数 1

分类专栏： HTML5基础篇文章标签： html5 css 经验应用 html

本文链接：https://blog.csdn.net/u010853130/article/details/62419118

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.css过度效果简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1, .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        body:hover .box1{
            width: 300px;
            height: 300px;
            /*transition-duration: 3s;*/
            /*!*transition-timing-function: cubic-bezier(0,1.5,1,-0.38);*!*/
            /*transition-timing-function: cubic-bezier(.66,-0.53,.41,1.52);*/

            /*transition: 具有过渡效果的样式 持续时间 过渡效果 延迟时间, 具有过渡效果的样式 持续时间 过渡效果 延迟时间;*/

            /*transition: width 3s ease 0s;*/
            /*transition:width 3s, 1s -1s;s*/

            /*样式覆盖
               1. ,后的样式包含前面的样式
               2. 后的样式包含的过渡时间和延迟执行时间要大于前面过渡样式设置的过渡时间和延迟执行时间

            */
            /*transition:width 3s 0s, all 3s -4s;*/
            /*transition:width 3s 0s, all 10s -2s;*/
            /*transition:width 10s 0s, all 2s -2s;*/
            /*transition:width 3s 0s, all 1s -1s;*/
        }



    </style>
</head>
<body>

<div class="box1"></div>


<script type="text/javascript">


</script>
</body>
</html>

2.cubic-bezier过度曲线函数使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1, .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        body:hover .box1{
            width: 300px;
            transition-duration: 3s;
            /*transition-timing-function: cubic-bezier(0,1.5,1,-0.38);*/
            transition-timing-function: cubic-bezier(.66,-0.53,.41,1.52);
        }

        /*body:hover .box2{*/
            /*width: 300px;*/
            /*transition-duration: 3s;*/
            /*transition-timing-function: linear;*/
        /*}*/

        .box2{
            width: 300px;
        }

    </style>
</head>
<body>

    <div class="box1"></div>
    <br>
    <div class="box2"></div>

<script type="text/javascript">


</script>
</body>
</html>

注：可以去这个网站生成函数坐标 http://cubic-bezier.com/#.17,.67,.83,.67

咸鸭蛋炒饭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（css过渡属性简写，cubic-bezier过度曲线函数使用）（二十）

1.css过度效果简写 .box1, .box2 { width: 100px; height: 100px; background-color: blue; } body:hover .box1{ width: 3
复制链接

扫一扫