 |
เอาเมาส์ชี้แล้วมีแสงวิ๊งแบบนี้เขาเรียก CSS แบบไหนหรอครับ มีข้อมูลประกอบด้านในครับ |
| |
 |
|
|
 |
 |
|
ผมรบกวน admin พิจารณาพวกลิ้งค์เว็บการพนัน อาจจะผิดกฏหมาย.
|
 |
 |
 |
 |
| Date :
2018-07-02 01:54:49 |
By :
mr.v |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 13px;
}
.wrap-login100-form-btn {
width: 100%;
display: block;
position: relative;
z-index: 1;
border-radius: 25px;
overflow: hidden;
margin: 0 auto;
}
.login100-form-bgbtn {
position: absolute;
z-index: -1;
width: 300%;
height: 100%;
background: #a64bf4;
background: -webkit-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
background: -o-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
background: -moz-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
background: linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
top: 0;
left: -100%;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.login100-form-btn {
font-family: Poppins-Medium;
font-size: 15px;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
width: 100%;
height: 50px;
}
.wrap-login100-form-btn:hover .login100-form-bgbtn {
left: 0;
}
|
| |
|
|
| |
| Date :
2018-07-02 17:01:55 |
By :
css |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไปแกะอีกตัวนึงมาครับ เอาเมาส์ชี้แล้วภาพมีแสงวิ๊งๆ ลอง copy เอาไปใช้งานในเว็บเพิ่มความสวยงามได้เลยครับ
Index.php
<style type="text/css">
@charset "utf-8";
/* CSS RESET
===========================================*/
figure{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
.banner_hover {overflow: hidden;}
.banner_hover .tt_img_hover { position:absolute;left: -100%;top: 0px;opacity:0;}
.banner_hover:hover .tt_img_hover{left: 0px;opacity:1;-webkit-filter: grayscale(100%);filter: grayscale(100%);} /**รูป สีดำ*/
.menu_list ul li a,
.banner_hover .tt_img_hover,
.banner_hover {-webkit-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s;}
.banner_hover.eff2 {position: relative;overflow: hidden;}
figure {
position: relative;
}
figure::before {
position: absolute;
top: 0;
left: -100%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.thaitheme1x:hover figure::before,
figure:hover::before {
-webkit-animation: shine 1.50s;
animation: shine 1.50s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
</style>
<div class="tt_l tt_col_c banner_hover Parent fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;float:left;margin-left:50px;">
<a href="#">
<figure>
<img class="tt_img_df" src="http://champkts.com/line.jpg">
<img class="tt_img_hover" src="http://champkts.com/line.jpg">
</figure>
</a>
</div>
<div class="tt_l tt_col_c banner_hover Parent fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;float:left;margin-left:50px;">
<a href="#">
<figure>
<img class="tt_img_df" src="http://champkts.com/line.jpg">
<img class="tt_img_hover" src="http://champkts.com/line.jpg">
</figure>
</a>
</div>
|
| |
|
|
| |
| Date :
2018-07-02 20:49:45 |
By :
lchampl123 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
