<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

  1. #img1{
  2. width:280px;
  3. height: 279px;
  4. border-radius:140px;
  5. -webkit-animation:run 6s linear 0s infinite;
  6. }
  7. #img1:hover{
  8. -webkit-animation-play-state:paused;
  9. }
  11. @-webkit-keyframes run{
  12. from{
  13. -webkit-transform:rotate(0deg);
  14. }
  15. to{
  16. -webkit-transform:rotate(360deg);
  17. }
  18. }
  20. </style>

</head>

<body>
<div ><img id="img1" src="C:\Users\hp\Desktop\1.jpg" /></div>
</body>
</html>
1.id为img1的图片通过设置圆角使图片为圆形显示，src为路径

      1. 代码中关键的部分是怎样使得图片无限转动。 我们可以使用 -webkit-animation 和 @-webkit-keyframes 组合使用来完成。
        -webkit-animation 是一个复合属性，定义如下：
        -webkit-animation: name duration timing-function delay iteration_count direction;
        name: 是 @-webkit-keyframes 中需要指定的方法，用来执行动画。
        duration: 动画一个周期执行的时长。
        timing-function: 动画执行的效果，可以是线性的，也可以是”快速进入慢速出来”等。
        delay: 动画延时执行的时长。
        iteration_count: 动画循环执行次数，如果是infinite，则无限执行。
        direction: 动画执行方向。
      2. @-webkit-keyframes 中的from和to 两个属性，就是指定动画执行的初始值和结束值。
      3. -webkit-animation-play-state:paused; 暂停动画的执行。

html5+css3图片旋转特效的更多相关文章

  1. CSS3图片旋转特效

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  3. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  4. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  5. 10款让人惊叹的HTML5/jQuery图片动画特效

    1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫 ...

  6. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  7. 40免费的 jQuery & CSS3 图片热点特效

    jQuery CSS3 形象悬停效果可能是一个优秀的网站项目中添加的效果.这个特殊的收集是大约50个 jQuery CSS3 形象徘徊影响最近出版的.这些图像悬停效果可以作为一个有效的和创造性的方式添 ...

  8. css3图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  9. html5 css3 进度条特效

    https://www.html5tricks.com/tag/css3%E8%BF%9B%E5%BA%A6%E6%9D%A1/page/3

随机推荐

  1. main函数中如何等待协程运行完毕

    使用channel同步 package main import ( "fmt" ) func printNumber(num int, c chan struct{}) { fmt ...

  2. 《Python编程从入门到实践》--- 学习过程笔记(2)变量和简单数据类型

    一.变量无需声明 二.变量命名规则 (1)变量名只能包括字母.数字和下划线: (2)变量名不能包含空格: (3)变量名不能使用Python关键字和函数名(保留字不可以做变量名); (4)简短易懂,清晰 ...

  3. [Leetcode]315.计算右侧小于当前元素的个数 (6种方法)

    链接 给定一个整数数组 nums,按要求返回一个新数组 counts.数组 counts 有该性质: counts[i] 的值是  nums[i] 右侧小于 nums[i] 的元素的数量. 示例: 输 ...

  4. 06-03 Java 面向对象思想概述、开发设计特征，类和对象的定义使用，对象内存图

    面向对象思想概述.开发设计特征 1:面向对象思想 面向对象是基于面向过程的编程思想. 面向过程:强调的是每一个功能的步骤 面向对象:强调的是对象,然后由对象去调用功能 2:面向对象的思想特点 A:是一 ...

  5. awk将某个字段按照分隔符分割之后统计次数

    cat label_movie2|grep BBD252CC0A4FE7D10C990261D5CEACB5|awk -F "," '{for(i=2;i<NF;i++) p ...

  6. linux 备忘记录

    杂项记录 Ubuntu 通过/etc/network/interfaces修改IP,重启网络服务貌似也不会生效.可以重启电脑使其生效,或执行: ip addr flush dev ens33 & ...

  7. Git使用（1）

    安装git完成后 1.首先配置你的用户信息,用于体现在你的提交记录中包含your name and your email git config --global user.name "you ...

  8. 记一次TCP重发接口调用的问题

    问题描述:基于微软RDP协议,使用开源rdp库与微软skpye软件进行基于tcp的p2p通讯,由于rdp协议传输原始图片数据较大,调用公司内部ice p2p通讯接口处会导致失败. 错误思路:一开始是怀 ...

  9. Selenium自动化测试Python一：Selenium入门

    Selenium入门 欢迎阅读Selenium入门讲义,本讲义将会重点介绍Selenium的入门知识以及Selenium的前置知识. 自动化测试的基础 在Selenium的课程以前,我们先回顾一下软件 ...

  10. Vue.js之组件（component）

    从结构上看,组件之于实例,就好比轮子之于汽车.从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用. 目录: 组件的注册 is的作用 ...