hmtl初学

hmtl+css实现小车轮子转动！

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	.car{
	width: 200px;
	height: 100px;
	border: 1px solid #000;
	position: relative;
	-webkit-animation: moveCar linear 5s forwards;
	}
	.wheel1,.wheel2{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	}
	.wheel1{
	position: absolute;
	left: 10px;
	bottom: -25px;
	}
	.wheel2{
	position: absolute;
	right: 10px;
	bottom: -25px;
	}
	@keyframes moveCar {
	0%{
	position: relative;
	left: 50px;
	-webkit-transform: rotate(0deg);
	}
	20%{
	position: relative;
	left: 100px;
	-webkit-transform: rotate(0deg);
	}
	40%{
	position: relative;
	left: 150px;
	-webkit-transform: rotate(0deg);
	}
	60%{
	position: relative;
	left: 200px;
	-webkit-transform: rotate(0deg);
	}
	80%{
	position: relative;
	left: 250px;
	-webkit-transform: rotate(0deg);
	}
	100%{
	position: relative;
	left: 250px;
	-webkit-transform: rotate(180deg);
	}
	}

	/------/
	.testWheel{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid #000;
	-webkit-animation: moveWheel linear 2s 3;
	}
	.testWheel .zhou{
	width: 100%;
	height: 0;
	border: 1px solid grey;
	position: absolute;
	top: 25px;
	}
	.testWheel .zhou:nth-child(2){
	-webkit-transform: rotate(45deg);
	}
	.testWheel .zhou:nth-child(3){
	-webkit-transform: rotate(90deg);
	}
	.testWheel .zhou:nth-child(4){
	-webkit-transform: rotate(135deg);
	}
	@keyframes moveWheel {
	from{
	-webkit-transform: rotate(0deg);
	}
	to{
	-webkit-transform: rotate(360deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="car">
	秦始皇
	<div class="testWheel wheel1">
	<div class="zhou"></div>
	<div class="zhou"></div>
	<div class="zhou"></div>
	<div class="zhou"></div>
	</div>
	<div class="testWheel wheel2">
	<div class="zhou"></div>
	<div class="zhou"></div>
	<div class="zhou"></div>
	<div class="zhou"></div>
	</div>
	</div>
	</body>
	</html>

时间： 2024-10-12 16:02:17

hmtl初学的相关文章

STM32初学Keil4编译时出现 Error:Failed to execute 'BIN40/Armcc'

一种是在系统开始--运行里输入cmd,查看armcc状态.详情见推文: http://blog.csdn.net/hicui/article/details/7350805(笔记记录,请勿见怪) 都没有问题的话,那么可以尝试: 在keil里的菜单栏依次选择Project->Manage->Components,Environment andBooks(CEB)(或者直接点击工具栏的图标), 然后在CEB里选择Folders/Extensions标签页,在RealView Folder里选择ke

mongodb 初学目录

mongodb 初学索引啦啦啦 MongoDB 教程 NoSQL 简介 MongoDB 简介 Windows 平台安装 MongoDB Linux平台安装MongoDB mongodb 在 Ubuntu系统上的安装及卸载 Mongodb启动命令mongod参数说明 Mac OSX 平台安装 MongoDB MongoDB 概念解析 MongoDB - 连接 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB 插入文档 MongoDB 更新文档 MongoDB 删除文档 M

初学ArcGIS API for JavaScript

初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的特别详细,在这里以笔记的形式来帮助自己加以理解和记忆. esri.css样式主要用于ESRI提供的小部件与组件,比如地图.信息框等.此外,还可以引用Dojo提供的样式表,Dojo提供了4组样式,分别是claro\tundra\soria以及nihilo,每种是一组定义用户界面的字体.颜色与大小等设置.在Arc

初学 Python（十一）——切片

初学 Python(十一)--切片初学 Python,主要整理一些学习到的知识点,这次是切片. #-*- coding:utf-8 -*- ''''' 切片 ''' L = ['name','age','sex','address','company'] #取前2个 print L[0:2] print L[:2] #取倒数第一个 print L[-1] #取后两个 print L[-2:] #取倒数第二个 print L[-2:-1] print len(L) #隔一个数取一次,从第一个数开

【Python】初学编程适合学Python？其有何用？

初学编程适合学Python?其有何用? 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多因素造成了,当然市场需求的重要因素.吴军博士对大数据流行的解释与python流行或许有些默契.数据一直以来都存在,只是在历史条件下,由于计算性能和技术发展的原因,与之匹配的数据处理技术还不是很先进,以至于很多数据被我们舍弃了.同样,python语言简洁流畅等多种优点,也会让第一次接触

初学jsp

编写网页的语言有ASP,PHP,JSP三种,但jsp是其中功能最强大,却也最复杂的语言,小学期在老师的带领下我初步认识了这种语言,虽然对这种语言有了初步的了解,但离精通还离得很远,很多时候都跟不上老师的节奏,第一次接触这门语言确实是一个很痛苦的过程,老师讲的东西也掌握的不是很好,但总算还是小有所获,我知道想掌握这门语言还有很长的一段路要走,在这里就分享一下我的初学心得. SP就是Java,只是它是一个特别的Java语言,加入了一个特殊的引擎,这个引擎将HTTPServlet这个类的一些对象自动进

Mysql初学入门

最近花了两个晚上研究了一下Mysql的初学应用,在此进行整理记录. 1.Windows系统下的安装我用的是win10系统,在http://dev.mysql.com/downloads/mysql/ 下载相应版本的Mysql,下载后进行解压即可. 下载好后,进行安装,安装及配置步骤参照http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html . 安装好后,在DOS下输入 net start mysql并回车会启动mysql服务

初学HTML

今天在MOOC上学了HTML基础中的基础有了点表面的认识很喜欢MOOC这样的教学方式赞一个下面是一些自己的笔记和感想: 准备考研现在感觉时间还算充裕想学点web前端开发基础下面是需要掌握的基础技术: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实

初学github

初学github 这两天初学了一下github,学会了如何在github上创建一个仓库,并向仓库中将写的程序push到仓库中.在这里做一个小结. git和github 首先说说什么是git什么是github. git Git是一个开源的分布式版本控制系统,它可以有效.高速的处理从很小到非常大的项目版本管理.相信很多人都有过这样的遭遇:我写好了一版代码,然后发现有个地方写的不太对,然后开始修改代码,改了一大片.改完之后运行,然后发现,修改之前的某个函数还需要用,这时候又不能疯狂ctrl+z退回去,