• 技术文章 >web前端 >前端问答

    css3怎么实现高度渐变效果

    长期闲置长期闲置2022-04-28 17:54:51原创260

    实现方法:1、利用“元素{animation:名称 时间}”语句给元素绑定动画,并设置动画所需的时间;2、利用“@keyframes 名称{100%{height:渐变高度值;}}”语句,设置高度改变的动画动作,实现渐变效果即可。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css3怎么实现高度渐变效果

    可以利用动画效果实现。

    语法为:

    animation: name duration timing-function delay iteration-count direction;

    高度渐变可以利用transform 属性

    transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div{
                width:100px;
                height:100px;
                background-color:pink;
                animation:fadenum 5s;
            }
            @keyframes fadenum{
       100%{height:300px;}
    }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    输出结果:

    +7.gif

    (学习视频分享:css视频教程

    以上就是css3怎么实现高度渐变效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:jquery怎么隐藏tr一行 下一篇:jquery怎么监听textarea值是否改变
    千万级数据并发解决方案

    相关文章推荐

    • css3动画效果有变形吗• css3中渐变怎么改变角度• css3动画和jquery动画有什么区别• css3支持哪些浏览器内核• css3中media媒体查询器的用法是什么
    1/1

    PHP中文网