HTML5基础加强css样式篇（css过度效果）（十八）

最新推荐文章于 2024-09-09 04:25:28 发布

咸鸭蛋炒饭

最新推荐文章于 2024-09-09 04:25:28 发布

阅读量1k

点赞数

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

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

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.css过度效果简介：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: #7e64ff;
            /*visibility: hidden;*/

        }

        /*鼠标悬浮在.box时，宽度放大2倍*/
        .box:hover{
            /*设置有过渡效果的CSS属性*/
/*
            对CSS属性的要求：具有“中间值”得CSS样式

            中间值: CSS样式是数值或者可以转化成数值

*/
            /*transition-property: width;*/
            /*transition-property: opacity;*/
            /*transition-property: display;*/
            /*transition-property: visibility;*/
            transition-property: background-color;

            /*#f00 = red*/
            background-color: red;

            /*opacity: 1;*/
            /*display: block;*/


            /*设置过渡持续的时间*/
            transition-duration: 3s;

            /*width: 200px;*/

            /*opacity: 0;*/

            /*display: none;*/

            /*visibility: hidden;*/

        }
        
    </style>
</head>
<body>

<div class="box">

</div>

<script type="text/javascript">


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

2.css过度效果简单应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: #7e64ff;
            border: 1px solid green;

        }

        /*需求：鼠标悬浮在.box时，宽度放大2倍，背景色变成红色，高度放大2倍*/
        .box:hover{
            /*通过,分割多个样式*/

             /*
            我们不需要特别设置 transition-property:
            浏览器默认为我们增加了 transition-property: all

            */
            /*transition-property: width, background-color, height, border;*/
            /*transition-property: all;*/

            /*仅让宽度产生过渡动画效果*/
            transition-property: width;
            /*当特指某个CSS样式具有过渡动画效果，需要显示设置 transition-property*/

            transition-duration: 3s;

            width: 200px;
            height: 200px;
            background-color: #f00;
            border:  19px solid green;


        }
        
    </style>
</head>
<body>

<div class="box">

</div>

<script type="text/javascript">


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

3.过度时间设置transition-duration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度时间设置</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: #7e64ff;
            border: 1px solid green;

        }
        .box:hover{
            /*仅让宽度产生过渡动画效果，过渡时间3ms, 高度4s, 背景色过渡*/
            transition-property: width, height, background-color, border;

            /*transition-duration: 3s;*/
            /*transition-duration: 300ms;*/
            transition-duration: 2s, 4s, 10s;

            /*
            过渡时间值
                ms 毫秒
                s 秒

                */

            width: 200px;
            height: 200px;
            background-color: #f00;
            border: 19px solid green;


        }

    </style>
</head>
<body>

<div class="box">

</div>

<script type="text/javascript">


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

4.过度延时时间：transition-delay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box, .box1 {
            width: 100px;
            height: 100px;
            background-color: #7e64ff;
            border: 1px solid green;
        }

        body:hover .box{

            /*transition-property: width, height, background-color, border;;*/
            transition-property: width;
            transition-duration: 2s;
            /*过渡延迟执行*/
            /*transition-delay: 1s, .1s;*/

            /*可以设置负值*/
            transition-delay: -1s;

            width: 200px;
            /*height: 200px;*/
            /*background-color: #f00;*/
            /*border: 19px solid green;*/
        }
        body:hover .box1{
            transition-property: width;
            transition-duration: 2s;
            width: 200px;
        }

    </style>
</head>
<body>

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

<script type="text/javascript">


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

css过度效果：动态边框应用：

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 150px;
            background-color: forestgreen;

            position: relative;
        }
        .border-box{
            background-color: orange;
            position: absolute;
        }

        .border-box-top{
            height: 8px;
            width: 0;
        }
        .border-box-right{
            width: 8px;
            height: 0;
            right: 0;
        }
        .border-box-bottom{
            height: 8px;
            width: 0;
            bottom: 0;
            right: 0;
        }
        .border-box-left{
            width: 8px;
            height: 0;
            left: 0;
            bottom: 0;
        }

        /*
            触发时机：鼠标悬浮在 .box
            过渡时间：每个边的过渡时间是1s
            CSS值变化： 0 到指定的大小
        */

        .box:hover .border-box-top{
            width: 100%;
            transition-duration: 1s;
        }

        .box:hover .border-box-right{
            height: 100%;
            transition-duration: 1s;
            transition-delay: 1s;
        }
        .box:hover .border-box-bottom{
            width: 100%;
            transition-duration: 1s;
            transition-delay: 2s;
        }
        .box:hover .border-box-left{
            height: 100%;
            transition-duration: 1s;
            transition-delay: 3s;
        }


    </style>
</head>
<body>

<div class="box">
    <div class="border-box border-box-top"></div>
    <div class="border-box border-box-right"></div>
    <div class="border-box border-box-bottom"></div>
    <div class="border-box border-box-left"></div>
</div>

<script type="text/javascript">


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