Ở phần 28 hiệu ứng hover tuyệt đẹp bằng css3 (Phần 1) mình đã giới thiệu tới các bạn 20 hiệu ứng hover với ảnh và text tuyệt đẹp ở phần 2 này mình tiếp tục giới thiệu đến các bạn các hiệu ứng hover có code phức tạp và nâng cao hơn.
Nội dung bài viết
21: Fading two images
CSS .container { position:relative; width:200px; height:150px; } .container img { position:absolute; top:0; left:0; -webkit-transition: opacity 1.1s ease; transition: opacity 1.1s ease; } .container:hover .image1 { opacity:0; } HTML <div class="container"> <img class="image2" src="img2" alt=""> <img class="image1" src="img1" alt=""> </div>
22: Basic CSS3 image slider (without javascript!)
CSS .container { position:relative; width:200px; height:150px; } .container img { position:absolute; top:0; left:0; } .container:hover img { -webkit-animation-name: slider; -webkit-animation-timing-function: ease; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: slider; animation-timing-function: ease; animation-duration: 10s; animation-iteration-count: infinite; } @-webkit-keyframes slider { 0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } @keyframes slider { 0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } .container img:nth-child(1) {-webkit-animation-delay: 8s; animation-delay: 8s;} .container img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;} .container img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;} .container img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;} .container img:nth-child(5) {-webkit-animation-delay: 0s; animation-delay: 0s;} HTML <div class="container"> <img src="img5" alt="img5"> <img src="img4" alt="img4"> <img src="img3" alt="img3"> <img src="img2" alt="img2"> <img src="img1" alt="img1"> </div>
23: Advanced CSS3 image slider (without javascript!)
CSS .container { position:relative; width:200px; height:150px; } .container img { position:absolute; top:0; left:0; opacity:0; } .container:hover img { -webkit-animation-name: slider; -webkit-animation-timing-function: ease; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-name: slider; animation-timing-function: ease; animation-duration: 10s; animation-iteration-count: infinite; } @-webkit-keyframes slider { 0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);} 20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);} 30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);} 100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);} } @keyframes slider { 0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);} 20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);} 30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);} 100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);} } .container img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;} .container img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;} .container img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;} .container img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;} .container img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;} .container .hovertext { position: absolute; top:60px; left:30px; font-size:1.5em; color: rgba(255,255,255,1); -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .container:hover .hovertext { top:20px; color: rgba(255,255,255,0); -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } HTML <div class="container"> <img src="img5" alt="img5"> <img src="img4" alt="img4"> <img src="img3" alt="img3"> <img src="img2" alt="img2"> <img src="img1" alt="img1"> <p class="hovertext">Hover here</p> </div>
24: Shake it!
@-webkit-keyframes shakeit { 0% { -webkit-transform: rotate(0deg) translate(2px, 1px); } 10% { -webkit-transform: rotate(2deg) translate(1px, 2px); } 20% { -webkit-transform: rotate(-2deg) translate(3px, 0px) ; } 30% { -webkit-transform: rotate(0deg) translate(0px, -2px); } 40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); } 50% { -webkit-transform: rotate(2deg) translate(1px, -2px); } 60% { -webkit-transform: rotate(0deg) translate(3px, -1px); } 70% { -webkit-transform: rotate(2deg) translate(-2px, -1px); } 80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); } 90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); } 100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); } } @keyframes shakeit { 0% { transform: rotate(0deg) translate(2px, 1px); } 10% { transform: rotate(2deg) translate(1px, 2px); } 20% { transform: rotate(-2deg) translate(3px, 0px) ; } 30% { transform: rotate(0deg) translate(0px, -2px); } 40% { transform: rotate(-2deg) translate(-1px, 1px); } 50% { transform: rotate(2deg) translate(1px, -2px); } 60% { transform: rotate(0deg) translate(3px, -1px); } 70% { transform: rotate(2deg) translate(-2px, -1px); } 80% { transform: rotate(-2deg) translate(1px, 1px); } 90% { transform: rotate(0deg) translate(-2px, -2px); } 100% { transform: rotate(2deg) translate(-1px, 2px); } } .shakeit img:hover { -webkit-animation-name: shakeit; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-name: shakeit; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }
25: Changing colors
@-webkit-keyframes changes { 0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;} 10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;} 20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;} 30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;} 40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;} 50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;} 60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;} 70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;} 80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;} 90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;} 100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;} } @keyframes changes { 0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;} 10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;} 20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;} 30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;} 40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;} 50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;} 60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;} 70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;} 80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;} 90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;} 100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;} } .changes:hover { -webkit-animation-name: changes; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-name: changes; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; }
26: Textarea transformation
.container { width:200px; height:150px; position:relative; } .textarea { background-color:#FFF; top:50px; left:25px; width:160px; height:35px; position:absolute; border: 2px solid #333; box-shadow: 0px 0px 15px #000; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .textarea:focus { background-color:#000030; top:0; left:0; height:150px; width:200px; border-radius:5px; border: 2px solid #d4d0ba; box-shadow: 0px 0px 15px #FFFFFF; }
27: Expanding codeblock
CSS .container { position:relative; } .container:after { text-align: center; position: absolute; background:#999; top: 17px; right: -28px; width: 120px; height: 1.6em; font-size: 1.1em; content: "TEXT"; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .outer, .outer:hover { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .outer{ color: #000; background: #DDD; overflow: hidden; } .outer:hover { color: #FFF; background: #666; overflow: hidden; } .inner { max-height: 110px; overflow: auto; -webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease; } .outer:hover > .inner { max-height: 1200px; -webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s; } HTML <div class="container outer"> <div class="inner"> Content with test-linebreaks: <br><br><br><br><br><br><br> Content ends here </div> </div>
28: CSS Tooltip
CSS .tooltip { position: relative; opacity: 0; color: #FFF; top: -100px; left: 0px; width: 180px; padding: 10px; border-radius: 25px; -webkit-border-radius: 25px; background-color: rgba(0,0,30,0.5); -webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75); box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75); -webkit-transition: .5s; transition: .5s; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .container .tooltip:after { position: absolute; top: 100%; left: 45%; height: 0; width: 0; border: 6px solid transparent; border-top: 6px solid rgba(0, 0, 30, 0.5); content: "Awesome!"; white-space: nowrap; color:#DDD; } .container:hover .tooltip { opacity: 1; top: -225px; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } HTML <div class="container"> <img src="" alt=""> <div class="tooltip"> <p class="tooltiptxt">Got it!</p> </div> </div>
Chúc bạn thành công!
Tin tức nổi bật
Thiết kế web theo mẫu
Thiết kế web theo mẫu là gì? Thiết kế web theo mẫu là dịch vụ website được xây dựng...
Tổng hợp 20+ cách kiếm tiền từ website trong năm 2020
Thời kỳ 4.0, Internet trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Người...
10 bước xây dựng kế hoạch marketing online
Thị trường luôn thay đổi và chính vì thế các chiến lược marketing online của bạn cũng cần...
Ý tưởng đặt tên thương hiệu – Cách chọn tên miền website – Lời khuyên vàng từ ITC Việt
Cách chọn tên miền website. Chúng tôi là ITC Việt. Chúng tôi là công ty thiết kế website...
Thiết kế website theo yêu cầu
Hiện nay Dịch vụ Thiết kế website theo yêu cầu đã không còn xa lạ đối với các doanh...
Thiết kế trang web, lập trang web, dựng trang web bán hàng
Nội dung bài viết Thiết kế trang web Thiết kế trang web là điều mà các công...
E-commerce là gì? E-business là gì? So sánh E-commerce và E-business
E-Commerce (tiếng Việt là thương mại điện tử) đang là một trong những vấn đề đáng quan tâm của...
Để thiết kế web đẹp bạn không thể bỏ qua 8 lưu ý sau
Việc thiết kế web ngày nay không còn dừng lại ở việc cung cấp thông tin đủ hay...