Tiếp theo, tôi sẽ giới thiệu với các bạn những hiệu ứng khác, sử dụng thuộc tính transform kết hợp với transition trong CSS3. Hy vọng sẽ có ích với các bạn và giúp các bạn có hứng thú hơn với việc sáng tạo trong CSS3, để có thể tạo ra những giao diện với những hiệu ứng đẹp mắt hơn nữa.
HIỆU ỨNG 1:
Code HTML:
<div id="effect1" class="image"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgacCPWHv_RDuAbUM1ldLvoCksEcJn6XCC3JRhEpbn8g_3MnzorgyeWLTlKLM7PLaRfWBD9UDB4FDG3SpZZ-TDCZRYEU1_QiGuBJDiKIK2RDZPZJb0RIJmiD2RRWc7Nv9kbYWnLI3qrKXo/s1600/effect-1.jpg" /> <div class="detail"> <h1 class="title">Hiệu ứng 1</h1> <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p> <a href="#">Xem tiếp</a> </div> </div>
Code CSS:
.image{
width: 360px;
float: left;
margin: 10px;
position: relative;
overflow: hidden;
height: 240px;
}
.image img{
width: 100%;
}
h1.title{
text-transform: uppercase;
font-size: 25px;
font-weight: bold;
line-height: 25px;
padding: 10px;
position: relative;
}
.detail{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
text-align: center;
}
p{
color: #fff;
padding: 10px;
}
a{
text-decoration: none;
display: inline-block;
padding: 10px 15px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid #111;
}
.mask{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
bottom: 0;
right: 0;
}Để không phải lặp lại quá nhiều, trên đây là đoạn code CSS mình sẽ dùng chung cho tất cả các hiệu ứng tiếp theo trong bài viết này.
Code CSS cho hiệu ứng 1:
#effect1 .title{
background: rgba(0,0,0,0.7);
color: #fff;
transform: translateY(-100px);
-moz-transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
opacity: 0
}
#effect1 a{
background: rgba(0,0,0,0.7);
color: #fff;
font-weight: bold;
vertical-align: middle;
opacity: 0;
transition: 0.5s ease-in-out ;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
}
#effect1 p{
font-weight: bold;
position: relative;
transform: translateY(100px);
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
opacity: 0;
transition: 0.5s ease-in-out ;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
}
#effect1:hover .detail{
background: #D39846;
opacity: 0.9;
}
#effect1:hover .title{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
opacity: 1;
}
#effect1:hover a{
opacity: 1;
}
#effect1:hover p{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
opacity: 1;
} HIỆU ỨNG 2:
Code HTML:
<div id="effect2" class="image"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuulXxMYv6zDfq6xKXp-nl3LEW-GPdLXEK3t4YkMgjDhyphenhyphenFonGefEnYTi0YazArn0nAxyIT7DvLJxLj_T5ahWhhHXbRGMFlR2HWZ9gISQrMTiPetnkIcXTfJGJktF7516o_JX6DY1bQF4A/s1600/effect-2.jpg" /> <div class="mask"></div> <div class="detail"> <h1 class="title">Hiệu ứng 2</h1> <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p> <a href="#">Xem tiếp</a> </div> </div>
Code CSS:
#effect2 .mask{
width: 200%;
height: 250%;
background: rgba(148,170,214,0);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
transform: rotate(45deg) translate(150px, 50px);
}
#effect2:hover .mask{
transform: rotate(0deg) translate(-50px,-50px);
background: rgba(148,170,214,0.7);
}
#effect2 .title{
color: #fff;
font-weight: bold;
border-bottom: 1px solid #444;
padding-bottom: 20px;
margin: 0 15px;
transform: rotate(15deg) translate(50px,-100px);
-webkit-transform: rotate(15deg) translate(50px,-100px);
-moz-transform: rotate(15deg) translate(50px,-100px);
transition: all 0.2s ease-in-out 0.4s;
-webkit-transition: all 0.2s ease-in-out 0.4s;
-moz-transition: all 0.2s ease-in-out 0.4s;
position: relative;
}
#effect2 p{
position: relative;
font-weight: bold;
transform: rotate(15deg) translate(-100px,200px);
-webkit-transform: rotate(15deg) translate(-100px,200px);
-moz-transform: rotate(15deg) translate(-100px,200px);
transition: 0.2s all ease-in-out 0.4s;
-webkit-transition: 0.2s all ease-in-out 0.4s;
-moz-transition: 0.2s all ease-in-out 0.4s;
}
#effect2 a{
background: rgba(0,0,0,0.7);
color: #fff;
font-weight: bold;
vertical-align: middle;
position: relative;
transition: 0.4s all ease-in-out 0.4s ;
-webkit-transition: 0.4s all ease-in-out 0.4s;
-moz-transition: 0.4s all ease-in-out 0.4s;
transform:translateY(100px);
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
}
#effect2:hover .title{
transform: rotate(0deg) translate(0px,-0px);
-webkit-transform: rotate(0deg) translate(0px,-0px);
-moz-transform: rotate(0deg) translate(0px,-0px);
}
#effect2:hover p{
transform: rotate(0deg) translate(0px,-0px);
-webkit-transform: rotate(0deg) translate(0px,-0px);
-moz-transform: rotate(0deg) translate(0px,-0px);
}
#effect2:hover a{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
}
HIỆU ỨNG 3:
Code HTML:
<div id="effect3" class="image"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNPg3cy-9I9zIlb5JDsZAPBcS9NwVWtm1u_0WwN9zrPro56EuPngRE_fJd19tSW3no4YOQaxBl4q2IhHXD4QRKBvoVnnawK1wb4V5tgh2MV9VzhGIkWVhtqP2JbzcwUNthoQlhhMZ_tc/s1600/effect-3.jpg" /> <div class="mask"></div> <div class="detail"> <h1 class="title">Hiệu ứng 3</h1> <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p> <a href="#">Xem tiếp</a> </div> </div>
Code CSS:
#effect3 .mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
transform: rotate(180deg) translate(-100%, -100%);
-webkit-transform: rotate(180deg) translate(-100%, -100%);
-moz-transform: rotate(180deg) translate(-100%, -100%);
}
#effect3 .title{
background: rgba(0,0,0,0.9);
color:#fff;
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
}
#effect3 a{
background: rgba(0,0,0,1);
color:#fff;
border-radius: 0;
-webkit-border-radius: 0;
-webkit-transition: all 0.1s ease-in-out 0.2s;
-moz-transition: all 0.1s ease-in-out 0.2s;
transition: all 0.1s ease-in-out 0.2s;
transform: translateY(-300px);
-webkit-transform: translateY(-300px);
-moz-transform: translateY(-300px);
}
#effect3 p{
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
transform: rotate(180deg) translateX(400px);
-webkit-transform: rotate(180deg) translateX(400px);
-moz-transform: rotate(180deg) translateX(400px);
position: relative;
}
#effect3:hover .mask{
transform:rotate(0deg) translate(0, 0);
}
#effect3:hover .title{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
}
#effect3:hover a{
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
}
#effect3:hover p{
transform:rotate(0deg) translateX(0);
}
Bài viết này khá dài nên mình sẽ chia thành nhiều phần, các bạn hãy đón chờ phần 3 nhé!
Merkur 37C Safety Razor Review – Merkur 37C
Trả lờiXóaThe Merkur 37c is an excellent short handled DE safety communitykhabar razor. It is more suitable for both heavy and non-slip hands and is therefore deccasino a 출장마사지 great goyangfc.com option for experienced gri-go.com