Animasi Speaker Aktif dengan CSS3

Sound System dengan CSS3


Hanya dengan CSS kita bisa bikin Animasi... So Coba lihat hasil ekplorasi saya (dalam rangka belajar), menurut anda apa ini?.. meskipun masih belum maksimal.. mudah mudahan anda semua berminat untuk mempelajarinya......

<body>
    <div class="box">
        <div class="bulat">
            <div class="borderbulat"></div>
            <div class="borderbulat2"></div>
            <div class="borderbulat3"></div>
            <div class="innerbulat">
                <p>Boom</p>
            </div>
        </div>
        <div class="bulatb">
            <div class="borderbulatb"></div>
            <div class="borderbulatb3"></div>
            <div class="innerbulatb"></div>
        </div><a class="name" href="http://info-kmu.blogspot.com/">Info [K-moe]</a>

        <div class="tombol"> <span></span><span></span><span></span><span></span>
        </div>
    </div>
</body>

body {
    background:#292929;
}
.name {
    color: #1F1F1F !important;
    font-size: 20px;
    Text-decoration: none;
    text-shadow: 1px 1px #424242;
    background: #222;
    padding: 5px 10px;
    box-shadow: inset 2px 2px 2px #1a1a1a;
    -webkit-box-shadow: inset 2px 2px 2px #1a1a1a;
}
.box {
    text-align:center;
    width: 200px;
    height: 400px;
    margin: 0 auto;
    border: 10px solid #1F1F1F;
    box-shadow: inset 2px 2px 2px #1a1a1a;
    -webkit-box-shadow: inset 2px 2px 2px #1a1a1a;
}
.bulat,.bulatb {
    width:100px;
    height:100px;
    position:relative;
    margin: 50px auto;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius:100px;
    box-shadow: inset 1px 1px 1px #1a1a1a;
    -webkit-box-shadow: inset 1px 1px #1a1a1a;
}
.borderbulat2 {
    position:absolute;
    border-radius:200px;
    width:100px;
    height:100px;
    background:#1B1B1B;
}
.borderbulat3,.borderbulatb3 {
    background: #161616;
    background: -moz-linear-gradient(top, #161616 0%, #3d3d3d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0c0c0c), color-stop(100%, #313131));
    background: -webkit-linear-gradient(top, #0C0C0C 0%, #313131 100%);
    background: -o-linear-gradient(top, #161616 0%, #3d3d3d 100%);
    background: -ms-linear-gradient(top, #161616 0%, #3d3d3d 100%);
    background: linear-gradient(to bottom, #0C0C0C 0%, #313131 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#3d3d3d', GradientType=0);
    position: absolute;
    top: -25px;
    right: -25px;
    bottom: -25px;
    left: -25px;
    border-radius: 200px;
    z-index: -2;
    box-shadow: inset 1px 1px 1px #1a1a1a;
    -webkit-box-shadow: inset 1px 1px #1a1a1a;
}
 
.borderbulat,.borderbulatb {
    color: #fff;
    background-color: #ccc;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    border-radius: 110px;
    background: #575b60;
    background: -moz-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #575b60), color-stop(100%, #000000));
    background: -webkit-radial-gradient(center, ellipse cover, #585858 1%, #585858 100%);
    background: -o-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%);
    background: -ms-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%);
    background: radial-gradient(ellipse at center, #4E4E4E 1%, #030303 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575b60', endColorstr='#000000', GradientType=1);
    box-shadow: inset 1px 1px 1px #1a1a1a;
    -webkit-box-shadow: inset 1px 1px #1a1a1a;
}
 
.innerbulat,.innerbulatb {
    color: #252525;
    background-color: #2E2E2E;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    border-radius: 110px;
    background: #535353;
    background: -moz-radial-gradient(center, ellipse cover, #535353 1%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #535353), color-stop(100%, #000000));
    background: -webkit-radial-gradient(center, ellipse cover, #575b60 1%, #000000 100%);
    background: -o-radial-gradient(center, ellipse cover, #535353 1%, #000000 100%);
    background: -ms-radial-gradient(center, ellipse cover, #535353 1%, #000000 100%);
    background: radial-gradient(ellipse at center, #535353 1%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575b60', endColorstr='#000000', GradientType=1);
    box-shadow: inset 1px 1px 1px #1a1a1a;
    -webkit-box-shadow: inset 1px 1px #1a1a1a;
}

.innerbulat:active,.innerbulatb:active {
    color:#fff;
    background: #373a3d;
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #373a3d 1%, #000000 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #373a3d), color-stop(100%, #000000));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #373a3d 1%, #000000 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #373a3d 1%, #000000 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #373a3d 1%, #000000 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, #373a3d 1%, #000000 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373a3d', endColorstr='#000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
.innerbulat p {
    text-align:center;
    margin-top:40%;
    font-size:18px;
    font-family:sans-serif;
    font-weight:bolder;
    text-shadow:-1px -1px 0px #444;
}
.bulatb {
    width:50px;
    height:50px;
    position:relative;
    margin: 70px auto;
}
/*------------------------------------*\
    $ANIMATION
\*------------------------------------*/
 .innerbulat {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
 .innerbulatb {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 0.8s;
    -webkit-animation-duration: .8s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;
    }
}

.tombol {
    margin-left: 73px;
    position: absolute;
    margin-top: 12px;
}
span {
    cursor: pointer;
    background: #222;
    display: block;
    height: 10px;
    width: 10px;
    border-radius: 25px;
    float: left;
    box-shadow: inset 1px 1px 1px #1a1a1a;
    -webkit-box-shadow: inset 1px 1px #1a1a1a;
    margin-left: 3px;
}

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel