TweenMax实现图文卡片立体层叠上下滚动效果代码
代码语言:html
所属分类:加载滚动
代码描述:TweenMax实现图文卡片立体层叠上下滚动效果代码
代码标签: TweenMax 图文 卡片 立体 层叠 上下 滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
html {
width:100%;
height:100%
}
body {
background-image:linear-gradient(180deg,#ffb253 0,#f56259 100%);
width:100%;
height:100%
}
.slider-wrap {
height:100%;
width:100%
}
.slider-wrap .slider {
position:absolute;
width:100%;
left:50px;
top:50px
}
.slider-item {
width:530px;
padding:20px 0 25px 30px;
border-radius:10px;
background-color:#fff;
display:flex;
justify-content:flex-start;
position:absolute;
opacity:0;
z-index:0;
box-shadow:0 4px 9px #f1f1f4;
position:absolute;
left:0;
top:0
}
.slider-item .animation-card_image {
max-width:60px;
max-height:60px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
box-shadow:0 4px 9px rgba(241,241,244,0.72);
background-color:#fff
}
.slider-item .animation-card_image img {
width:53px;
height:53p.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0