asiaH7/assets/stylesheets/template/modules/adbanner.scss

210 lines
3.9 KiB
SCSS

.annc-box{
position: relative;
overflow: hidden;
// height: 500px;
}
.pages{
// transition:opacity.5s;
padding: 0;
width: 100%;
position:absolute;
left: 100%;
top:0;
text-align: center;
a{
display: block;
width: 100%;
height: 100%;
}
.w-annc__item{
float: none;
display: inline-block;
vertical-align: top;
text-align: left;
padding: 0 1px;
.mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:.3s;
}
.w-annc__postdate-wrap{
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0,.5);
color: #fff;
padding: 10px;
font-size: 0.875em;
}
.w-annc__subtitle{
font-size: 0.875em;
color: #666;
font-family: '微軟正黑體','sans-serif';
line-height: 1.7em;
}
.w-annc__title{
color:#7d7133;
&:hover{
color: $theme-color-main;
}
}
}
.data{
background: #fff;
&:hover .mask{
background: rgba(0,0,0,.3);
}
}
.w-annc__content-wrap{
padding: 15px;
}
img{
transform:scale(1,1) !important;
transition:transform 0s 2s ;
}
&.active{
left:0;
opacity: 1;
}
&.active img,&.ltr_in img,&.rtl_in img{
transition: transform 20s;
transform-origin:center center 0px;
transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);
transform:scale(1.3) !important;
}
// &.ltr_in {
// left: 0;
// -webkit-animation: left-in 1s ;
// -moz-animation: left-in 1s ;
// -ms-animation: left-in 1s ;
// -o-animation: left-in 1s ;
// animation: left-in 1s ;
// animation-fill-mode:forwards;
// }
// &.ltr_out {
// -webkit-animation: left-out 1s ;
// -moz-animation: left-out 1s ;
// -ms-animation: left-out 1s ;
// -o-animation: left-out 1s ;
// animation: left-out 1s ;
// animation-fill-mode:forwards;
// }
// &.rtl_in {
// left: 0;
// -webkit-animation: right-in 1s ;
// -moz-animation: right-in 1s ;
// -ms-animation: right-in 1s ;
// -o-animation: right-in 1s ;
// animation: right-in 1s ;
// animation-fill-mode:forwards;
// }
// &.rtl_out {
// -webkit-animation: right-out 1s ;
// -moz-animation: right-out 1s ;
// -ms-animation: right-out 1s ;
// -o-animation: right-out 1s ;
// animation: right-out 1s ;
// animation-fill-mode:forwards;
// }
}
@-webkit-keyframes left-in {
/*0%{left: -900px;}*/
0% {
left: -100%;
}
100% {
transform:scale(1,1);
opacity: 1;
left: 0;
}
}
@-webkit-keyframes right-in {
/*0%{left: 900px;}*/
0% {
left: 100%;
}
100% {
transform:scale(1,1);
opacity: 1;
left: 0;
}
}
@-webkit-keyframes left-out {
0% {
left: 0;
}
/*100%{left: 900px;}*/
100% {
opacity: 1;
left: 100%;
}
}
@-webkit-keyframes right-out {
0% {
left: 0;
}
/*100%{left: -900px;}*/
100% {
opacity: 1;
left: -100%;
}
}
@keyframes left-in {
/*0%{left: -900px;}*/
0% {
left: -100%;
}
100% {
transform:scale(1,1);
opacity: 1;
left: 0;
}
}
@keyframes right-in {
/*0%{left: 900px;}*/
0% {
left: 100%;
}
100% {
transform:scale(1,1);
opacity: 1;
left: 0;
}
}
@keyframes left-out {
0% {
left: 0;
}
/*100%{left: 900px;}*/
100% {
opacity: 1;
left: 100%;
}
}
@keyframes right-out {
0% {
left: 0;
}
/*100%{left: -900px;}*/
100% {
opacity: 1;
left: -100%;
}
}