• 技术文章 >web前端 >css教程

    css怎么设置元素一直旋转

    藏色散人藏色散人2021-04-02 11:24:55原创57

    css设置元素一直旋转的方法:首先创建一个HTML示例文件;然后用img引入图片;最后使用css样式“transform:rotate(360deg)”设置元素旋转360度,并通过animation-duration属性设置动画时长即可。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    我们在进行网页页面设计时,经常会遇到各种关于图片展示的问题,比如有的需要让图片圆角展示、图片点击放大展示等等效果。

    主要就给大家介绍用css3实现图片自动循环360旋转的具体方法

    css可以使用transform 属性设置元素进行旋转、缩放、移动或倾斜。

    我们可以使用css样式transform:rotate(360deg)设置元素旋转360度。

    可以使用animation设置动画属性。可以通过animation-duration属性设置动画时长。

    css3可以通过设置元素css样式为transform:rotate(360deg)设置元素旋转角度为360度,然后通过animation-duration属性来设置动画时长即可实现元素不停旋转。

    示例:

    HTML代码:

    <div class="demo">
    <img class="an img" src="1.jpg" width="400" height="400"/>

    css图片旋转360度的动画代码示例如下:

    .demo{text-align: center;
        margin-top: 100px;}
    @-webkit-keyframes rotation{
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
    }
    .an{
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }
    .img{border-radius: 200px;}

    效果图:

    1.gif

    推荐学习:《css视频教程

    以上就是css怎么设置元素一直旋转的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css怎么实现禁止点击 下一篇:css的含义是什么
    第15期线上培训班

    相关文章推荐

    • 你所不知道的css规则,值得收藏!!• css怎么设置字体为微软雅黑• css怎么去掉边框• css不透明度怎么设置• css怎么实现禁止点击

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网