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