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

Chào mọi người. Trong bài viết này Tuan Anh Blog sẽ cùng mọi người viết 1 đoạn Code CSS ngắn nhỏ nhưng lại khá hiệu quả tương đối lớn để chúng tá có thể nhanh chóng áp dụng dễ dàng vào website của chính mình.

music
Như ảnh Demo bên trên, chúng ta sẽ cùng nhau tiến hành tạo ra 1 biểu tượng âm nhạc sở hữu màu sắc thì bạn có thể tùy ý thay đổi, kích thước cũng vậy. Việc quan trọng cần làm là nên biết hiện nay là nội dung đoạn Code nó sẽ như thế nào và có khó hay không? Chúng ta cùng bắt đầu ngay thôi:

trước tiên, chúng ta sẽ bắt buộc cần đến một đoạn HTML mang 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 tùy biến CSS để sắp xếp cũng như trang trí cho các thẻ DIV bên trên. Tại phần Code CSS này các bạn có thể tùy biến thay đổi mã màu sắc, kích thước theo ý của các bạn.

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(https://tuananhblog.com.vn/wp-content/uploads/2016/12/play-icon-tuananhblog.png) top left / cover;
mask: url(https://tuananhblog.com.vn/wp-content/uploads/2016/12/play-icon-tuananhblog.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);
}
}

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

Bạn đang xem bài viết Tự tạo biểu tượng âm nhạc động với đoạn code nhỏ CSS

Add Comment