首页 > 代码库 > css3学习笔记三

css3学习笔记三

2024-08-11 22:46:03   217人阅读

    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="http://www.mamicode.com/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="http://www.mamicode.com/image/ball.png"></dd>
        <dt>2</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>3</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>4</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>5</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>6</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>7</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>8</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>9</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        <dt>10</dt>
        <dd><img src="http://www.mamicode.com/image/ball.png"></dd>
        
    </dl>
  </body>
</html>
 


css3学习笔记三


联系
我们