Code biểu tượng âm nhạc động bằng HTML và CSS

Code biểu tượng âm nhạc với hiệu ứng chuyển động liên tục. Các bạn có thể sử dụng biểu tượng này cho các dự án làm website âm nhạc, phần mềm hay ứng dụng âm nhạc của mình. Về màu sắc, bạn có thể tùy biến theo nhu cầu dễ dàng bằng việc chỉnh sửa CSS.

Code biểu tượng âm nhạc động bằng HTML và CSS

Như thường lệ, Blog Lại Văn Đức sẽ chia sẻ mẫu Code HTML và CSS để bạn có thể sử dụng. Trong đoạn Code được chia sẻ bên dưới có hình ảnh biểu tượng âm nhạc. Hình ảnh này được lưu trên imgur, bạn nên tải về và up lên hosting của mình để đảm bảo ảnh không bị lỗi.

Ngay bên dưới là ví dụ hoạt động của hiệu ứng này.

Code biểu tượng âm nhạc HTML

Đầu tiên chúng ta sẽ có bộ khung HTML cho mẫu sản phẩm này.

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

Code CSS hoàn thiện sản phẩm

Phần hồn của bất kỳ hiệu ứng nào cũng được sử dụng CSS. Ngay bên dưới là toàn bộ Code CSS sử dụng trong sản phẩm này. Như đã nhắc bên trên, bạn nên tải ảnh về và up lên hosting 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(https://i.imgur.com/RlyofWb.png) top left / cover;
mask: url(https://i.imgur.com/RlyofWb.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

CSS luôn mang đến cho chúng ta rất nhiều bất ngờ về khả năng tùy biến đa dạng. Học lập trình, sự sáng tạo rất quan trọng và để sáng tạo thì cách dễ nhất là tham khảo những dự án khác. Mỗi sản phẩm hay dự án được Blog Lại Văn Đức chia sẻ sẽ giúp bạn có thêm ý tưởng trong công việc.

Chắc chắn rằng khi bạn học HTML hay CSS, bạn sẽ chỉ được học về những thẻ cơ bản.  Còn khi áp dụng vào thực tế nhu cầu công việc và nhu cầu khác hàng. Bạn sẽ cần tìm hiểu thêm rất nhiều điều. Đây có thể gọi là sự Nâng Cao trong quá trình học tập và sự sáng tạo trong quá trình học hỏi.

Ví dụ như trong bài viết này mình chia sẻ code biểu tượng âm nhạc động bằng HTML và CSS. Tuy nhiên, bạn đừng nghĩ rằng hiệu ứng này chỉ để sử dụng cho biểu tượng âm nhạc trong ví dụ này. Bạn hãy liên tưởng đến dự án mình đang làm và áp dụng hiệu ứng này cho bất kỳ thành phần nào trong dự án của bạn mà bạn thấy phù hợp.

Cuối cùng, chúc bạn thành công trong công việc và cuộc sống.