css3练习

.div{position: relative;border: 1px solid #111;width: 80px;height: 60px}
     .div div{width: 20px;height: 20px;border-radius:50%;background: #111;position: absolute;}
        .div div:nth-of-type(1){animation: aa .4s alternate infinite;top:0;left: 100px;}
        .div div:nth-of-type(2){animation: aa .4s ease 0.1s alternate infinite;top:5px;left: 114px;}
        .div div:nth-of-type(3){animation: aa .4s ease 0.2s alternate infinite;top:20px;left: 120px;}
        .div div:nth-of-type(4){animation: aa .4s ease 0.3s alternate infinite;top:35px;left: 114px;}
        .div div:nth-of-type(5){animation: aa .4s ease 0.4s alternate infinite;top:40px;left: 100px;}
        .div div:nth-of-type(6){animation: aa .4s ease .5s alternate infinite;top:35px;left: 86px;}
        .div div:nth-of-type(7){animation: aa .4s ease .6s alternate infinite;top:20px;left: 80px;}
        .div div:nth-of-type(8){animation: aa .4s ease .7s alternate infinite;top:5px;left: 86px;}
        @keyframes aa {
            from{transform: scale(.7);}to{transform: scale(.3);}
        }

<div class="div">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.circle{margin: 100px;height: 40px;width: 40px;position: absolute;}
        .circle p{height: 10px;width: 10px;border-radius: 50%;background: #000;position: absolute;animation: circlebox 1s infinite ease}
        .circle p:nth-of-type(1){left: 0;top: 0;animation-delay: .1s}
        .circle p:nth-of-type(2){right: 0;top: 0;animation-delay: .3s}
        .circle p:nth-of-type(3){right: 0;bottom: 0;animation-delay: .5s}
        .circle p:nth-of-type(4){left: 0;bottom: 0;animation-delay: .7s}
        .circle:nth-of-type(2){transform: rotate(45deg)}
        .circle:nth-of-type(2) p:nth-of-type(1){animation-delay: .2s}
        .circle:nth-of-type(2) p:nth-of-type(2){animation-delay: .4s}
        .circle:nth-of-type(2) p:nth-of-type(3){animation-delay: .6s}
        .circle:nth-of-type(2) p:nth-of-type(4){animation-delay: .8s}
        @keyframes circlebox {
            0%{transform: scale(0)}
            50%{transform: scale(1)}
            100%{transform: scale(0)}
        }

<div class="circle">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="circle">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

.tj{position: relative;animation: tjrotate 1s linear infinite;height: 100px;width: 100px;}
        .whiteb{ height: 100px; width: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;background: #fff;position: absolute;right: 0;top: 0;}
        .whiteu{ height: 50px; width: 50px;border-radius: 50%;background: #fff;position: absolute;left: 25px;top: 0}
        .blackb{ height: 100px; width: 100px;border-radius: 50%;background: #000;}
        .blacku{ height: 50px; width: 50px;border-radius: 50%;background: #000;position: absolute;left: 25px;top: 50px;}
            .blacku1{ height: 20px; width: 20px;border-radius: 50%;background: #000;position: absolute;left: 40px;top: 15px;}
            .whiteu1{ height: 20px; width: 20px;border-radius: 50%;background: #fff;position: absolute;left: 40px;top: 65px;}
    @keyframes tjrotate {
        from{transform: rotate(0)}to{transform: rotate(360deg)}
    }

<div class="tj"> 
    <div class="blackb"></div>
    <div class="whiteb"></div>
    <div class="whiteu"></div>
    <div class="blacku"></div>
    <div class="whiteu1"></div>
    <div class="blacku1"></div>
</div>

.zs{margin: 0 auto;width: 600px;position: relative;height: 200px}
        .zs div{height: 200px;width: 50px;left: 50%;transform-origin: center bottom;box-shadow: 2px 2px 2px #222}
        .zs div:nth-of-type(1){background: #0f0;position: absolute;animation: move1 1s infinite alternate;}
        .zs div:nth-of-type(2){background: #00f;position: absolute;animation: move2 1s infinite alternate;}
        .zs div:nth-of-type(3){background: #f00;position: absolute;animation: move3 1s infinite alternate;}
        .zs div:nth-of-type(4){background: #f00;position: absolute;animation: move4 1s infinite alternate;}
        .zs div:nth-of-type(5){background: #f00;position: absolute;animation: move5 1s infinite alternate;}
        .zs div:nth-of-type(6){background: #f00;position: absolute;animation: move6 1s infinite alternate;}
    @keyframes move1 {from{transform: rotate(0);opacity: 0;}to{transform: rotate(15deg);}opacity: 1;}
    @keyframes move2 {from{transform: rotate(0);opacity: 0;}to{transform: rotate(30deg);opacity: 1;}}
    @keyframes move3 {from{transform: rotate(0);opacity: 0;}to{transform: rotate(45deg);opacity: 1;}}
    @keyframes move4 {from{transform: rotate(0);opacity: 0;}to{transform: rotate(60deg);opacity: 1;}}
    @keyframes move5 {from{transform: rotate(0);opacity: 0;}to{transform: rotate(75deg);opacity: 1;}}
    @keyframes move6 {from{transform: rotate(0);}to{transform: rotate(90deg);}}

<div class="zs"> 
    <div>6</div>
    <div>5</div>
    <div >4</div>
    <div>3</div>
    <div>2</div>
    <div>1</div>
</div>

.divh{height: 100px;width: 100px;background: url("../img/1.jpg");position: relative;overflow: hidden;}
        .divh div{height: 30px;width: 30px;transition:all 1s}
        .divh div:nth-of-type(1){background: url("../img/2.jpg") -100px -100px;position: absolute;top:50px;left: -30px;}
        .divh:hover div:nth-of-type(1){left: 50px;top:50px;}
        .divh div:nth-of-type(2){background: url("../img/3.jpg") -100px -100px;position: absolute;top:50px;right:-30px;}
        .divh:hover div:nth-of-type(2){right: 50px;top:50px;}
        .divh div:nth-of-type(3){background:#222;position: absolute;opacity: 0;height: 100px;width: 100px;}
        .divh:hover div:nth-of-type(3){opacity: .5;}

<div class="divh"> 
    <div></div>
    <div></div>
    <div></div>
</div>

.listbox{width: 400px;margin: 20px auto;}
        .listbox .divs{position: relative;}
        .listbox .divs a{display: block; height: 30px;background: linear-gradient(#bbb,#999);border-radius: 5px;
　　　　　　　　　　 　　　　line-height: 30px;color: #111;padding-left: 10px;text-decoration: none;}
        .listbox .divs a:hover{background: linear-gradient(#0f0,#080);color: #fff}
边框写三角形
.listbox .divs span{height: 0;width: 0;right: 5px;position: absolute;top: 13px;border-right: 5px solid rgba(0,0,0,0);
　　　　　　　　　　　　border-bottom: 5px solid transparent;border-top: 5px solid white;border-left: 5px solid transparent;}
        .listbox .divs p{overflow:auto;height:0;padding-left:10px;margin: 5px 0;transition: all .5s;}
        /* 当前活动窗口:target伪类 */
        .listbox .divs:target p{height: 100px;}
        .listbox .divs:target span{border-top: 5px solid transparent;border-left: 5px solid white;top: 10px;}
        .listbox .divs:target a{background: linear-gradient(#0f0,#080);color: #fff}

<div class="listbox">
        <div class="divs" id="list1"> 
            <a href="#list1">Brand</a><span></span>
            <p>     There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
            May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
            The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.
            </p>
        </div>
        <div class="divs" id="list2"> 
            <a href="#list2">Brand</a><span></span>
            <p>     There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
            May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
            The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.
            </p>
        </div>
        <div class="divs" id="list3"> 
            <a href="#list3">Brand</a><span></span>
            <p>     There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
            May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
            The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.
            </p>
        </div>
    </div>

.nav{height: 40px;width: 1000px;overflow: hidden;border: 1px solid #333;margin: 0 auto;}
    .nav ul{list-style: none;}
        .nav ul li{float: left;height: 40px;width: 110px;}
        .nav ul li a{line-height: 40px;border-right: 1px dashed #888;display: block;transition: all .5s;text-decoration: none;padding-left:30px;background: url("../img/navbg.png") no-repeat; }
        .nav ul li:nth-of-type(1):hover a{background-position: 5px -70px;}
        .nav ul li:nth-of-type(1) a{background-position: 5px -35px;}

<div class="nav">
        <ul>
            <li><a href="#">我的主页</a></li>
            <li><a>我的主页</a></li>
            <li><a>我的主页</a></li>
            <li><a>我的主页</a></li>
        </ul>
</div>