css3有些特殊的元素选择器这和jquery相似。效果图如下

黑色的小球是旋转3D效果不是特别明显，主要是学习的是对每个小球的控制。上代码。

<!DOCTYPE html>
<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学习笔记三的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  3. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

  4. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  5. java之jvm学习笔记三(Class文件检验器)

    java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...

  6. VSTO学习笔记(三) 开发Office 2010 64位COM加载项

    原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...

  7. Java IO学习笔记三

    Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...

  8. NumPy学习笔记 三 股票价格

    NumPy学习笔记 三 股票价格 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.&l ...

  9. Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

随机推荐

  1. 2017-2018-1 20155232 《信息安全系统设计基础》第十周课堂测试（ch06）补交

    # 2017-2018-1 20155232 <信息安全系统设计基础>第十周课堂测试(ch06)补交 上课时完成测试后在提交的时候,没有提交成功,进行补交. 1.下面代码中,对数组x填充后 ...

  2. 20145209刘一阳《JAVA程序设计》第五周课堂测试

    第五周课堂测试 1.下列关于内部类的说法,正确的是(ABD) A .其他类不可以用某个类的内部类声明对象. B .内部类字节码文件的名字格式是"外嵌类名$内部类名". C .内部类 ...

  3. BZOJ2428_均分数据_KEY

    题目传送门 这道题可以用C++的random_shuffle屮过去. random数列插入顺序,每次都插入数值和最小的那一组. #include <cmath> #include < ...

  4. BZOJ2439【中山市选2011】序列

    题面 题解 设$f[i]$表示将$[1,i]$修改为递增的最小代价, $g[i]$表示将$[i,n]$修改为递减的最小代价. $L[i]$表示将$[1,i]$修改为倒$\text V$的代价 $$ \ ...

  5. 由 Session 和 Cookie 的区别说起

    Session 和 Cookie 有什么区别? 最近面试被问到这个问题,和面试官一番讨论了解到面试官心里的答案后,我不太满意. 面对上面的问题,如果是刚毕业时的我,一定会毫不犹豫说出 Cookie 是 ...

  6. Docker与CI持续集成/CD(转)

    背景 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会 ...

  7. 第一道防线__SpringMVC配置拦截器

    这几天在公司自己开发一个小系统,但是系统的安全性也得考虑,起初没注意,赶急就光关心业务逻辑和实现效果.最后老大一出手,就把最严重的问题指出来了,他说你这根本没安全性可言,于是我试着将公司使用的spri ...

  8. 读书笔记：《HTML5开发手册》--figure、time、details、mark

    这是补充HTML5基础知识的系列内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四. ...

  9. 原生android（一）

    一.移动APP的几种类型 1.Native APP:基于智能手机操作系统,并使用原生程序编写运行的应用程序,有IOS,Android,Windows Phone8等系统 2.Web APP:运行在智能 ...

  10. python容器类型的协议

    1.协议(Protocols)与其他编程语言中的接口恒相似,它规定你哪些地方必须要定义,然而在python中的协议就显得不那么正式,事实上,在python中,协议更像是一种指南. 2.序列类型和映射类 ...