css3学习笔记三
css3有些特殊的元素选择器这和jquery相似。效果图如下
黑色的小球是旋转3D效果不是特别明显,主要是学习的是对每个小球的控制。上代码。
<html>
<head>
<title>Ball.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
h1{font-size:16px;}
dl,dt,dd{padding:0;margin:0;}
dl{
position:relative;
width:778px;
height:612px;
background:url(image/guan.jpg) no-repeat left top;
}
dt{
position:absolute;
color:red;
font-size:20px;
font-weight:bold;
}
img{
width:50px;
position:absolute;
}
dd:nth-of-type(1) img{
left:370px;
top:280px;
z-index:1000;
}
dd:nth-of-type(2) img{
left:330px;
top:250px;
width:40px;
z-index:100;
}
dd:nth-of-type(3) img{
left:390px;
top:250px;
width:40px;
z-index:100;
}
dd:nth-of-type(4) img{
left:300px;
top:220px;
width:30px;
z-index:10;
}
dd:nth-of-type(5) img{
left:350px;
top:220px;
width:30px;
z-index:10;
}
dd:nth-of-type(6) img{
left:405px;
top:220px;
width:30px;
z-index:10;
}
dd:nth-of-type(7) img{
left:270px;
top:190px;
width:20px;
}
dd:nth-of-type(8) img{
left:320px;
top:190px;
width:20px;
}
dd:nth-of-type(9) img{
left:370px;
top:190px;
width:20px;
}
dd:nth-of-type(10) img{
left:420px;
top:190px;
width:20px;
}
dl{
-moz-transform-style:preserve-3d;
-moz-perspective:300px;
}
dd img{
animation:xuanzhuan 6s linear infinite;
}
@-moz-keyframes xuanzhuan{
0% {
-moz-transform: rotate(0deg) ;
}
33% {
-moz-transform: rotate(120deg) ;
}
66% {
-moz-transform: rotate(240deg) ;
}
100% {
-moz-transform: rotate(360deg) ;
}
}
</style>
</head>
<body>
<h1>css大战保龄球</h1>
<dl>
<dt>1</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>2</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>3</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>4</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>5</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>6</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>7</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>8</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>9</dt>
<dd><img src="data:image/ball.png"></dd>
<dt>10</dt>
<dd><img src="data:image/ball.png"></dd>
</dl>
</body>
</html>
css3学习笔记三的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
- Java IO学习笔记三
Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...
- NumPy学习笔记 三 股票价格
NumPy学习笔记 三 股票价格 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.&l ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
随机推荐
- block本质探寻二之变量捕获
一.代码 说明:本文章须结合文章<block本质探寻一之内存结构>和<class和object_getClass方法区别>加以理解: //main.m #import < ...
- 纯SVG实现的Loading动画,拿走不谢
转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/88833828 话不多说,直接上代码. ( 到这里看效果: http://www.v ...
- 用HTML编写淘宝页面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- PHP中时间戳和时区
时间戳 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. 时区 由于世界各国家与地区经度不同,地方时也有所不同,因此 ...
- 大数据入门第八天——MapReduce详解(四)本地模式运行与join实例
一.本地模式调试MR程序 1.准备 参考之前随笔的windows开发说明处:http://www.cnblogs.com/jiangbei/p/8366238.html 2.流程 最重要的是设置Loc ...
- Direct3D中 SetTextureStageState 函数
先说明几个概念: 1, Multipass(多通道) 将一个任务划分成几个阶段,由多个pass处理不同阶段,后续pass总是处理前一个pass的结果.例如复杂的光照方程可以分成几个pass来计 ...
- loj#121.「离线可过」动态图连通性
题面 话说#122怎么做啊 题解 我的\(\mathrm{LCT}\)水平极差,连最小生成树都快忘了,赶紧复习一下 做法和这篇是一样的 这道题还可以练习线段树分治 还可以练习ETT 果然是道吼题 代码 ...
- loadrunner使用过程中的问题记录
一.录制时选错应用类型,导致提示“loadrunner sockets proxy auto-starter mercury interactive corp.(2002)” 解决办法:重新选择正确的 ...
- MySQL ZIP Archive 5.7.17 安装方法
1.下载 2.解压缩 3.创建/修改配置文件 在MySQL安装目录下,新建my.ini,内容如下参考 [mysql] # 设置mysql客户端默认字符集 default-character-set=u ...
- Java将List<T>集合组装成树(Tree)树结构组装
把列表转换为树结构 /** * 把列表转换为树结构 * * @param originalList 原始list数据 * @param keyName 作为唯一标示的字段名称 * @return 组装 ...