此实例可以应用到许多项目中,很实用,希望大家可以掌握。
效果图如下:
这个效果实现起来其实并不困难,代码清单如下:
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>document</title>
- <style type="text/css">
- #liu{
- width:280px;
- height: 279px;
- background: url(shishi.png) no-repeat;
- border-radius:140px;
- -webkit-animation:run 6s linear 0s infinite;
- }
-
- #liu:hover{
- -webkit-animation-play-state:paused;
- }
-
-
- @-webkit-keyframes run{
- from{
- -webkit-transform:rotate(0deg);
- }
- to{
- -webkit-transform:rotate(360deg);
- }
- }
-
- </style>
- </head>
- <body>
- <div id="liu"></div>
- </body>
- </html>
-
1. id为liu的div就是用来展示图片的区域,只不过这里的图片是使用的背景图片,并且通过设置圆角来达到圆形的效果。
2. 代码中关键的部分是怎样使得图片无限转动。 我们可以使用 -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: 动画执行方向。
3. @-webkit-keyframes 中的from和to 两个属性,就是指定动画执行的初始值和结束值。
4. -webkit-animation-play-state:paused; 暂停动画的执行。
以上就是本文的全部内容,希望对大家实现图片旋转特效有所帮助。
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
CSS知识点总结
css知识点总结一、什么是CSS?二、CSS的主要作用是什么2.1 CSS布局2.1.1 盒子模型欢迎使用Ma...
[阅读全文]
-
css的基础知识
初识css1、什么是css。css是英文Cascading Style Sheet的缩写,意思是层叠样式表。作用...
[阅读全文]
-
-
CSS总结
CSS总结css基础知识CSS:层叠样式表 Cascading Style Sheet学习CSS就是学习一堆的...
[阅读全文]
-
6-css样式
背景颜色background-color背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb背景图片bac...
[阅读全文]
-
-
前端工程化的意义
工程化不是某个具体的工具,工程化的核心是对项目整体的规划和架构解决的问题&带来的价值1.每次开启新项目,...
[阅读全文]
-
-
-
-
css2zj
标签分类男标签(块标签):独占一行,eg:div hn p ul ol li dt…可以设置宽高,如果不设,则默...
[阅读全文]
网友评论