TweenMax实现图文卡片立体层叠上下滚动效果代码-html代码-BFW代码库

TweenMax实现图文卡片立体层叠上下滚动效果代码

代码语言：html

代码描述：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:53px;
        	border-radius:50%;
        	object-fit:cover
        }
        .slider-item .animation-card_content {
        	width:100%;
        	max-width:374px;
        	margin-left:26px;
        	font-family:"Open Sans",sans-serif
        }
        .slider-item .animation-card_content .animation-card_content_title {
        	color:#4a4545;
        	font-size:16px;
        	font-weight:400;
        	letter-spacing:-0.18px;
        	line-height:24px;
        	margin:0
        }
        .slider-item .animation-card_content .animation-card_content_description {
        	color:#696d74;
        	font-size:15px;
        	font-weight:300;
        	letter-spacing:normal;
        	line-height:24px;
        	margin:10px 0 0 0
        }
        .slider-item .animation-card_content .animation-card_content_city {
        	font-size:11px;
        	margin:10px 0 0 0;
        	font-size:12px;
        	font-weight:500;
        	text-transform:uppercase;
        	color:#696d74
        }
    </style>
</head>

<body>

    <div class="slider-wrap">
        <div id="card-slider" class="slider">
            <div class="slider-item">
                <div class="animation-card_image"><img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt=""></div>
                <div class="animation-card_content">
                    <h4 class="animation-card_content_title title-2">Charlize Theron 1</h4>
                    <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
                    <p class="animation-card_content_city">New York,NY</p>
                </div>
            </div>
            <div class="slider-item">
                <div class="animation-card_image"><img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt=""></div>
                <div class="animation-card_content">
                    <h4 class="animation-card_content_title title-2">Charlize Theron 2</h4>
                    <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
                    <p class="animation-card_content_city">New York,NY</p>
                </div>
            </div>
            <.........完整代码请登录后点击上方下载按钮下载查看