Ảnh Demo. |
Lời đầu.
Demo
Demo
Cách làm:
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/5.0.6/css/font-awesome.css'>
Bước 2: Các bạn thêm CSS này vào trước thẻ b:skin :
Bước 3: Các bạn thêm cái HTML này vào nơi muốn chèn là sẽ có cái menu như trên Demo.menu-item, .menu-open-button { background: #EEEEEE; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; color: #FFFFFF; text-align: center; line-height: 80px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .menu-open { display: none; } .lines { width: 25px; height: 3px; background: #596778; display: block; position: absolute; top: 50%; left: 50%; margin-left: -12.5px; margin-top: -1.5px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .line-1 { -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); } .line-2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .line-3 { -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .menu-open:checked + .menu-open-button .line-1 { -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .menu-open:checked + .menu-open-button .line-2 { -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); transform: translate3d(0, 0, 0) scale(0.1, 1); } .menu-open:checked + .menu-open-button .line-3 { -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); transform: translate3d(0, 0, 0) rotate(-45deg); } .menu { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80px; height: 80px; text-align: center; box-sizing: border-box; font-size: 26px; } .menu-item:hover { background: #EEEEEE; color: #3290B1; } .menu-item:nth-child(3) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(4) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(5) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(6) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(7) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(8) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(9) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-open-button { z-index: 2; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); } .menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-open:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -104.99997px, 0); transform: translate3d(0.08361px, -104.99997px, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(90.9466px, -52.47586px, 0); transform: translate3d(90.9466px, -52.47586px, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(90.9466px, 52.47586px, 0); transform: translate3d(90.9466px, 52.47586px, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 104.99997px, 0); transform: translate3d(0.08361px, 104.99997px, 0); } .menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-90.86291px, 52.62064px, 0); transform: translate3d(-90.86291px, 52.62064px, 0); } .menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-91.03006px, -52.33095px, 0); transform: translate3d(-91.03006px, -52.33095px, 0); } .menu-open:checked ~ .menu-item:nth-child(9) { transition-duration: 780ms; -webkit-transition-duration: 780ms; -webkit-transform: translate3d(-0.25084px, -104.9997px, 0); transform: translate3d(-0.25084px, -104.9997px, 0); } .item-1 { background-color: #669AE1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-1:hover { color: #669AE1; text-shadow: none; } .item-2 { background-color: #70CC72; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-2:hover { color: #70CC72; text-shadow: none; } .item-3 { background-color: #FE4365; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-3:hover { color: #FE4365; text-shadow: none; } .item-4 { background-color: #C49CDE; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-4:hover { color: #C49CDE; text-shadow: none; } .item-5 { background-color: #FC913A; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-5:hover { color: #FC913A; text-shadow: none; } .item-6 { background-color: #62C2E4; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .item-6:hover { color: #62C2E4; text-shadow: none; }
<nav class="menu"> <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" /> <label class="menu-open-button" for="menu-open"> <span class="lines line-1"></span> <span class="lines line-2"> </span> <span class="lines line-3"></span> </label> <a href="#" class="menu-item item-1"> <i class="fa fa-anchor"></i> </a> <a href="#" class="menu-item item-2"> <i class="fa fa-coffee"></i> </a> <a href="#" class="menu-item item-3"> <i class="fa fa-heart"></i> </a> <a href="#" class="menu-item item-4"> <i class="fa fa-microphone"></i> </a> <a href="#" class="menu-item item-5"> <i class="fa fa-star"></i> </a> <a href="#" class="menu-item item-6"> <i class="fa fa-diamond"></i> </a> </nav>
Hello :v
Trả lờiXóaHelloooo :3
XóaRất đẹp đấy em, mà ko tính đổi temp à?
Trả lờiXóaEm không biết nên đổi Template nào!
XóaNăm mới khởi đầu mới lại nha em.
XóaDạ, cảm ơn anh!
Xóaok lắm em, đẹp nữa. Giao diện mobile chưa co dãn tốt nha
Trả lờiXóaAnh Bảo ưi? Anh có Template nào không?
Xóamuốn temp anh đang xài không anh cho nè kkk
Xóaanh đặt lk lại cho em rồi nha
XóaDạ, template anh đang xài, cho em nhận, nhưng có kì quá không anh? Em nhận được, hơi ngại.
Xóakhông sao đâu em :p coi như quà chúc mừng em come kkk cmt mail anh send cho
XóaĐẹp đó em
Trả lờiXóaCảm ơn anh nhiều...
Xóahay hay nha
Trả lờiXóaOke ông.. Hehe
XóaMừng em comback
Trả lờiXóaDạ chào anh!
XóaAnh đặt liên kết cho em rồi nhé, thông cảm vì liên kết hơi thấp nha e
Trả lờiXóaquay lại cái temp cũ ngày xưa ngon đấy :)
Trả lờiXóaanh đặt lk rồi đó e nhé
Trả lờiXóaTemp này vẫn dễ nhìn
Trả lờiXóaCố gắng phát triển Blog thêm bạn nhé!
Trả lờiXóaChắc quên mình rồi... -_-
Trả lờiXóaAwesome article. Good luck for you.
Trả lờiXóacheck out our latest post ...
How to verify your domain on facebook
How to unblock website from facebook & instagram
How to download windows 10 pro latest version iso file
Top 10 blogger tips and tricks । Blogger tutorial
mrlaboratory.com : All kind of internet technology tricks are share on our website.. 91
Chia sẻ hay lắm ạ
Trả lờiXóamáy xông tinh dầu bằng điện
máy khuếch tán tinh dầu silent night
máy xông tinh dầu đuổi muỗi
máy khuếch tán tinh dầu hà nội