Windget Floating Animation Bằng CSS

Cũng lâu rồi mình chưa viết bài về thủ thuật blog mấy bài trước mình thường viết bằng nhũng mã hay code đã được seach console hay Google developer tích hợp sẵn , nên hôm nay đổi mới xíu mình xin chia sẻ đến các bạn một windget cá nhân cũng khá đẹp của bác Mario Duarte share trên code open mình đem về share lại nhé.

 Các bước thực hiện

Bước 1 : thêm code css vào trước  </b:skin>

body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: rgb(26, 188, 156);
background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
}

h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}

p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}

@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 100%; height: auto; }
}
.content {
width: 100%;
max-width: 600px;
padding: 20px 40px;
box-sizing: border-box;
text-align: center;
}

 Các bạn thay những chỗ mình tô màu đỏ sau cho phù hợp với blog của bạn là được ( color đổi màu windget, width kích thước windget)
Bước 2 : các bạn edit lại đôi chút đoạn html mà mình tô đỏ sau cho phù hợp với bạn là được .

<div class="container">
<div class="avatar">
<a href="https://codepen.io/">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/skytsunami.png" alt="Skytsunami" />
</a>
</div>
<div class="content">
<h1>Lê Minh Út</h1>
<p>
<span><a href="https://twitter.com/leminhut" target="_blank"><i class="fa fa-twitter"></i></a></span>
<span><a href="https://github.com/leminhut/" target="_blank"><i class="fa fa-github"></i></a></span>
<span><a href="https://bitbucket.org/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>
<span><a href="https://codepen.io/" target="_blank"><i class="fa fa-codepen"></i></a></span>
</p>
<p>út đẹp trai</p>
</div>
</div>

 Lưu ý : bạn có thể đổi thuộc tính class thành những icon fontawesome mạng xã hội mà bạn đang dùng. Xem demo Tại đây

 Lời kết

Chúc các bạn thành công nhé , cảm ơn các bạn đã xem bài viết của mình

Baca juga