/* 织梦58(dede58.com)做最好的织梦整站模板下载网站 */ @charset "utf-8"; /*图片*/ /*旧修改*/ .w-img-border-Hairline .img { padding: 1px; } .w-img-border-Thin .img { padding: 3px; } .w-img-border-Medium .img { padding: 5px; } .w-img-border-Thick .img { padding: 10px; } .w-img-border-gray .img { border: 1px solid #ddd; } .w-img-border-black .img { border: 1px solid #000; } .w-img-border-Hairline img { padding: 0; } .w-img-border-Thin img { padding: 0; } .w-img-border-Medium img { padding: 0; } .w-img-border-Thick img { padding: 0; } .w-img-border-gray img { border: 0; } .w-img-border-black img { border: 0; } .w-simImg .w-img-caption { padding-top: 0; } /*新增*/ .caption-text-pd-default { padding: 0 !important; } .caption-text-pd-Hairline { padding: 5px !important; } .caption-text-pd-Thin { padding: 10px !important; } .caption-text-pd-Medium { padding: 15px !important; } .caption-text-pd-Thick { padding: 20px !important; } .caption-text-pd-Large { padding: 30px !important; } .w-simImg .image-w { position: relative; overflow: hidden; } .caption { position: relative; } .caption .captionbg { position: absolute; width: 100%; height: 100%; } .caption .caption-text { z-index: 10; position: relative; word-break: break-all; word-wrap: break-word; } .caption h3 { font-weight: normal; font-size: 115%; margin: 0; padding: 0.5em 5px 0.7em; } .caption p { margin: 0; padding-bottom: 0.7em; } .caption .more1 .more_span { padding: 0.2em 1em; border: 1px solid #999; display: inline-block; *display:inline; *zoom:1; } .caption .more1 i { display: none; } .caption .more2 .more_span { display: none; } .caption .more2 i { display: inline-block; *display:inline; *zoom:1; width: 75px; height: 75px; background: url(../images/icon_link1.png) no-repeat center; } .caption .more3 .more_span { display: none; } .caption .more3 i { display: inline-block; *display:inline; *zoom:1; width: 75px; height: 75px; background: url(../images/icon_link2.png) no-repeat center; } .caption .more4 .more_span { display: none; } .caption .more4 i { display: inline-block; *display:inline; *zoom:1; width: 75px; height: 75px; background: url(../images/icon_link3.png) no-repeat center; } .imgFloat .caption { position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; } .imgFloat .caption .captionbg { background: #000; opacity: 0.5; *filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); z-index: 0; } .imgFloat .caption .caption-text .caption-text-in { padding: 0 10px; } .imgFloat .caption .more1 .more_span { border-color: #fff; } .imgFloatFull .caption { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; color: #fff; padding-top: 0; } .imgFloatFull .caption .captionbg { background: #000; opacity: 0.5; *filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); z-index: 0; } .imgFloatFull .caption .caption-text { display: table; height: 100%; width: 100%; } .imgFloatFull .caption .caption-text .caption-text-in { display: table-cell; vertical-align: middle; padding: 10px; } .imgFloatFull .caption .more1 .more_span { border-color: #fff; } .imgScaleBig .img { overflow: hidden; } .imgScaleBig:hover img { transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgScaleSmall .img { overflow: hidden; } .imgScaleSmall img { transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); } .imgScaleSmall:hover img { transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgRotate .img { overflow: hidden; } .imgRotate:hover img { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgLeft .img { overflow: hidden; } .imgLeft img { transform: scale(1.2) translateX(5%); -ms-transform: scale(1.2) translateX(5%); -moz-transform: scale(1.2) translateX(5%); -webkit-transform: scale(1.2) translateX(5%); -o-transform: scale(1.2) translateX(5%); } .imgLeft:hover img { transform: scale(1.2) translateX(0); -ms-transform: scale(1.2) translateX(0); -moz-transform: scale(1.2) translateX(0); -webkit-transform: scale(1.2) translateX(0); -o-transform: scale(1.2) translateX(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgRight .img { overflow: hidden; } .imgRight img { transform: scale(1.2) translateX(-5%); -ms-transform: scale(1.2) translateX(-5%); -moz-transform: scale(1.2) translateX(-5%); -webkit-transform: scale(1.2) translateX(-5%); -o-transform: scale(1.2) translateX(-5%); } .imgRight:hover img { transform: scale(1.2) translateX(0); -ms-transform: scale(1.2) translateX(0); -moz-transform: scale(1.2) translateX(0); -webkit-transform: scale(1.2) translateX(0); -o-transform: scale(1.2) translateX(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTop .img { overflow: hidden; } .imgTop img { transform: scale(1.2) translateY(5%); -ms-transform: scale(1.2) translateY(5%); -moz-transform: scale(1.2) translateY(5%); -webkit-transform: scale(1.2) translateY(5%); -o-transform: scale(1.2) translateY(5%); } .imgTop:hover img { transform: scale(1.2) translateY(0); -ms-transform: scale(1.2) translateY(0); -moz-transform: scale(1.2) translateY(0); -webkit-transform: scale(1.2) translateY(0); -o-transform: scale(1.2) translateY(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgBottom .img { overflow: hidden; } .imgBottom img { transform: scale(1.2) translateY(-5%); -ms-transform: scale(1.2) translateY(-5%); -moz-transform: scale(1.2) translateY(-5%); -webkit-transform: scale(1.2) translateY(-5%); -o-transform: scale(1.2) translateY(-5%); } .imgBottom:hover img { transform: scale(1.2) translateY(0); -ms-transform: scale(1.2) translateY(0); -moz-transform: scale(1.2) translateY(0); -webkit-transform: scale(1.2) translateY(0); -o-transform: scale(1.2) translateY(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgLeftBig .img { overflow: hidden; } .imgLeftBig:hover img { transform: translateX(-100%); -ms-transform: translateX(-100%); -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgLeftBig .caption .captionbg { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .imgRightBig .img { overflow: hidden; } .imgRightBig:hover img { transform: translateX(100%); -ms-transform: translateX(100%); -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgRightBig .caption .captionbg { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .imgTopBig .img { overflow: hidden; } .imgTopBig:hover img { transform: translateY(-100%); -ms-transform: translateY(-100%); -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -o-transform: translateY(-100%); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTopBig .caption .captionbg { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .imgBottomBig .img { overflow: hidden; } .imgBottomBig:hover img { transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgBottomBig .caption .captionbg { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .imgScaleHide .img { overflow: hidden; } .imgScaleHide:hover .img { transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgFadeInScale .img { transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); } .imgFadeInScale:hover .img { transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .captionbgFadeInDefault .captionbg { bottom: -100%; } .captionbgFadeInDefault:hover .captionbg { bottom: 0; } .captionbgFadeInUp .captionbg { bottom: -100%; } .captionbgFadeInUp:hover .captionbg { bottom: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgFadeInDown .captionbg { top: -1000px; } .captionbgFadeInDown:hover .captionbg { top: 0; transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out; } .captionbgFadeInRight .captionbg { left: -100%; } .captionbgFadeInRight:hover .captionbg { left: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgFadeInLeft .captionbg { right: -100%; } .captionbgFadeInLeft:hover .captionbg { right: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgFadeInScale .captionbg { transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); bottom: -100%; } .captionbgFadeInScale:hover .captionbg { bottom: 0; transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingLeft .captionbg { left: 100%; transform: perspective(400px) rotateY(-90deg); -ms-transform: perspective(400px) rotateY(-90deg); -moz-transform: perspective(400px) rotateY(-90deg); -webkit-transform: perspective(400px) rotateY(-90deg); -o-transform: perspective(400px) rotateY(-90deg); transform-origin: right center 0; -ms-transform-origin: right center 0; -moz-transform-origin: right center 0; -webkit-transform-origin: right center 0; -o-transform-origin: right center 0; transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingLeft:hover .captionbg { left: 0; transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -webkit-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); } .captionbgSwingRight .captionbg { left: -100%; transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -webkit-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform-origin: left center 0; -ms-transform-origin: left center 0; -moz-transform-origin: left center 0; -webkit-transform-origin: left center 0; -o-transform-origin: left center 0; transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingRight:hover .captionbg { left: 0; transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -webkit-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); } .captionbgSwingDown .captionbg { top: -100%; transform: perspective(400px) rotateX(-90deg); -ms-transform: perspective(400px) rotateX(-90deg); -moz-transform: perspective(400px) rotateX(-90deg); -webkit-transform: perspective(400px) rotateX(-90deg); -o-transform: perspective(400px) rotateX(-90deg); transform-origin: center top 0; -ms-transform-origin: center top 0; -moz-transform-origin: center top 0; -webkit-transform-origin: center top 0; -o-transform-origin: center top 0; transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingDown:hover .captionbg { top: 0; transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -webkit-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); } .captionbgSwingUp .captionbg { bottom: -100%; transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -webkit-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform-origin: center bottom 0; -ms-transform-origin: center bottom 0; -moz-transform-origin: center bottom 0; -webkit-transform-origin: center bottom 0; -o-transform-origin: center bottom 0; transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingUp:hover .captionbg { bottom: 0; transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -webkit-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); } .captionbgFadeInRotate .captionbg { bottom: -200%; transform: scale(0.5) rotateZ(180deg); -ms-transform: scale(0.5) rotateZ(180deg); -moz-transform: scale(0.5) rotateZ(180deg); -webkit-transform: scale(0.5) rotateZ(180deg); -o-transform: scale(0.5) rotateZ(180deg); transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgFadeInRotate:hover .captionbg { bottom: 0; transform: scale(1) rotateZ(0deg); -ms-transform: scale(1) rotateZ(0deg); -moz-transform: scale(1) rotateZ(0deg); -webkit-transform: scale(1) rotateZ(0deg); -o-transform: scale(1) rotateZ(0deg); } .captionbgCircleTL .captionbg { left: -100%; top: -100%; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgCircleTL:hover .captionbg { left: 0; top: 0; transform: scale(3); -ms-transform: scale(3); -moz-transform: scale(3); -webkit-transform: scale(3); -o-transform: scale(3); } .captionbgCircleTR .captionbg { right: -100%; top: -100%; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgCircleTR:hover .captionbg { right: 0; top: 0; transform: scale(3); -ms-transform: scale(3); -moz-transform: scale(3); -webkit-transform: scale(3); -o-transform: scale(3); } .captionbgCircleBL .captionbg { left: -100%; bottom: -100%; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgCircleBL:hover .captionbg { left: 0; bottom: 0; transform: scale(3); -ms-transform: scale(3); -moz-transform: scale(3); -webkit-transform: scale(3); -o-transform: scale(3); } .captionbgCircleBR .captionbg { left: 100%; top: 100%; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .captionbgCircleBR:hover .captionbg { left: 0; top: 0; transform: scale(3); -ms-transform: scale(3); -moz-transform: scale(3); -webkit-transform: scale(3); -o-transform: scale(3); } .captionbgHT .captionbg { transform: perspective(1000px) rotateY(90deg); -ms-transform: translateY(100%); -moz-transform: perspective(1000px) rotateY(90deg); -webkit-transform: perspective(1000px) rotateY(90deg); -o-transform: perspective(1000px) rotateY(90deg); transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgHT:hover .captionbg { transform: perspective(600px) rotateY(0deg); -ms-transform: translateY(0); -moz-transform: perspective(600px) rotateY(0deg); -webkit-transform: perspective(600px) rotateY(0deg); -o-transform: perspective(600px) rotateY(0deg); } .captionbgVT .captionbg { transform: perspective(600px) rotateX(90deg); -ms-transform: translateX(100%); -moz-transform: perspective(600px) rotateX(90deg); -webkit-transform: perspective(600px) rotateX(90deg); -o-transform: perspective(600px) rotateX(90deg); transition: transform 0.5s; -moz-transition: transform 0.5s; -webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgVT:hover .captionbg { transform: perspective(600px) rotateX(0deg); -ms-transform: translateX(0); -moz-transform: perspective(600px) rotateX(0deg); -webkit-transform: perspective(600px) rotateX(0deg); -o-transform: perspective(600px) rotateX(0deg); } .captionbgFadeOut .caption .captionbg { background: #fff; opacity: 0.3; *filter:alpha(opacity=30); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30); z-index: 0; } .captionbgFadeOutDefault .captionbg { bottom: 0; } .captionbgFadeOutDefault:hover .caption .captionbg { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .captionbgFadeOutScale .caption .captionbg { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); z-index: 0; } .captionbgFadeOutScale { transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); bottom: 0; opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .captionbgFadeOutScale:hover .captionbg { transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); } .textFade .textFadeInDefault { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width: 100%; } .textFade:hover .textFadeInDefault { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeInUp { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-bottom: -35px; width: 100%; } .textFade:hover .textFadeInUp { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-bottom: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeInDown { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-bottom: 35px; width: 100%; } .textFade:hover .textFadeInDown { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-bottom: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeInLeft { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-left: -100%; width: 100%; } .textFade:hover .textFadeInLeft { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-left: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeInRight { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-left: 100%; width: 100%; } .textFade:hover .textFadeInRight { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-left: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeInScale { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width: 100%; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); } .textFade:hover .textFadeInScale { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeInRotate { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width: 100%; } .textFade:hover .textFadeInRotate { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .textFade .textFadeOutDefault { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); width: 100%; } .textFade:hover .textFadeOutDefault { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .textFade .textFadeOutScale { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); width: 100%; transform: scale(0); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); } .textFade:hover .textFadeOutScale { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextL .caption::before, .imgTextL .caption::after { position: absolute; content: ""; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index: 99; } .imgTextL .caption::before { border-bottom: 1px solid #fff; border-top: 1px solid #fff; bottom: 20px; left: 10px; right: 10px; top: 20px; transform: scale(0, 1); -ms-transform: scale(0, 1); -moz-transform: scale(0, 1); -webkit-transform: scale(0, 1); -o-transform: scale(0, 1); transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; } .imgTextL .caption::after { border-left: 1px solid #fff; border-right: 1px solid #fff; bottom: 10px; left: 20px; right: 20px; top: 10px; transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -webkit-transform: scale(1, 0); -o-transform: scale(1, 0); transform-origin: 100% 0 0; -ms-transform-origin: 100% 0 0; -moz-transform-origin: 100% 0 0; -webkit-transform-origin: 100% 0 0; -o-transform-origin: 100% 0 0; } .imgTextL:hover .caption::before, .imgTextL:hover .caption::after { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextA .caption::before, .imgTextA .caption::after { position: absolute; content: ""; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index: 99; } .imgTextA .caption::before { border-bottom: 1px solid #fff; border-top: 1px solid #fff; bottom: 10px; left: 10px; right: 10px; top: 10px; transform: scale(0, 1); -ms-transform: scale(0, 1); -moz-transform: scale(0, 1); -webkit-transform: scale(0, 1); -o-transform: scale(0, 1); transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; } .imgTextA .caption::after { border-left: 1px solid #fff; border-right: 1px solid #fff; bottom: 10px; left: 10px; right: 10px; top: 10px; transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -webkit-transform: scale(1, 0); -o-transform: scale(1, 0); transform-origin: 100% 0 0; -ms-transform-origin: 100% 0 0; -moz-transform-origin: 100% 0 0; -webkit-transform-origin: 100% 0 0; -o-transform-origin: 100% 0 0; } .imgTextA:hover .caption::before, .imgTextA:hover .caption::after { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextB .caption::before { content: ""; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index: 99; transform: scale(0); -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); border: 1px solid #fff; bottom: 10px; left: 10px; position: absolute; right: 10px; top: 10px; } .imgTextB:hover .caption::before { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); z-index: 99; transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextS .caption::before, .imgTextS .caption::after { background: #fff none repeat scroll 0 0; content: ""; height: 1px; left: 50%; position: absolute; z-index: 99; top: 50%; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transform: translate3d(-50%, -50%, 0px); -ms-transform: translate(-50%, -50%); -moz-transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); -o-transform: translate3d(-50%, -50%, 0px); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; width: 80%; } .imgTextS:hover .caption::before { opacity: 0.5; *filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); transform: translate3d(-50%, -50%, 0px) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate3d(-50%, -50%, 0px) rotate(45deg); -webkit-transform: translate3d(-50%, -50%, 0px) rotate(45deg); -o-transform: translate3d(-50%, -50%, 0px) rotate(45deg); } .imgTextS:hover .caption::after { opacity: 0.5; *filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); transform: translate3d(-50%, -50%, 0px) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -moz-transform: translate3d(-50%, -50%, 0px) rotate(-45deg); -webkit-transform: translate3d(-50%, -50%, 0px) rotate(-45deg); -o-transform: translate3d(-50%, -50%, 0px) rotate(-45deg); } .imgTextC .caption::before { content: ""; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index: 99; transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); border: 1px solid #fff; bottom: 10px; left: 10px; position: absolute; right: 10px; top: 10px; } .imgTextC:hover .caption::before { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextD .caption::before { border: 2px solid #fff; content: ""; height: 50%; left: 50%; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); position: absolute; z-index: 99; top: 50%; transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(0, 0); -moz-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -webkit-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -moz-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; width: 50%; } .imgTextD:hover .caption::before { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -ms-transform: translate(-50%, -50%) rotate(-45deg) scale(1, 1); -moz-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); } .imgTextE .caption::before { border: 2px solid #fff; content: ""; height: 50%; left: 50%; opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); position: absolute; z-index: 99; top: 50%; transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0, 0); -moz-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); -webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -webkit-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -moz-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; width: 50%; } .imgTextE:hover .caption::before { opacity: 1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -ms-transform: translate(-50%, -50%) rotate(45deg) scale( 1, 1); -moz-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); } .imgTextF .caption::before { background: rgba(255, 255, 255, 0.5); content: ""; height: 100%; left: 0; position: absolute; top: 0; transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); -ms-transform: scale(1.9, 1.4) rotate(45deg) translate(0px, -100%); -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); transition: transform 0.6s ease 0s; -moz-transition: transform 0.6s ease 0s; -webkit-transition: transform 0.6s ease 0s; -o-transition: transform 0.6s ease 0s; width: 100%; } .imgTextF:hover .caption::before { transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px); -ms-transform: scale(1.9, 1.4) rotate(45deg) translate(0px, 100%x); -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px); -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px); -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px); } .imgTextF .caption .captionbg { opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); } .imgTextG .caption::after { border-bottom: 1px solid #fff; border-top: 1px solid #fff; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -ms-transform: rotate(45deg) scale(1, 0); -moz-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -webkit-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; width: 100%; transition: opacity 0.6s ease 0s, transform 0.6s ease 0s; -moz-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s; -webkit-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s; -o-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s; } .imgTextG:hover .caption::after { opacity: 1; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -ms-transform: rotate(45deg) scale(1, 1); -moz-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); } /*图片集*/ .multi-imgs .imgFadeInScale .img { width: 100%; height: 100%; position: absolute; } @media (max-width:480px) { .caption-text-pd-Medium { padding: 0.8em !important; } .caption-text-pd-Thick { padding: 1em !important; } .caption-text-pd-Large { padding: 1em !important; } }