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;
}

Reaksi :
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar