css3练习

读条的实现1

.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:;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>

读条的实现2

.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:;top:;animation-delay: .1s}
        .circle p:nth-of-type(2){right:;top:;animation-delay: .3s}
        .circle p:nth-of-type(3){right:;bottom:;animation-delay: .5s}
        .circle p:nth-of-type(4){left:;bottom:;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:;top:;}
        .whiteu{ height: 50px; width: 50px;border-radius: 50%;background: #fff;position: absolute;left: 25px;top:}
        .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:;}to{transform: rotate(15deg);}opacity: 1;}
    @keyframes move2 {from{transform: rotate(0);opacity:;}to{transform: rotate(30deg);opacity:;}}
    @keyframes move3 {from{transform: rotate(0);opacity:;}to{transform: rotate(45deg);opacity:;}}
    @keyframes move4 {from{transform: rotate(0);opacity:;}to{transform: rotate(60deg);opacity:;}}
    @keyframes move5 {from{transform: rotate(0);opacity:;}to{transform: rotate(75deg);opacity:;}}
    @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>

div hover以后，框内出现移动图标

.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:;height: 100px;width: 100px;}
        .divh:hover div:nth-of-type(3){opacity: .5;}

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

手风琴效果 一定要有a的锚点作用，否则没有div的target伪类效果，加上边框写三角形

.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:;width:;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:;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导航栏案例

.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>