html5+css3图片旋转特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#img1{width:280px;height: 279px;border-radius:140px;-webkit-animation:run 6s linear 0s infinite;}#img1:hover{-webkit-animation-play-state:paused;}@-webkit-keyframes run{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}</style>
</head>
<body>
<div ><img id="img1" src="C:\Users\hp\Desktop\1.jpg" /></div>
</body>
</html>
1.id为img1的图片通过设置圆角使图片为圆形显示，src为路径
- 代码中关键的部分是怎样使得图片无限转动。 我们可以使用 -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: 动画执行方向。 - @-webkit-keyframes 中的from和to 两个属性，就是指定动画执行的初始值和结束值。
- -webkit-animation-play-state:paused; 暂停动画的执行。
html5+css3图片旋转特效的更多相关文章
- CSS3图片旋转特效
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- 9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- 基于HTML5/CSS3图片网格动画特效
现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...
- 10款让人惊叹的HTML5/jQuery图片动画特效
1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫 ...
- 7款外观迷人的HTML5/CSS3 3D按钮特效
1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...
- 40免费的 jQuery & CSS3 图片热点特效
jQuery CSS3 形象悬停效果可能是一个优秀的网站项目中添加的效果.这个特殊的收集是大约50个 jQuery CSS3 形象徘徊影响最近出版的.这些图像悬停效果可以作为一个有效的和创造性的方式添 ...
- css3图片旋转
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- html5 css3 进度条特效
https://www.html5tricks.com/tag/css3%E8%BF%9B%E5%BA%A6%E6%9D%A1/page/3
随机推荐
- tomcat常见错误处理
1 .java.lang.IllegalArgumentException: Document base /XXX/tomcat/webapps/manager does not exist 解决方法 ...
- SDK 上报信息 史上最全 持续更新
SDK 上报信息 史上最全 持续更新 接入SDK总会遇到各种需求,有些SDK巴不得把玩家信息全部上报到他们服务器! 以下是我接SDK遇到的, 欢迎大家补全. 上报事件 注册(按道理这个应该是SDK的功 ...
- 使用反射功能在Unity运行状态通过Inspector面板修改字段和调用方法
使用反射功能在Unity运行状态通过Inspector面板修改字段和调用方法 效果展示 一个很简单的组件脚本 运行状态在Inspector面板可以随便修改字段和调用方法 方法调用日志 设计由来 最近在 ...
- MySQL笔记(4)---表
1.前言 上一章记录了MySQL中的一些文件组成,以及相关作用和参数配置,本章开始记录深层次的存储结构,以便更好理解MySQL的设计. 2.索引组织表 InnoDB中,表都是根据主键顺序组织存放的,这 ...
- 【nodejs】文件上传demo实现
文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...
- 全网最详细的Sublime Text 3的安装Package Control插件管理包（图文详解）
不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...
- 散列算法－SHA
一种生成信息摘要的算法.主要用于数据一致性和完整性的校验 SHA算法分很多版本,最大的分类是SHA-1和SHA-2.SHA-2包括很多子版本,SHA-224,SHA-256,SHA-384,SHA-5 ...
- iOS自动布局——Masonry详解
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环 ...
- tar 压缩解压
tar命令 tar可以为文件和目录创建档案.利用tar,用户可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件, 或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现在,用户可 ...
- Linux QT 连接 Sqlite数据库
#include <QApplication> #include <QDebug> #include <QSqlQuery> #include <QSqlDa ...