css3图片旋转动画

妖狐艹你老母 2022-06-13 13:47 301阅读 0赞

参考网站：[http://www.17sucai.com/pins/tag/6188.html][http_www.17sucai.com_pins_tag_6188.html]  
弄一张图片素材

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>transform</title>
      <style>
        #loader {
    		display: block;
    		position: relative;
    		-webkit-animation: spin 2s linear infinite;
    		animation: spin 2s linear infinite;
    	}
    	@-webkit-keyframes spin {
    		0%   {
    			-webkit-transform: rotate(0deg);
    			-ms-transform: rotate(0deg);
    			transform: rotate(0deg);
    		}
    		100% {
    			-webkit-transform: rotate(360deg);
    			-ms-transform: rotate(360deg);
    			transform: rotate(360deg);
    		}
    	}
    	@keyframes spin {
    		0%   {
    			-webkit-transform: rotate(0deg);
    			-ms-transform: rotate(0deg);
    			transform: rotate(0deg);
    		}
    		100% {
    			-webkit-transform: rotate(360deg);
    			-ms-transform: rotate(360deg);
    			transform: rotate(360deg);
    		}
    	}
    
      </style>
     </head>
    
     <body>
      <div id="test" >
    　　<img src="tomcat1.png" style="width:250px;height:250px" id="loader" />  
      </div>
     </body>
    </html>

看效果  
![这里写图片描述][SouthEast]

[http_www.17sucai.com_pins_tag_6188.html]: http://www.17sucai.com/pins/tag/6188.html
[SouthEast]: /images/20220613/ec0f4b2d1cfa4c7eae5efc59589b4c11.png

发表评论取消回复

表情：

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

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

相关阅读

相关使用css3实现图片旋转

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

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

相关 CSS3 元素转圈动画（元素旋转动画）

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

谁践踏了优雅/ 2022年11月10日 01:25/ 0 赞/ 205 阅读

相关纯css3风车旋转动画js特效

[下载地址][Link 1]此风车效果，用到了css3的自定义动画、旋转、圆角、阴影效果来实现 ![1631561083.png][] dd: [Link 1]:

客官°小女子只卖身不卖艺/ 2022年09月12日 01:44/ 0 赞/ 236 阅读

相关 css3制作翻滚动画,css3之图片波浪翻滚动画

.pic1,.pic2,.pic3,.pic4,.pic5,.line1,.line2,.line3,.line4\_1,.line4\_2,.line4\_3,.line4\

冷不防/ 2022年09月02日 14:53/ 0 赞/ 225 阅读

相关 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 阅读

相关利用CSS3实现图片3D旋转

以下是本次所作的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

古城微笑少年丶/ 2022年04月15日 01:08/ 0 赞/ 1059 阅读

相关 css3平移，旋转，动画

<style> body{ perspective: 2000px; }

缺乏、安全感/ 2022年01月22日 23:29/ 0 赞/ 309 阅读

相关 CSS3 transform动画 3D旋转立体正方形

CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div，分别向前后，向左右，向上下移动相等位置，再将平面div旋转，添加animatio

「爱情、让人受尽委屈。」/ 2021年07月25日 13:57/ 0 赞/ 648 阅读

相关 css动画 3d旋转相册

思路: 重叠四个图片,然后设置行变点在中心的z轴往后的方向上,分别设置其他图片绕y轴的旋转角度,设置父容器的行变中心点和图片一样并设置透视和3d属

待我称王封你为后i/ 2021年07月25日 02:37/ 0 赞/ 523 阅读