css图片360°自动旋转

缺乏、安全感 2024-04-06 10:01 74阅读 0赞

.img {
        
                width: 100px;
                height: 100px;
                animation: rotate 3s linear infinite;
                border-radius: 50%;
                -webkit-user-drag: none;
            }
    
            @keyframes rotate {
        
                0% {
        
                    transform: rotate(0deg);
                }
    
                100% {
        
                    transform: rotate(360deg);
                }
            }

<img class="img" src="data:image/webp;base64,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" >

See the Pen [ 图片旋转][Link 1] by qianhuiya ( [@quinhua][quinhua]) on [CodePen][].

[Link 1]: https://codepen.io/quinhua/pen/YzLZEGW
[quinhua]: https://codepen.io/quinhua
[CodePen]: https://codepen.io

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关 css图片360°自动旋转

.img { width: 100px; height: 100px;

缺乏、安全感/ 2024年04月06日 10:01/ 0 赞/ 75 阅读

相关 CSS - 元素旋转动画（360度转圈）

效果图 ![在这里插入图片描述][2020112611231257.gif_pic_cener] 代码 @keyframes rotate {

野性酷女/ 2022年12月24日 01:49/ 0 赞/ 278 阅读

相关使用css3实现图片旋转

用CSS语法实现动态旋转 css3新增的语法中有个动画属性，今天没事，拿来玩玩动画做成是这样的 ![在这里插入图片描述][watermark_type_ZmFu

系统管理员/ 2022年11月19日 09:59/ 0 赞/ 296 阅读

相关 css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

CSS 语言： CSSSCSS 确定 \animation\{ width:180px; height:180px; background-image:url(h

水深无声/ 2022年09月03日 01:26/ 0 赞/ 219 阅读

相关 css3图片旋转动画

参考网站：[http://www.17sucai.com/pins/tag/6188.html][http_www.17sucai.com_pins_tag_6188.html

妖狐艹你老母/ 2022年06月13日 13:47/ 0 赞/ 302 阅读

相关 css3鼠标经过，图片旋转

<style> .navigation:hover .img { -webkit-transition:0.4s linear;transition:0.4s ease

浅浅的花香味﹌/ 2022年06月10日 08:58/ 0 赞/ 276 阅读

相关 JS和CSS使图片旋转

“秋风宝剑孤臣泪，落日旌旗大将坛” 如题,,我们要使图片可以旋转,,在图片上添加点击事件. JSP代码: <img class="photo1" style

谁借莪１个温暖的怀抱￠/ 2022年06月05日 04:25/ 0 赞/ 296 阅读

相关 css-图片旋转木马3D效果

参考博客：[ 张鑫旭][Link 1] 我们先来看一下效果： ![70][] 还不错咯，这个主要是利用了css3里面的transform属性。简单介绍一下。

淡淡的烟草味﹌/ 2022年05月24日 13:08/ 0 赞/ 372 阅读

相关 css 实现图片旋转

鼠标放在图片上旋转180度可用在头像上比较俏皮效果如下： ![这里写图片描述][70] 代码如下： <!DOCTYPE html> <html>

野性酷女/ 2022年05月17日 06:27/ 0 赞/ 270 阅读

相关 CSS3简单实现360deg旋转

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淩亂°似流年/ 2022年03月22日 08:40/ 0 赞/ 235 阅读