Tạo Biểu Tượng Âm Nhạc Động Với CSS

Bm_VQT

Cách đây 8 năm trước

Chào các bạn. Trong bài viết này tôi sẽ cùng các bạn viết một đoạn Code CSS nhỏ nhưng hiệu quả khá to lớn để các bạn có thể áp dụng dễ dàng vào website của mình.

Tải ảnh gốc

Tự Code biểu tượng âm nhạc động với CSS
Như hình Demo bên trên, chúng ta sẽ cùng nhau thực hiện một biểu tượng âm nhạc với màu sắc thì bạn có thể tự thay đổi, kích thước cũng vậy. Việc quan trọng cần biết bây giờ là nội dung đoạn Code nó sẽ như thế nào? Chúng ta có thể bắt đầu ngay thôi:

Đầu tiên, chúng ta sẽ cần đến một đoạn HTML với nội dung cho các thẻ DIV như sau:

<div class="centered back"></div>

<div class="centered face"></div>

 

<div class="centered headphones">

  <div class="centered band"></div>

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

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

</div>

 

<div class="centered music">

  <div class="group1">

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

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

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

  </div>

  <div class="group2">

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

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

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

  </div>

</div>

Tiếp đến, chúng ta cần CSS để bố trí và trang trí cho các thẻ DIV bên trên. Tại Code CSS này các bạn hãy thay đổi màu sắc, kích thước theo ý của mình với code bên dưới

body {

  margin: 0;

  overflow: hidden;

}

 

.centered {

  position: absolute;

  margin: auto;

  top:0; bottom:0; left:0; right:0;

}

 

.face {

  width: 150px;

  height: 150px;

  background-color: #EBEBEB;

  border-radius: 50%;

  -webkit-mask: url0 top left / cover;

  mask: url0 top left / cover;

}

 

.back {

  width: 160px;

  height: 160px;

  border-radius: 50%;

  background: -webkit-linear-gradienttop,#FF694C0;

  background: linear-gradienttop,#FF694C0;

  

  -webkit-filter: saturate(0.5);

  filter: saturate(0.5);

  -webkit-transform: scale(1) rotate-25;

  transform: scale(1) rotate-25;

  -webkit-animation: spin 0.3s infinite linear alternate;

  animation: spin 0.3s infinite linear alternate;

}

 

.headphones {

  width: 320px;

  height: 120px;

  -webkit-animation: bounce 0.3s linear infinite alternate;

  animation: bounce 0.3s linear infinite alternate;

}

 

.earmuff {

  float: left;

  width: 20px;

  height: 120px;

  background: #FA7B57;

  border-radius: 50% 10px 10px 50%;

  border-right: #FA8E57 solid 20px;

  

}

.earmuff:nth-child(2){

  float: right;

  -webkit-transform: rotate(180deg);

  transform: rotate(180deg);

}

 

.band {

  width: 320px;

  height: 300px;

  border-radius: 50%;

  background-color: trnasparent;

  border-top: #FA7B57 solid 40px;

  z-index: -99;

}

 

.music {

  width: 450px;

  height: 50px;

}

.group1{

  float: left;

}

.group2{

  float: right;

  -webkit-transform: rotate(180deg);

}

.wave {

  display: inline-block;

  width: 10px;

  height: 50px;

  opacity: 0.2;

  background-color: #FA7B57;

  -webkit-animation: wave 0.3s 0.2s linear infinite alternate;

  animation: wave 0.3s 0.2s linear infinite alternate;

}

.wave:nth-child(2) {

  -webkit-animation: wave 0.3s 0.1s linear infinite alternate;

  animation: wave 0.3s 0.1s linear infinite alternate;

}

.wave:nth-child(3) {

  -webkit-animation: wave 0.3s linear infinite alternate;

  animation: wave 0.3s linear infinite alternate;

}

 

@keyframes spin {

  to {

    -webkit-filter: saturate(1);

    -webkit-transform: scale(1.05) rotate-25;

  }

}

 

@-webkit-keyframes spin {

  to {

    -webkit-filter: saturate(1);

    -webkit-transform: scale(1.05) rotate-25;

  }

}

 

@keyframes bounce {

  to {

    -webkit-transform: scale(1.05);

  }

}

 

@-webkit-keyframes bounce {

  to {

    -webkit-transform: scale(1.05);

  }

}

 

@-webkit-keyframes wave {

  to {

    opacity: 1;

    -webkit-transform: scaleY(2);

  }