【哈理工实验二】HTML+CSS3 旋转齿轮特效

实现效果：

HTML部分代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>齿轮滚动</title><link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="back"><div class="content"><div class="img1"></div><div class="img2"></div><div class="img3"></div><div class="img4"></div><div class="img5"></div><div class="img6"></div><div class="img7"></div><div class="img8"></div><div class="img9"></div><div class="img10"></div><div class="img11"></div></div>
</div>
</body>
</html>

CSS部分代码：

*{margin: 0;padding: 0;
}
body,html{height: 100%;
}
/* 设置背景 */
.back{height: 100%;background: url("../images/bg_03.jpg") no-repeat center;
}
/* 对包含所有图片的div进行相对定位 */
.content{height:787px;width: 800px;position: relative;margin: 0 auto;
}
/* 对所有图片进行绝对定位 */
.content div{position: absolute;
}
/* 水滴 */
.img1{height: 50px;width: 50px;top: 191px;left: 391px;background: url("../images/icon-1.png") no-repeat center;animation:water 2s ease-in-out infinite;
}/* 左边第一大 */
.img7{height: 252px;width: 242px;top: 87px;left: 54px;background: url("../images/icon-7.png") no-repeat center;
}
/* 左边第二大 */
.img4{height: 148px;width: 144px;top: 203px;left: 272px;background: url("../images/icon-4.png") no-repeat center;
}
/* 左边最小 */
.img2{height: 75px;width: 73px;top: 103px;left: 4px;background: url("../images/icon-2.png") no-repeat center;
}
/* 左边身体的手 */
.img8{height: 50px;width: 50px;top: 286px;left: 268px;background: url("../images/icon-8.png") no-repeat center;
}
/* 右边第一大 */
.img6{height: 214px;width: 194px;top: 96px;left: 455px;background: url("../images/icon-6.png") no-repeat center;
}
/* 右边第二大 */
.img3{height: 116px;width: 121px;top: 54px;left: 600px;background: url("../images/icon-3.png") no-repeat center;
}
/* 右边最小 */
.img5{height: 117px;width: 112px;top: 245px;left: 403px;background: url("../images/icon-5.png") no-repeat center;
}
/* 右边男手 */
.img9{height: 50px;width: 50px;top: 310px;left: 513px;background: url("../images/icon-9.png") no-repeat center;
}
/* 右边女手 */
.img10{height: 50px;width: 50px;top: 242px;left: 619px;background: url("../images/icon-10.png") no-repeat center;
}
/* 人物背景 */
.img11{height: 709px;width: 788px;bottom: -2px;background: url("../images/img.png") no-repeat center;}
/* img2,img4,img6 顺时针 */
.img2,.img4,.img6{animation:rotate1 8s ease-in-out infinite;
}
/* img3,img5,img7 逆时针 */
.img3,.img5,.img7{animation:rotate2 8s ease-in-out infinite;
}/* 动画 顺时针 以Z轴为中心*/
@keyframes rotate1{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(360deg);}
}/* 动画 逆时针 以Z轴为中心*/
@keyframes rotate2{0%{transform:rotateZ(0deg);}100%{transform:rotateZ(-360deg);}
}/* 动画 水滴效果 */
@keyframes water{0%{/*变透明*/opacity: 0;}100%{/*向下移动*/top:600px;}
}

注意：

1、在对图片进行定位时，使用子绝父相：如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素以其父元素为标准来定位。如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。
2、对于水滴的下落，只需在0%时定义完全透明，100%时定义平移的位置即可。在相应的时间周期内，水滴可自行根据我们设置的元素进行运动。而其他不定义的元素取默认值。

喜欢就点个赞吧~

【哈理工实验二】HTML+CSS3 旋转齿轮特效相关推荐

可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
css3旋转边框特效
首先来可以来看看什么是css旋转边框,就像下面展示的一样是一个可以不停旋转的边框, 接下来就让我们来看看这个特效是怎么做出来的吧. 先说说大体思路,其实说是叫css旋转边框,其实所看到的并不是一个边框 ...
用matlab实现任意点图片的旋转_(实验二) --- 图像旋转变换---matlab实现
=摘要= 图像处理老师的课很"抽像",很会"跳"....刚讲了一点"RBG转灰度图",就马上进军图像的几何变换了,同时也带来了一个新的实验( ...
北京理工计算机实验二报告,北京理工大学计算机实验二报告表.doc
<北京理工大学计算机实验二报告表.doc>由会员分享,提供在线免费全文阅读可下载,此文档格式为doc,更多相关<北京理工大学计算机实验二报告表.doc>文档请在天天文库搜索. ...
20172319 实验二《树》实验报告
20172319 2018.11.04-11.12 实验二<树> 实验报告课程名称:<程序设计与数据结构> 学生班级:1723班学生姓名:唐才铭学生学号:20172319 ...
实验二建立基本的游戏场景
实验二建立基本的游戏场景一.实验内容: 1. 建立一个简单的游戏场景: 2. 通过摄像机实现场景的切换: 3. 使用不同的光照实现阴影效果: 二.实验目的: 1. 了解Ogre程序的工作方法和Og ...
实验三使用CSS3
实验三使用CSS3 一.实验目的 1.体会HTML编程: 2.掌握CSS3 二.实验内容创建如下图的框架页面,图片任选.下方左侧的菜单导航可以是静态的实现下方页面的css布局.图片任选要求首页 ...
实验二语音信号基本时频分析（待更改）
实验二语音信号基本时频分析 1.实验目的 1.1 学习与掌握语音信号的分帧及加窗 1.2 了解并分析信号加汉明窗及矩形窗后的差别 1.3 分析清音与浊音的时域及频谱域波形特征(画图.对比) 1.4 ...
数据库系统实验二作业-SQL实验报告
实验二交互式SQL 1(DDL语言实践) 1 实验目的 a) ****熟悉数据库的交互式SQL工具****.如:MySQL 查询分析器. b) *掌握SQL语言的DDL子语言,在MySQL环境下实现 ...