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

    css3动画效果有变形吗

    长期闲置长期闲置2022-04-28 14:41:10原创178

    css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

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

    css3动画效果有变形吗

    css3动画效果有变形

    变形可以利用css中的transform属性,transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    设置动画可以利用animation属性,该属性是一个简写属性,可以设置:

    示例如下:

    <!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>
    .div1{
      width:100px;
      height:100px;
      background:pink;
      margin:0 auto;
    animation:fadenum 5s;
    }
    @keyframes fadenum{
      100%{transform:rotate(180deg) scale(0.5,0.5);}
    }
    </style>
    </head>
    <body>
    <div class="div1">这是一个旋转缩放的效果</div>
    </body>
    </html>

    输出结果:

    +2.gif

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

    以上就是css3动画效果有变形吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:css3中select的用法是什么 下一篇:tweenmax能改变css3属性吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3筛选怎么除去第一个元素的元素• css3线性渐变可以实现三角形吗• css3新增伪类选择器有哪些• css3包含哪些模块• 在css3中可实现缩放效果的是什么属性
    1/1

    PHP中文网