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

html

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

css

  1. <style>
  2. @-webkit-keyframes rot {
  3. from {
  4. -webkit-transform: rotate(0deg);
  5. }
  6. to {
  7. -webkit-transform: rotate(360deg);
  8. }
  9. }
  10. .rotation {
  11. animation: rot 3s linear infinite;
  12. }
  13. </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. C++语法小记---函数模板

    函数模板 函数模板的目的是代码复用 普通函数和模板函数可以形成重载,调时优先调用普通函数,其次调用模板函数 模板函数要编译两次,第一次是具现出具体的函数,第二次是对具现出的函数进行编译 函数模板调用特 ...

  2. StringBuffer类和StringBuilder类

    StringBuffer类和StringBuilder类 三者比较 String 不可变字符序列 底层用char[]存储 StringBuffer 可变的字符序列 线程安全的 效率低 底层结构使用ch ...

  3. html地图定位

    利用高德地图api实现简单的地图功能,包括定位,地图缩放,搜索,列表展示等等基础功能 <!doctype html> <html> <head> <meta ...

  4. 我们通常这样使用Linux弱口令检测!

    在Internet环境中,过于简单的口令是服务器面临的最大风险,对于管理员来说,即使找出这些弱口令账号是非常必要的,这样便于采取进一步的安全措施. 这里的话,弱口令检测需要用到一款密码破译软件--Jo ...

  5. python txt装换成excel

    工作中,我们需要经常吧一些导出的数据文件,例如sql查出来的结果装换成excel,用文件发送.这次为大家带上python装换excel的脚本 记得先安装wlwt模块,适用版本,python2-3 #c ...

  6. 04爬取拉勾网Python岗位分析报告

    # 导入需要的包import requestsimport time,randomfrom openpyxl import Workbookimport pymysql.cursors#@ 连接数据库 ...

  7. 【NeurlPS2019】Positional Normalization 位置归一化

    作者提出,当前的BatchNorm, GroupNorm, InstanceNorm在空间层面归一化信息,同时丢弃了统计值.作者认为这些统计信息中包含重要的信息,如果有效利用,可以提高GAN和分类网络 ...

  8. 自动化不知如何参数化?xlrd来帮你解决

    平时在做自动化测试的时候,一直都是要求数据与业务逻辑分离.把测试数据都写在业务里面的话,比较混杂.为了方便管理测试数据,所以引入了python的一个扩展库--xlrd.该库使用简单,能满足自动化测试的 ...

  9. List<Activity> lists的关闭finish()

    public class App extends Application { private static List<Activity> lists = new ArrayList< ...

  10. Pattern、Matcher的用法

    Pattern和Matcher Pattern 一个Pattern是一个正则表达式经编译后的表现模式. Matcher 一个Matcher对象是一个状态机器,它依据Pattern对象做为匹配模式对字符 ...