calc函数与transition

2021/12/25 23:39:53

编程Tag： 函数 transition width height background color 100% calc

本文主要是介绍calc函数与transition，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>
        /*calc是个函数他不是属性他可以去计算宽度与高度,这样我们的盒子属性就不是一定为死的*/
        .outbox {
            width: 500px;
            height: 200px;
            background-color: brown;
        }

        .innerbox {
            /*width:150px;*/
            /*width: calc(150px + 30px);*/
            /*calc函数有重要的地方+两边必须用空格隔开不然会失去控制铺满整个父属性*/
            width: calc(100% - 50px);
            /*这里的100%是说这个子盒子本身的宽度是100%铺满父盒子的宽度*/
            height: 200px;
            background-color: blueviolet;

        }

        .tr {
            width: 500px;
            height: 300px;
            background-color: darksalmon;
            /*transition 的 参数顺序:要控制的变换属性(如果不控制就会瞬间完成)(宽/高/一起),
            变换时间(变化开始到变化完成要经历的时间),运动曲线,变换延迟开始(启动与结束都会有等待时间)*/
            /*transition: width 5s ease 0s;*/
            transition: all 5s ease 0s;
            /*all就是全部属性一起控制 5s内完成变化 简易曲线 变换等待0s 颜色也可以控制奥!*/
        }

        .tr:hover {
            width: 1000px;
            height: 500px;
            background-color: red;
        }

        .strb {
            width: 500px;
            height: 20px;
            border: 1px solid red;
            border-radius: 12px;
            margin-top: 50px;
            padding: 1px;
        }

        .innerstrb {
            width: 200px;
            height: 100%;
            border-radius: 12px;
            background-color: tomato;
            transition: all 2s ease 0s;
        }

        .innerstrb:hover {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background-color: red;
        }
    </style>
</head>

<body>
    <p>calc函数使用</p>
    <div class="outbox">
        <div class="innerbox">
        </div>
    </div>
    <p>transition(过渡使用)</p>
    <div class="tr">

    </div>
    <div class="strb">
        <div class="innerstrb"></div>
    </div>
</body>

</html>

这篇关于calc函数与transition的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

calc函数与transition

相关编程文章