VNIT

Chia Sẻ Giá Trị


Liên Hệ Dịch Vụ

29 tháng 8, 2018

Windget Floating Animation Bằng CSS

Vnit Tech
tháng 8 29, 2018 - 29 tháng 8, 2018

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

Dịch Vụ Thiết Kế WebSite


Bán hàng đảm bảo Thiết Kế Web

Chúng tôi cung cấp website theo mẫu , thiết kế web Theo Yêu Cầu

Cam kết giá tốt Cam kết giá tốt

Website Trên Blogvnit Cam Kết Với Giá Tốt Nhất Hiện Nay

Giao hàng toàn quốc Bảo Hành , Fix Lỗi

Bảo hành hỗ trợ cài đặt miễn phí đến khi hợp ý khách hàng

Dịch vụ hỗ trợ 24/7 Dịch vụ hỗ trợ 24/7

Đội ngũ nhân viên của blogvnit Hân hạnh đồng hành cùng bạn

BÁO GIÁ DỊCH VỤ