css 3練習

リードの実装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: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>

リードバーの実装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: 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>6div>
    <div>5div>
    <div >4div>
    <div>3div>
    <div>2div>
    <div>1div>
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: 0;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: 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">Branda><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">Branda><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">Branda><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>