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