Tự Code biểu tượng âm nhạc động với CSS

4

Tự Code biểu tượng âm nhạc động với CSS – Chào các bạn. Trong bài viết này mình 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ự Code biểu tượng âm nhạc động với CSS tự code biểu tượng âm nhạc động với css - Tự Code biểu tượng âm nhạc động với CSS
Tự Code biểu tượng âm nhạc động với CSS

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 hiển thị ra bên ngoài 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.

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: url(http://www.laivanduc.com/wp-content/uploads/2015/07/play-icon-laivanduc.png) top left / cover;
  mask: url(http://www.laivanduc.com/wp-content/uploads/2015/07/play-icon-laivanduc.png) top left / cover;
}

.back {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: -webkit-linear-gradient(top, #FF694C 0%, #F15378 40%, #E053D5 50%, #B54BEB 60%, #5B86EE 70%, #00EEEB 100%);
  background: linear-gradient(top, #FF694C 0%, #F15378 30%, #E053D5 40%, #B54BEB 60%, #5B86EE 70%, #00EEEB 100%);
  
  -webkit-filter: saturate(0.5);
  filter: saturate(0.5);
  -webkit-transform: scale(1) rotate(-25deg);
  transform: scale(1) rotate(-25deg);
  -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(-25deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-filter: saturate(1);
    -webkit-transform: scale(1.05) rotate(-25deg);
  }
}

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

Thế Thôi

Có vẻ như chúng ta đã xong rồi đấy. Nếu bạn không biết phải làm thế nào để cho đoạn Code này chạy được thì xem bài viết này: Hướng dẫn sử dụng Code trên Blog Lại Văn Đức

Bây giờ mời các bạn xem Demo bên dưới và cùng thảo luận nhé:

4 Comments
  1. Kim phượng nói

    Đẹp và chất quá. Thank bạn nhé.

  2. Nam Phạm nói

    Không phải mình bắt lỗi nhưng mình hay đọc kỹ các bài của bạn nên phát hiện Demo bạn viết nhầm thành Deno hi . Thanks vì chia sẻ nhé !

    1. Lại Văn Đức nói

      😀 Thanks bác nhé. chắc tại lúc đó em buồn ngủ. 😀

  3. dong nói

    bác tỉ mỉ kinh bái phục quá 

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.