今天在重构网页特效的时候,想着用到一个css3的旋转特效。简单来一个demo。

html

 <div class="box">
<img src="./yft.png" alt="" class="rotation">
</div>

css

  <style>
@-webkit-keyframes rot {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.rotation {
animation: rot 3s linear infinite;
}
</style>

注意的是,建议这里使用的是插入图片,如果用背景图片的话,那么盒子内的内容也会进行旋转。

CSS3动画旋转——(图片360°旋转)的更多相关文章

  1. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  2. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 使用CSS3动画属性实现360°无限循环旋转【代码片段】

    使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/ ...

  4. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  5. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  6. html5 图片360旋转

    test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. css3动画之图片旋转

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. CSS3 动画3D视角下 旋转圆环

    首先是  transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...

  9. 头像修改功能 包含ios旋转图片 但是旋转后没遮罩, 正常图片可以显示遮罩 宽高不规则图片没做控制 遮罩框可以拖动

    https://blog.csdn.net/wk767113154/article/details/77989544  参考资料 <template> <div id="p ...

随机推荐

  1. 题解 CF576D 【Flights for Regular Customers】

    对每条边来说,可以走这条边的限制解除是按\(d\)的顺序,所以先对每条边按\(d\)排序. 然后考虑每两条边之间的处理,用一个矩阵表示当前走\(d\)步是否可以从一个点到另一个点,称其为状态矩阵,用另 ...

  2. Windows电脑多个SSH Key管理.md

    笔者偏在阿里云,Github,开源中国上均存放一些私有项目代码,因此需要再Windows电脑上配置多个SSH Key 环境 操作系统:windows 7 Git 提示:Git 安装后就可以使用 Git ...

  3. json:server 本地搭建

    做个记录, 第一步,我们新建一个文件夹. 第二步,打开文件夹,执行git,没有git可以下载一个.或者用命令行工具进入到这个文件夹! 第三步,初始化json  在git里执行npm init --ye ...

  4. Python JSON的基本使用

    Python JSON的基本使用 一.json格式介绍 JSON(JavaScript Object Notation) 通用的数据类型,易于人阅读和编写. 跟字典有些类似,形式也是key-value ...

  5. springboot + ehcache

    一.使用 springboot + ehcache本地堆缓存实现相应功能 1.引入ehcache的jar包 2.创建ehcache的xml配置文件 <?xml version="1.0 ...

  6. JavaScript高级程序设计(第三版) 2/25

    第一章 JavaScript简介 javascript 跟 java没有任何联系,可以这么说,基本上区别就相当于,老婆跟老婆饼.只是因为当初Netscape(js的公司)想搭上媒体热炒的Java的顺风 ...

  7. Python字符串内建函数_上

    Python字符串内建函数: 注:汉字属于字符(既是大写又是小写).数字可以是: Unicode 数字,全角数字(双字节),罗马数字,汉字数字. 1.capitalize( ): 将字符串第一个字母大 ...

  8. Python os.makedev() 方法

    概述 os.makedev() 方法用于以major和minor设备号组成一个原始设备号.高佣联盟 www.cgewang.com 语法 makedev()方法语法格式如下: os.makedev(m ...

  9. Python os.fstatvfs() 方法

    概述 os.fstatvfs() 方法用于返回包含文件描述符fd的文件的文件系统的信息,类似 statvfs().高佣联盟 www.cgewang.com Unix上可用. fstatvfs 方法返回 ...

  10. OKHttp 官方文档【一】

    最近工作比较忙,文章更新出现了延时.虽说写技术博客最初主要是写给自己,但随着文章越写越多,现在更多的是写给关注我技术文章的小伙伴们.最近一段时间没有更新文章,虽有工作生活孩子占用了大部分时间的原因,但 ...