在PC版本浏览器上添加活动广告动画
一、html部分
二、css部分
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden; /*隐藏盒子*/
clear: both; /*清除浮动*/
}
.clearfix {
*zoom: 1; /* * 代表ie6、7能识别的特殊符号。zoom就是ie6、7清除浮动的方法。’*/
}
.left{
float:left;
}
.main-wraper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
}
.main-footer{
position:fixed;
bottom:0;
width:100%;
height:130px;
background: rgba(54, 54, 54, 0.75);
box-shadow: 0px -2px 6px 0px rgab(0, 0, 0, 0.15);
}
.footer{
padding:0 calc((100vw - 331px)/2);
}
.footer-banner{
width:256px;
height:208px;
position:relative;
bottom:78px;
margin:0 20px;
background:url(./images/ceremony-banner.png) no-repeat;
background-size:100%;
background-size:cover;
}
.footer-close{
float: left;
margin: 20px 0 0 20px;
width: 15px;
height: 15px;
background: url(./images/ceremony-close.png) no-repeat;
background-size: 100%;
background-size: cover;
cursor: pointer;
}
.main-footer-shrink{
position:fixed;
left:0;
bottom:20px;
width:114px;
height:46px;
line-height: 46px;
background: rgba(54, 54, 54, 0.75);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px 4px 4px 0px;
cursor: pointer;
}
.main-footer-shrink-default span {
font-size: 14px;
font-family: PingFangSC-Regular;
color: rgba(255, 255, 255, 1);
}
.main-footer-shrink-default i{
display: inline-block;
padding-left: 5px;
box-sizing: border-box;
font-style: normal;
width: 6px;
height: 10px;
background: url(./images/ceremony-arrow.png)no-repeat;
background-size: 100%;
background-size: cover;
}
@keyframes fade-in{
0%{
opacity: 0;
transform:translateX(-100%);
}
49%{
opacity:0;
}
50%{
opacity: 1;
transition:all 0.5 linear;
}
100%{
opacity:1;
}
}
.main-footer-transform-show {
animation: fade-in;
animation-duration: 1s;
}
.main-footer-transform-hide {
transform: translateX(-100%);
transition: all 0.5s linear;
}
.main-footer-shrink-transform-show {
animation: fade-in;
animation-duration: 1s;
}
.main-footer-shrink-transform-hide {
transform: translateX(-100%);
transition: all 0.5s linear;
}
三、javascript部分
let closeBanner = document.querySelector('.footer-close')
let footer = document.querySelector('.main-footer')
let footerShrink = document.querySelector('.main-footer-shrink-default')
closeBanner.addEventListener('click',()=>{
footer.classList.remove('main-footer-transform-show')
footerShrink.classList.remove('main-footer-shrink-transform-hide')
footer.classList.add('main-footer-transform-hide')
footerShrink.classList.add('main-footer-shrink','main-footer-shrink-transform-show')
})
footerShrink.addEventListener('click', ()=>{
footerShrink.classList.remove('main-footer-shrink-transform-show')
footerShrink.classList.add('main-footer-shrink','main-footer-shrink-transform-hide')
footer.classList.remove('main-footer-transform-hide')
footer.classList.add('main-footer-transform-show')
})