以下是 HTML5鼠标点击淡入淡出切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5鼠标点击淡入淡出切换代码</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
<link href="css/chinaz.css" rel="stylesheet" media="all">
</head>
<body>
<header id="immortal_header">
<div id="immortal_carousel" class="carousel thumbnail_text_carousel_fade thumbnail_text_carousel_wrapper" data-ride="carousel" data-interval="6000" data-pause="hover">
<ol class="carousel-indicators thumbnail_text_carousel_indicators">
<li data-target="#immortal_carousel" data-slide-to="0" class="active">
<h5>内容</h5>
<p>内容</p>
</li>
<li data-target="#immortal_carousel" data-slide-to="1">
<h5>内容</h5>
<p>内容</p>
</li>
<li data-target="#immortal_carousel" data-slide-to="2">
<h5>内容</h5>
<p>内容</p>
</li>
<li data-target="#immortal_carousel" data-slide-to="3">
<h5>内容</h5>
<p>内容</p>
</li>
<li data-target="#immortal_carousel" data-slide-to="4">
<h5>内容</h5>
<p>内容</p>
</li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#">
<img src="images/slider_02.jpg" alt="slider 02" />
</a>
</div>
<div class="item">
<a href="#">
<img src="images/slider_04.jpg" alt="slider 04" />
</a>
</div>
<div class="item">
<a href="#">
<img src="images/slider_05.jpg" alt="slider 05" />
</a>
</div>
<div class="item">
<a href="#">
<img src="images/slider_06.jpg" alt="slider 06" />
</a>
</div>
<div class="item">
<a href="#">
<img src="images/slider_03.jpg" alt="slider 03" />
</a>
</div>
</div>
</header>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>CSS代码(abbb.css):
/*Mega StyleSheet For Immortal Header & SliderItem Name:Immortal Header & SliderItem URL:Description:Different Types of Headers for Web Pages,Bootstrap Sliders,Bootstrap Mega Menu,Bootstrap Modal FormsAuthor:SZThemesAuthor URI:http://codecanyon.net/user/sz_themesVersion:1.0Content List -----------------------------------------------------------------------------------NAME -------------------------------------------LINE NUMBER-------------------- #THUMBNAIL TEXT HEADER VERSION ------------------58----------------------------- 01THUMBNAIL TEXT HEADER VERSION RESPONSIVE -------1168--------------------------- 02THUMBNAIL TEXT HEADER VERSION COLORS -----------1635--------------------------- 03[ Note:Line Numbers Are According To Notepad++ ] ------------------------------------------------------------------Fonts Styles ------------------------------------------------------------------ 'Raleway',sans-serif ---------------------------------- 01 'Lato',sans-serif ---------------------------------- 02 FontAwesome ---------------------------------- 03 ------------------------------------------------------------------Color Codes ------------------------------------------------------------------NAME ------------------------RGB-------------------------- ##ffffff -------------------rgb(255,255,255)---------------- 01#000000 -------------------rgb(0,0,0)---------------------- 02#5076bb -------------------rgb(26,188,156)----------------- 03 Replace Only This Color To Change Whole Color Scheme#ececec -------------------rgb(236,236,236)---------------- 04#999999 -------------------rgb(153,153,153)---------------- 05#dddddd -------------------rgb(221,221,221)---------------- 06#4c4c4c -------------------rgb(40,40,40)------------------- 07*/
/*==========================================================================================================================================THUMBNAIL TEXT HEADER VERSION==========================================================================================================================================*/
/*=======================================================---00---COMMON CSS========================================================*/
#immortal_header{-webkit-text-size-adjust:100% !important;-moz-osx-font-smoothing:grayscale !important;-webkit-font-smoothing:antialiased !important;-ms-font-size-adjust:inherit !important;font-size-adjust:inherit !important;}
/*=======================================================---01---THUMBNAIL TEXT HEADER NAVIGATION BAR========================================================*/
.thumbnail_text_navbar{z-index:3;margin:0px;border:none;-webkit-border-radius:0%;/* Chrome,Safari,Opera */
border-radius:0%;/* Standard syntax */
}
.thumbnail_text_navbar.affix{top:0px;width:100%;z-index:10;position:fixed;-webkit-transition:background ease-in-out 0.5s,border ease-in-out 0.5s,top ease-in-out 0.5s,box-shadow ease-in-out 0.5s;/* Chrome,Safari,Opera */
transition:background ease-in-out 0.5s,border ease-in-out 0.5s,top ease-in-out 0.5s,box-shadow ease-in-out 0.5s;/* Standard syntax */
}
.thumbnail_text_fa_angle_down{margin-left:7px;}
/*========== LOGO ==========*/
#thumbnail_text_header_logo{width:200px;margin-top:15px;-webkit-transition:margin-top ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:margin-top ease-in-out 0.3s;/* Standard syntax */
}
.thumbnail_text_navbar.affix div div a #thumbnail_text_header_logo{margin-top:10px;}
/*========== TOGGLE BUTTON ==========*/
.thumbnail_text_navbar_toggle{border:none;}
.thumbnail_text_navbar_toggle .icon-bar{-webkit-transition:all ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:all ease-in-out 0.3s;/* Standard syntax */
}
.thumbnail_text_navbar_toggle .thumbnail_text_top_icon_bar{-webkit-transform:rotate(45deg);/* Chrome,Safari,Opera */
transform:rotate(45deg);/* Standard syntax */
-webkit-transform-origin:10% 10%;/* Chrome,Safari,Opera */
transform-origin:10% 10%;/* Standard syntax */
}
.thumbnail_text_navbar_toggle .thumbnail_text_middle_icon_bar{opacity:0;}
.thumbnail_text_navbar_toggle .thumbnail_text_bottom_icon_bar{-webkit-transform:rotate(-45deg);/* Chrome,Safari,Opera */
transform:rotate(-45deg);/* Standard syntax */
-webkit-transform-origin:10% 90%;/* Chrome,Safari,Opera */
transform-origin:10% 90%;/* Standard syntax */
}
.thumbnail_text_navbar_toggle.collapsed .thumbnail_text_top_icon_bar{-webkit-transform:rotate(0deg);/* Chrome,Safari,Opera */
transform:rotate(0deg);/* Standard syntax */
}
.thumbnail_text_navbar_toggle.collapsed .thumbnail_text_middle_icon_bar{opacity:1;}
.thumbnail_text_navbar_toggle.collapsed .thumbnail_text_bottom_icon_bar{-webkit-transform:rotate(0deg);/* Chrome,Safari,Opera */
transform:rotate(0deg);/* Standard syntax */
}
/*========== NAV TABS ==========*/
.thumbnail_text_navbar_nav>li>a,.thumbnail_text_navbar_nav>li>a:visited{overflow:hidden;padding-top:30px;position:relative;padding-bottom:30px;text-transform:uppercase;font-family:'Lato',sans-serif;-webkit-transition:all ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:all ease-in-out 0.3s;/* Standard syntax */
-webkit-transform:translateZ(0);/* Chrome,Safari,Opera */
transform:translateZ(0);/* Standard syntax */
-webkit-backface-visibility:hidden;/* Chrome,Safari,Opera */
backface-visibility:hidden;/* Standard syntax */
}
.thumbnail_text_navbar.affix div .thumbnail_text_navbar_nav>li>a{padding-top:25px;padding-bottom:25px;}
.thumbnail_text_navbar_nav>li>a:before{top:0;left:50%;right:50%;height:4px;content:"";z-index:-1;position:absolute;-webkit-transition:left ease-in-out 0.3s,right ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:left ease-in-out 0.3s,right ease-in-out 0.3s;/* Standard syntax */
}
.thumbnail_text_navbar_nav>li>a:hover:before,.thumbnail_text_navbar_nav>li>a:focus:before,.thumbnail_text_navbar_nav>li>a:active:before{left:0;right:0;}
.thumbnail_text_navbar_nav>li>a:hover,.thumbnail_text_navbar_nav>li>a:active,.thumbnail_text_navbar_nav>li>a:focus{border:none;outline:none;}
/*========== DROPDOWN ==========*/
.thumbnail_text_dropdown_menu{border:none;padding:0px;font-family:'Lato',sans-serif;-webkit-border-radius:0%;/* Chrome,Safari,Opera */
border-radius:0%;/* Standard syntax */
}
.thumbnail_text_dropdown_menu li a,.thumbnail_text_dropdown_menu li a:visited{padding:15px 15px 15px 15px;-webkit-transition:background 0.2s ease-in-out 0s,color 0.2s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:background 0.2s ease-in-out 0s,color 0.2s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_dropdown_menu li a i{margin-right:5px;}
/*========== MULTI LEVEL DROPDOWN ==========*/
.thumbnail_text_dropdown_right i,.thumbnail_text_dropdown_left i{margin-left:15px;}
.thumbnail_text_dropdown_menu_right{top:-1px;left:100%;position:absolute;}
.thumbnail_text_dropdown_menu_left{top:-1px;left:-92%;position:absolute;}
/*========== SHORT CODE DROPDOWN ==========*/
.thumbnail_text_dropdown_menu_shortcodes{left:-450px;width:1000px;font-family:'Lato',sans-serif;}
.thumbnail_text_shortcodes_list{padding:0px;}
.thumbnail_text_shortcodes_list ul{padding:0px;list-style-type:none;margin:25px 0px 25px 0px;}
.thumbnail_text_shortcodes_list ul li a,.thumbnail_text_shortcodes_list ul li a:visited{display:block;text-decoration:none;padding:5px 0px 5px 20px;}
.thumbnail_text_shortcodes_list ul li a i{margin-right:10px;}
/*========== FEATURES DROPDOWN ==========*/
.thumbnail_text_dropdown_menu_features{left:-600px;width:1000px;font-family:'Lato',sans-serif;}
.thumbnail_text_features_list{padding:0px;}
.thumbnail_text_features_list ul{padding:0px;list-style-type:none;margin:25px 0px 25px 0px;}
.thumbnail_text_features_list ul li a,.thumbnail_text_features_list ul li a:visited{display:block;text-decoration:none;padding:5px 0px 5px 25px;}
.thumbnail_text_features_list_heading{padding:5px 0px 5px 25px;}
/*========== MEGA DROPDOWN ==========*/
.thumbnail_text_dropdown_menu_mega{left:-850px;width:1170px;padding:5px 5px 5px 5px;font-family:'Lato',sans-serif;}
.thumbnail_text_mega_list{margin:0px;}
.thumbnail_text_mega_list ul{margin:0px;padding:0px;list-style-type:none;}
.thumbnail_text_mega_list ul li{margin:25px 0px 25px 0px;}
.thumbnail_text_mega_list_heading{font-weight:normal;text-transform:uppercase;}
.thumbnail_text_mega_list ul li a,.thumbnail_text_mega_list ul li a:visited{margin:0px;padding:0px;text-decoration:none;text-transform:capitalize;}
.thumbnail_text_mega_list ul li a i{margin-right:10px;}
.thumbnail_text_mega_image{margin:0px;}
.thumbnail_text_mega_image ul{margin:0px;padding:0px;list-style-type:none;}
.thumbnail_text_mega_image ul li{margin:25px 0px 25px 0px;}
.thumbnail_text_mega_image_heading{font-weight:normal;text-transform:uppercase;}
.thumbnail_text_mega_image img{width:100%;-webkit-border-radius:5px;/* Chrome,Safari,Opera */
border-radius:5px;/* Standard syntax */
}
.thumbnail_text_mega_image ul li h5{margin-top:25px;font-weight:bold;margin-bottom:25px;text-transform:capitalize;}
.thumbnail_text_mega_image p{text-align:justify;}
.thumbnail_text_mega_posts{margin:0px;}
.thumbnail_text_mega_posts ul{margin:0px;padding:0px;list-style-type:none;}
.thumbnail_text_mega_posts_heading{font-weight:normal;text-transform:uppercase;margin:25px 0px 25px 0px;}
.thumbnail_text_mega_posts_col_img{margin:0%;padding:0%;}
.thumbnail_text_mega_posts_col_img img{width:100%;opacity:0.7;-webkit-border-radius:5px;/* Chrome,Safari,Opera */
border-radius:5px;/* Standard syntax */
-webkit-transition:opacity ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:opacity ease-in-out 0.3s;/* Standard syntax */
}
.thumbnail_text_mega_posts_row{margin:10px 0px 0px 0px;}
.thumbnail_text_mega_posts_col_text h5{padding:0px;margin:0px 0px 5px 0px;text-transform:capitalize;}
.thumbnail_text_mega_posts_col_text h5 a,.thumbnail_text_mega_posts_col_text h5 a:visited{margin:0px;padding:0px;font-weight:bold;text-decoration:none;}
.thumbnail_text_mega_posts_row:hover .thumbnail_text_mega_posts_col_img img{opacity:1;}
/*========== SHOP DROPDOWN ==========*/
.thumbnail_text_dropdown_menu_shop{left:-940px;width:1170px;padding:15px 25px 15px 25px;font-family:'Lato',sans-serif;}
.thumbnail_text_dropdown_menu_shop_row{margin-top:10px;}
.thumbnail_text_dropdown_menu_shop_col img{width:100%;opacity:0.7;-webkit-border-radius:5px;/* Chrome,Safari,Opera */
border-radius:5px;/* Standard syntax */
-webkit-transition:opacity ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:opacity ease-in-out 0.3s;/* Standard syntax */
}
.thumbnail_text_dropdown_menu_shop_col h5{padding:0px;margin:20px 0px 5px 0px;text-transform:uppercase;}
.thumbnail_text_dropdown_menu_shop_col h5 a,.thumbnail_text_dropdown_menu_shop_col h5 a:visited{margin:0px;padding:0px;font-weight:bold;text-decoration:none;}
.thumbnail_text_dropdown_menu_shop_col p{text-align:justify;}
.thumbnail_text_dropdown_menu_shop_col:hover img{opacity:1;}
/*=======================================================---02---THUMBNAIL TEXT SLIDER========================================================*/
.thumbnail_text_carousel_wrapper{top:-80px;overflow:hidden;max-height:650px;margin-bottom:-80px;}
.thumbnail_text_carousel_wrapper > .carousel-inner > .item > img,.thumbnail_text_carousel_wrapper > .carousel-inner > .item > a > img{opacity:0.6;margin:auto;width:100% !important;}
/*========== FADE EFFECT ==========*/
.thumbnail_text_carousel_fade{opacity:1;}
.thumbnail_text_carousel_fade .item{top:0;z-index:1;opacity:0;width:100%;position:absolute;left:0 !important;display:block !important;-webkit-transition:opacity ease-in-out 0.7s;/* Chrome,Safari,Opera */
-moz-transition:opacity ease-in-out 0.7s;/* Mozilla */
-ms-transition:opacity ease-in-out 0.7s;/* IE 9 */
-o-transition:opacity ease-in-out 0.7s;/* Opera */
transition:opacity ease-in-out 0.7s;/* Standard syntax */
}
.thumbnail_text_carousel_fade .item:first-child{top:auto;position:relative;}
.thumbnail_text_carousel_fade .item.active{opacity:1;z-index:2;-webkit-transition:opacity ease-in-out 0.7s;/* Chrome,Safari,Opera */
-moz-transition:opacity ease-in-out 0.7s;/* Mozilla */
-ms-transition:opacity ease-in-out 0.7s;/* IE 9 */
-o-transition:opacity ease-in-out 0.7s;/* Opera */
transition:opacity ease-in-out 0.7s;/* Standard syntax */
}
/*========== LEFT/RIGHT CONTROL ==========*/
/*========== THUMBNAIL CONTROL ==========*/
.thumbnail_text_carousel_control_left,.thumbnail_text_carousel_control_right{top:40%;opacity:1;z-index:2;width:55px;height:55px;text-shadow:none;text-align:center;-webkit-border-radius:0%;/* Chrome,Safari,Opera */
border-radius:0%;/* Standard syntax */
-webkit-transition:all ease-in-out 0.3s;/* Chrome,Safari,Opera */
transition:all ease-in-out 0.3s;/* Standard syntax */
}
.thumbnail_text_carousel_control_icons{line-height:50px;font-size:40px !important;font-weight:normal !important;}
.thumbnail_text_carousel_control_left{left:1% !important;}
.thumbnail_text_carousel_control_right{right:1% !important;}
.thumbnail_text_carousel_control_left:hover,.thumbnail_text_carousel_control_left:active,.thumbnail_text_carousel_control_left:focus,.thumbnail_text_carousel_control_right:hover,.thumbnail_text_carousel_control_right:active,.thumbnail_text_carousel_control_right:focus{opacity:1;}
/*========== INDICATORS THUMBNAIL TEXT ==========*/
.thumbnail_text_carousel_indicators{left:0%;right:0%;z-index:3;bottom:0%;width:100%;padding:0px;margin-left:0%;position:absolute;margin-bottom:0px;font-family:'Raleway',sans-serif;}
.thumbnail_text_carousel_indicators li{width:15%;opacity:1;margin:0px;height:auto;border:none;text-indent:0px;text-align:left;padding:15px 0px 15px 15px;-webkit-border-radius:0%;/* Chrome,Safari,Opera */
border-radius:0%;/* Standard syntax */
-webkit-transition:opacity 0.3s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:opacity 0.3s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_carousel_indicators li h5{text-shadow:none;letter-spacing:2px;text-transform:capitalize;}
.thumbnail_text_carousel_indicators li p{font-size:12px;text-shadow:none;letter-spacing:1px;text-transform:capitalize;}
.thumbnail_text_carousel_indicators .active{width:15%;height:auto;border:none;}
/*=======================================================---03---THUMBNAIL TEXT MODAL========================================================*/
.thumbnail_text_modal_dialog{top:20px;}
.thumbnail_text_modal_content{left:12%;width:75%;border:none;overflow:hidden;box-shadow:none;position:relative;-webkit-border-radius:0px 25px 25px 0px;/* Chrome,Safari,Opera */
border-radius:0px 25px 25px 0px;/* Standard syntax */
}
/*========== HEADER OF MODAL ==========*/
.thumbnail_text_modal_header{border:none;text-align:left;padding:20px 10px;}
.thumbnail_text_modal_header img{width:250px;}
.thumbnail_text_modal_header>button{opacity:1;z-index:1;left:10px;border:none;bottom:10px;outline:none;font-size:35px;text-shadow:none;position:relative;font-weight:normal;padding:0px 9px 0px 9px;-webkit-transition:color 0.5s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:color 0.5s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_modal_header >button:hover,.thumbnail_text_modal_header>button:active,.thumbnail_text_modal_header>button:focus{opacity:1;border:none;box-shadow:none;outline:none !important;}
/*========== BODY OF MODAL ==========*/
.thumbnail_text_modal_body{margin:0px;font-family:'Raleway',sans-serif;}
#thumbnail_text_modal_user_image{text-align:center;}
#thumbnail_text_modal_user_image img{width:90px;-webkit-border-radius:100%;/* Chrome,Safari,Opera */
border-radius:100%;/* Standard syntax */
}
#thumbnail_text_modal_user_image h3{font-weight:bold;}
.thumbnail_text_modal_body_form>div{margin-top:10px;margin-bottom:25px;}
.thumbnail_text_modal_body_form div input{height:42px;box-shadow:none;padding:0px 0px 0px 20px;-webkit-border-radius:0px 25px 25px 0px;/* Chrome,Safari,Opera */
border-radius:0px 25px 25px 0px;/* Standard syntax */
-webkit-transition:background 0.5s ease-in-out 0s,border 0.5s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:background 0.5s ease-in-out 0s,border 0.5s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_modal_body_form div textarea{box-shadow:none;height:initial !important;padding:20px 0px 20px 20px;-webkit-border-radius:0px 25px 25px 0px;/* Chrome,Safari,Opera */
border-radius:0px 25px 25px 0px;/* Standard syntax */
-webkit-transition:background 0.5s ease-in-out 0s,border 0.5s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:background 0.5s ease-in-out 0s,border 0.5s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_checkbox input{height:initial !important;}
.thumbnail_text_modal_body_form div input:focus,.thumbnail_text_modal_body_form div textarea:focus{outline:none;box-shadow:none;}
.thumbnail_text_modal_body_form button{border:none;display:block;font-size:16px;overflow:hidden;box-shadow:none;position:relative;text-align:center;font-weight:normal;vertical-align:middle;padding:10px 35px 10px 35px;-webkit-border-radius:0px 25px 25px 0px;/* Chrome,Safari,Opera */
border-radius:0px 25px 25px 0px;/* Standard syntax */
-webkit-transform:translateZ(0);/* Chrome,Safari,Opera */
transform:translateZ(0);/* Standard syntax */
-webkit-backface-visibility:hidden;/* Chrome,Safari,Opera */
backface-visibility:hidden;/* Standard syntax */
-webkit-transition:color 0.3s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:color 0.3s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_modal_body_form button:before{top:0;left:0;right:0;bottom:0;content:"";z-index:-1;position:absolute;-webkit-border-radius:0px 25px 25px 0px;/* Chrome,Safari,Opera */
border-radius:0px 25px 25px 0px;/* Standard syntax */
-webkit-transform:scaleY(0);/* Chrome,Safari,Opera */
transform:scaley(0);/* Standard syntax */
-webkit-transform-origin:50%;/* Chrome,Safari,Opera */
transform-origin:50%;/* Standard syntax */
-webkit-transition:-webkit-transform 0.3s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:transform 0.3s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_modal_body_form button:hover,.thumbnail_text_modal_body_form button:focus,.thumbnail_text_modal_body_form button:active{border:none;box-shadow:none;outline:none !important;}
.thumbnail_text_modal_body_form button:hover:before,.thumbnail_text_modal_body_form button:focus:before,.thumbnail_text_modal_body_form button:active:before{-webkit-transform:scaleY(1);/* Chrome,Safari,Opera */
transform:scaleY(1);/* Chrome,Safari,Opera */
}
/*========== FOOTER OF MODAL ==========*/
.thumbnail_text_modal_footer{border:none;text-align:left;padding:3px 0px 10px 20px;}
#thumbnail_text_contact_us_modal_social_icons ul{padding:0;list-style-type:none;margin:10px 10px 10px 0px;}
#thumbnail_text_contact_us_modal_social_icons ul li{float:left;margin-right:1px;}
#thumbnail_text_contact_us_modal_social_icons ul li a{width:30px;padding:5px;display:block;overflow:hidden;position:relative;text-align:center;text-decoration:none;vertical-align:middle;-webkit-border-radius:0px 15px 15px 0px;/* Chrome,Safari,Opera */
border-radius:0px 15px 15px 0px;/* Standard syntax */
-webkit-transform:translateZ(0);/* Chrome,Safari,Opera */
transform:translateZ(0);/* Standard syntax */
-webkit-backface-visibility:hidden;/* Chrome,Safari,Opera */
backface-visibility:hidden;/* Standard syntax */
-webkit-transition:color 0.3s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:color 0.3s ease-in-out 0s;/* Standard syntax */
}
#thumbnail_text_contact_us_modal_social_icons ul li a:before{top:0;left:0;right:0;bottom:0;content:"";z-index:-1;position:absolute;-webkit-border-radius:0px 15px 15px 0px;/* Chrome,Safari,Opera */
border-radius:0px 15px 15px 0px;/* Standard syntax */
-webkit-transform:scale(2);/* Chrome,Safari,Opera */
transform:scale(2);/* Standard syntax */
-webkit-transition:-webkit-transform 0.3s ease-in-out 0s;/* Chrome,Safari,Opera */
transition:transform 0.3s ease-in-out 0s;/* Standard syntax */
}
#thumbnail_text_contact_us_modal_social_icons ul li a:hover:before,#thumbnail_text_contact_us_modal_social_icons ul li a:focus:before,#thumbnail_text_contact_us_modal_social_icons ul li a:active:before{-webkit-transform:scale(0);/* Chrome,Safari,Opera */
transform:scale(0);/* Chrome,Safari,Opera */
}
/*========== SEARCH BAR ==========*/
.thumbnail_text_modal_body_search{padding:0px;}
.thumbnail_text_search_bar>div{width:85%;float:left;margin:0px;padding-top:15px;}
.thumbnail_text_search_bar>div>input{font-size:22px;box-shadow:none;font-weight:bold;border:none !important;}
.thumbnail_text_search_bar>div>input:focus{border:none;box-shadow:none;}
.thumbnail_text_search_bar>button{width:15%;margin:0px;padding:25px;text-align:center;-webkit-border-radius:0%;/* Chrome,Safari,Opera */
border-radius:0%;/* Standard syntax */
}
.thumbnail_text_search_bar>button:before{-webkit-border-radius:0%;/* Chrome,Safari,Opera */
border-radius:0%;/* Standard syntax */
}
.thumbnail_text_search_bar>button>span{vertical-align:middle;}
/*==========================================================================================================================================THUMBNAIL TEXT HEADER VERSION RESPONSIVE==========================================================================================================================================*/
/*================================================== MEDIA MAX-991px ==================================================*/
@media (max-width:991px){/*=======================================================NAVIGATION BAR========================================================*/
.thumbnail_text_navbar.affix{position:static;}
#thumbnail_text_header_logo{margin-top:0px;}
.thumbnail_text_navbar.affix div div a #thumbnail_text_header_logo{margin-top:0px;}
.thumbnail_text_navbar.affix div .thumbnail_text_navbar_nav>li>a{padding-top:30px;padding-bottom:30px;}
.thumbnail_text_carousel_wrapper{top:0px;margin-bottom:0px;}
}
/*================================================== MEDIA 767px ==================================================*/
@media only screen and (max-width:767px){/*=======================================================NAVIGATION BAR========================================================*/
.thumbnail_text_navbar_header{padding:10px 0px 10px 0px;}
.thumbnail_text_navbar_nav{float:initial !important;}
.thumbnail_text_fa_angle_down{float:right;font-size:22px;}
/*========== DROPDOWN ==========*/
.thumbnail_text_dropdown ul{text-align:center;}
.thumbnail_text_dropdown_right i,.thumbnail_text_dropdown_left i{display:none;}
.thumbnail_text_dropdown_menu_right,.thumbnail_text_dropdown_menu_left{display:none;}
.thumbnail_text_navbar_nav,.thumbnail_text_dropdown_menu{text-align:left;}
.thumbnail_text_shortcodes_list_border,.thumbnail_text_features_list_border{border-right:none;}
.thumbnail_text_mega_image,.thumbnail_text_mega_posts{text-align:center;}
.thumbnail_text_mega_image img,.thumbnail_text_mega_posts_col_img img,.thumbnail_text_dropdown_menu_shop_col img{width:50%;}
.thumbnail_text_mega_posts_col_text h5{margin:10px 0px 10px 0px;}
.thumbnail_text_dropdown_menu_shop_col{text-align:center;}
.thumbnail_text_dropdown_menu_shop_col p{text-align:center;}
.thumbnail_text_dropdown_menu_share{float:initial !important;}
/*=======================================================THUMBNAIL TEXT SLIDER========================================================*/
/*========== LEFT/RIGHT CONTROL ==========*/
/*========== THUMBNAIL CONTROL ==========*/
.thumbnail_text_carousel_control_left,.thumbnail_text_carousel_control_right{display:none;}
/*=======================================================MODAL========================================================*/
.thumbnail_text_modal_content{width:100%;position:static;}
}
/*================================================== MEDIA 768px - 5000px ==================================================*/
@media only screen and (min-width:768px) and (max-width:5000px){/*=======================================================NAVIGATION BAR TRANSLATE EFFECT========================================================*/
.thumbnail_text_dropdown_menu{opacity:0 !important;display:block !important;visibility:hidden !important;-webkit-transform:translate(0px,25px) !important;/* Chrome,Safari */
transform:translate(0px,25px) !important;/* Standard syntax */
-webkit-transition:-webkit-transform 0.2s ease-in-out,visibility 0.2s ease-in-out 0s,opacity 0.2s ease-in-out 0s;/* Chrome,Safari */
transition:transform 0.2s ease-in-out,visibility 0.2s ease-in-out 0s,opacity 0.2s ease-in-out 0s;/* Standard syntax */
}
.thumbnail_text_dropdown:hover>.thumbnail_text_dropdown_menu{opacity:1 !important;visibility:visible !important;-webkit-transform:translate(0px,0px) !important;/* Chrome,Safari */
transform:translate(0px,0px) !important;/* Standard syntax */
}
}
/*================================================== MEDIA 480px ==================================================*/
@media only screen and (max-width:480px){/*========== SEARCH BAR ==========*/
.thumbnail_text_search_bar>div{width:75%;}
.thumbnail_text_search_bar>button{width:25%;}
/*=======================================================THUMBNAIL TEXT SLIDER========================================================*/
/*========== INDICATORS THUMBNAIL TEXT ==========*/
.thumbnail_text_carousel_indicators li{width:18%;text-align:center;padding:0px 0px 0px 0px;}
.thumbnail_text_carousel_indicators li h5{font-size:10px;letter-spacing:0px;}
.thumbnail_text_carousel_indicators li p{display:none;}
.thumbnail_text_carousel_indicators .active{width:18%;}
}
/*================================================== MEDIA 481px - 600px ==================================================*/
@media (min-width:481px) and (max-width:600px){/*========== SEARCH BAR ==========*/
.thumbnail_text_search_bar>div{width:75%;}
.thumbnail_text_search_bar>button{width:25%;}
/*=======================================================THUMBNAIL TEXT SLIDER========================================================*/
/*========== INDICATORS THUMBNAIL TEXT ==========*/
.thumbnail_text_carousel_indicators li{width:18%;text-align:center;padding:5px 0px 5px 0px;}
.thumbnail_text_carousel_indicators li h5{font-size:12px;letter-spacing:0px;}
.thumbnail_text_carousel_indicators li p{font-size:10px;letter-spacing:0px;}
.thumbnail_text_carousel_indicators .active{width:18%;}
}
/*================================================== MEDIA 601px - 767px ==================================================*/
@media (min-width:601px) and (max-width:767px){/*=======================================================THUMBNAIL TEXT SLIDER========================================================*/
/*========== INDICATORS THUMBNAIL TEXT ==========*/
.thumbnail_text_carousel_indicators li{text-align:center;padding:5px 0px 5px 0px;}
.thumbnail_text_carousel_indicators li h5{font-size:14px;letter-spacing:0px;}
.thumbnail_text_carousel_indicators li p{font-size:10px;letter-spacing:0px;}
}
/*================================================== MEDIA 768px - 991px ==================================================*/
@media (min-width:768px) and (max-width:991px){/*=======================================================NAVIGATION BAR========================================================*/
/*========== DROPDOWN ==========*/
.thumbnail_text_dropdown_menu_left{left:100%;}
.thumbnail_text_dropdown_menu_shortcodes{width:725px;left:-225px;}
.thumbnail_text_dropdown_menu_features{width:725px;left:-370px;}
.thumbnail_text_dropdown_menu_mega{left:-485px;width:725px;}
.thumbnail_text_dropdown_menu_shop{left:-586px;width:750px;}
}
/*================================================== MEDIA 992px - 1250px ==================================================*/
@media (min-width:992px) and (max-width:1250px){/*=======================================================NAVIGATION BAR========================================================*/
.thumbnail_text_navbar_responsive{padding-left:0px;padding-right:0px;}
/*========== DROPDOWN ==========*/
.thumbnail_text_dropdown_menu_shortcodes{left:-420px;width:950px;}
.thumbnail_text_dropdown_menu_features{left:-565px;width:950px;}
.thumbnail_text_dropdown_menu_mega{left:-709px;width:990px;}
.thumbnail_text_dropdown_menu_shop{left:-775px;width:950px;}
}
/*==========================================================================================================================================THUMBNAIL TEXT HEADER VERSION COLOR (DARK BLUE)==========================================================================================================================================*/
/*=======================================================---00---NAVIGATION BAR========================================================*/
/*=============== NAVBAR ===============*/
.thumbnail_text_navbar{background:transparent;}
.thumbnail_text_navbar.affix{background:rgba(39,39,39,0.9);box-shadow:0px 0px 10px #4c4c4c;}
/*=============== MEDIA QUERIES ===============*/
@media (max-width:991px){.thumbnail_text_navbar{background:rgba(28,28,28,1);}
.thumbnail_text_navbar.affix{background:rgba(28,28,28,1);}
}
.thumbnail_text_navbar_nav>li>a,.thumbnail_text_navbar_nav>li>a:visited{color:#ffffff !important;}
.thumbnail_text_navbar_toggle .thumbnail_text_top_icon_bar,.thumbnail_text_navbar_toggle .thumbnail_text_bottom_icon_bar{background:#5076bb !important;}
.thumbnail_text_navbar_nav>li>a:hover,.thumbnail_text_navbar_nav>li>a:active,.thumbnail_text_navbar_nav>li>a:focus{color:#5076bb !important;}
.thumbnail_text_navbar_nav>li>a:before{background:#5076bb;}
.thumbnail_text_navbar_toggle.collapsed .thumbnail_text_top_icon_bar,.thumbnail_text_navbar_toggle.collapsed .thumbnail_text_middle_icon_bar,.thumbnail_text_navbar_toggle.collapsed .thumbnail_text_bottom_icon_bar{background:#5076bb !important;}
.thumbnail_text_navbar_nav>li>a,.thumbnail_text_navbar_nav>li>a:visited,.thumbnail_text_navbar_nav>li>a:hover,.thumbnail_text_navbar_nav>li>a:active,.thumbnail_text_navbar_nav>li>a:focus,.thumbnail_text_navbar_toggle,.thumbnail_text_navbar_toggle:hover,.thumbnail_text_navbar_toggle:active,.thumbnail_text_navbar_toggle:focus{background:transparent !important;}
.thumbnail_text_navbar.affix{box-shadow:0px 0px 10px #dddddd;}
/*=============== DROPDOWN ===============*/
.thumbnail_text_dropdown_menu{background:#4c4c4c;}
.thumbnail_text_dropdown_menu li a,.thumbnail_text_dropdown_menu li a:visited{color:#ececec !important;}
.thumbnail_text_dropdown_menu li a:hover,.thumbnail_text_dropdown_menu li a:active,.thumbnail_text_dropdown_menu li a:focus{color:#ffffff !important;}
.thumbnail_text_dropdown_menu li a:hover,.thumbnail_text_dropdown_menu li a:active,.thumbnail_text_dropdown_menu li a:focus{background:#5076bb !important;}
.thumbnail_text_dropdown_menu{box-shadow:0px 0px 5px #4c4c4c;}
.thumbnail_text_dropdown_menu{border-top:2px solid #5076bb;}
/*=============== SHORTCODES,FEATURES,MEGA,SHOP ===============*/
.thumbnail_text_dropdown_menu_mega,.thumbnail_text_dropdown_menu_shop{background:#4c4c4c;}
.thumbnail_text_features_list>ul>li>h4,.thumbnail_text_dropdown_menu_mega>li>ul>li>h4,.thumbnail_text_dropdown_menu_mega>li>ul>li>h5,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:visited,.thumbnail_text_dropdown_menu_shop_col>h5>a,.thumbnail_text_dropdown_menu_shop_col>h5>a:visited{color:#999999 !important;}
.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:hover,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:active,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:focus,.thumbnail_text_dropdown_menu_shop_col>h5>a:hover,.thumbnail_text_dropdown_menu_shop_col>h5>a:active,.thumbnail_text_dropdown_menu_shop_col>h5>a:focus{color:#5076bb !important;}
.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:hover,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:active,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>h5>a:focus,.thumbnail_text_dropdown_menu_shop_col>h5>a:hover,.thumbnail_text_dropdown_menu_shop_col>h5>a:active,.thumbnail_text_dropdown_menu_shop_col>h5>a:focus{background:transparent !important;}
.thumbnail_text_shortcodes_list ul li a,.thumbnail_text_shortcodes_list ul li a:visited,.thumbnail_text_features_list ul li a,.thumbnail_text_features_list ul li a:visited,.thumbnail_text_dropdown_menu_mega>li>ul>li>a,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:visited,.thumbnail_text_dropdown_menu_mega>li>ul>li>p,.thumbnail_text_dropdown_menu_mega>li>ul>li>div>div>p,.thumbnail_text_dropdown_menu_shop_col>p{color:#ececec !important;}
.thumbnail_text_shortcodes_list ul li a:hover,.thumbnail_text_shortcodes_list ul li a:active,.thumbnail_text_shortcodes_list ul li a:focus,.thumbnail_text_features_list ul li a:hover,.thumbnail_text_features_list ul li a:active,.thumbnail_text_features_list ul li a:focus,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:hover,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:active,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:focus{color:#5076bb !important;}
.thumbnail_text_shortcodes_list ul li a:hover,.thumbnail_text_shortcodes_list ul li a:active,.thumbnail_text_shortcodes_list ul li a:focus,.thumbnail_text_features_list ul li a:hover,.thumbnail_text_features_list ul li a:active,.thumbnail_text_features_list ul li a:focus,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:hover,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:active,.thumbnail_text_dropdown_menu_mega>li>ul>li>a:focus{background:transparent !important;}
.thumbnail_text_shortcodes_list_border{border-right:1px solid #999999;}
.thumbnail_text_features_list_border{border-right:1px solid #999999;}
.thumbnail_text_dropdown_menu_mega>li>ul>li:first-child{border-bottom:1px solid #999999;}
/*=======================================================---02---THUMBNAIL TEXT SLIDER========================================================*/
.thumbnail_text_carousel_wrapper{background:#000000;}
/*========== LEFT/RIGHT CONTROL ==========*/
/*========== THUMBNAIL CONTROL ==========*/
.thumbnail_text_carousel_control_left,.thumbnail_text_carousel_control_right{color:#262626;background:transparent !important;}
.thumbnail_text_carousel_control_left:hover,.thumbnail_text_carousel_control_left:active,.thumbnail_text_carousel_control_left:focus,.thumbnail_text_carousel_control_right:hover,.thumbnail_text_carousel_control_right:active,.thumbnail_text_carousel_control_right:focus{color:#5076bb;}
/*========== INDICATORS THUMBNAIL TEXT ==========*/
.thumbnail_text_carousel_indicators{background:#272727;}
.thumbnail_text_carousel_indicators li{color:#ffffff;background:#4c4c4c;}
.thumbnail_text_carousel_indicators .active{background:#5076bb;}
/*=======================================================---02---THUMBNAIL TEXT MODAL========================================================*/
.thumbnail_text_modal_fade{background:rgba(255,255,255,0.4);}
.thumbnail_text_modal_header>button,.thumbnail_text_modal_body_form button,#thumbnail_text_contact_us_modal_social_icons ul li a,#thumbnail_text_contact_us_modal_social_icons ul li a:hover,#thumbnail_text_contact_us_modal_social_icons ul li a:active,#thumbnail_text_contact_us_modal_social_icons ul li a:focus{color:#ffffff;}
.thumbnail_text_modal_header{background:#000000;}
.thumbnail_text_modal_header >button:hover,.thumbnail_text_modal_header>button:active,.thumbnail_text_modal_header>button:focus{color:#5076bb;}
.thumbnail_text_modal_body_form button:hover,.thumbnail_text_modal_body_form button:active,.thumbnail_text_modal_body_form button:focus{color:#ffffff !important;}
.thumbnail_text_modal_body,.thumbnail_text_modal_body_form div input,.thumbnail_text_modal_body_form div textarea{background:#ffffff;}
.thumbnail_text_modal_body_form div input,.thumbnail_text_modal_body_form div textarea{color:#000000;}
.thumbnail_text_modal_body_form button:before,#thumbnail_text_contact_us_modal_social_icons ul li a{background:#5076bb;}
.thumbnail_text_modal_body_form div input,.thumbnail_text_modal_body_form div textarea{border:1px solid #dddddd;}
.thumbnail_text_modal_body_form div input:focus,.thumbnail_text_modal_body_form div textarea:focus{border:1px solid #5076bb;}
.thumbnail_text_modal_body_form button,#thumbnail_text_contact_us_modal_social_icons ul li a:before{background:#4c4c4c;}
.thumbnail_text_modal_body_form button:hover,.thumbnail_text_modal_body_form button:active,.thumbnail_text_modal_body_form button:focus{background:#4c4c4c !important;}
#thumbnail_text_modal_user_image img{background:transparent !important;}
.thumbnail_text_modal_footer a{color:#4c4c4c;}
分享到QQ
分享到微博
微信扫一扫
