游戏卡通人物卡片动态展示效果幻灯片
代码语言:html
所属分类:幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/slick.min.css"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/slick-theme.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Lato:400,700,900); *, *:before, *:after { box-sizing: border-box; } body { background: -webkit-gradient(linear, left top, left bottom, from(#8c7a7a), color-stop(65%, #af877c), to(#af877c)) fixed; background: linear-gradient(to bottom, #8c7a7a 0%, #af877c 65%, #af877c 100%) fixed; background: url("http://repo.bfw.wiki/bfwrepo/image/5e32401972114.png") no-repeat center center fixed; background-size: cover; font: 14px/20px "Lato", Arial, sans-serif; color: #9E9E9E; margin-top: 30px; } .slide-container { margin: auto; width: 600px; text-align: center; } .wrapper { padding-top: 40px; padding-bottom: 40px; } .wrapper:focus { outline: 0; } .clash-card { background: white; width: 300px; display: inline-block; margin: auto; border-radius: 19px; position: relative; text-align: center; box-shadow: -1px 15px 30px -12px black; z-index: 9999; } .clash-card__image { position: relative; height: 230px; margin-bottom: 35px; border-top-left-radius: 14px; border-top-right-radius: 14px; } .clash-card__image--barbarian { background: url("http://repo.bfw.wiki/bfwrepo/image/5e32401972114.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_370,h_370,/quality,q_90"); } .clash-card__image--barbarian img { width: 400px; position: absolute; top: -65px; left: -70px; } .clash-card__image--archer { background: url("http://repo.bfw.wiki/bfwrepo/image/5e32401972114.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_370,h_370,/quality,q_90"); } .clash-card__image--archer img { width: 400px; position: absolute; top: -34px; left: -37px; } .clash-card__image--giant { background: url("http://repo.bfw.wiki/bfwrepo/image/5e32401972114.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_370,h_370,/quality,q_90"); } .clash-card__image--giant img { width: 340px; position: absolute; top: -30px; left: -25px; } .clash-card__image--goblin { background: url("http://repo.bfw.wiki/bfwrepo/image/5e32401972114.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_370,h_370,/quality,q_90"); } .clash-card__image--goblin img { width: 370px; position: absolute; top: -21px; left: -37px; } .clash-card__image--wizard { background: url("http://repo.bfw.wiki/bfwrepo/image/5e32401972114.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_370,h_370,/quality,q_90"); } .clash-card__image--wizard img { width: 345px; position: absolute; top: -28px; left: -10px; } .clash-card__level { text-transform: uppercase; font-size: 12px; font-weight: 700; margin-bottom: 3px; } .clash-card__level--barbarian { color: #EC9B3B; } .clash-card__level--archer { color: #EE5487; } .clash-card__level--giant { color: #F6901A; } .clash-card__level--goblin { color: #82BB30; } .clash-card__level--wizard { color: #4FACFF; } .clash-card__unit-name { font-size: 26px; color: black; font-weight: 900; margin-bottom: 5px; } .clash-card__unit-description { padding: 20px; margin-bottom: 10px; } .clash-card__unit-stats--barbarian { background: #EC9B3B; } .clash-card__unit-stats--barbarian .one-third { border-right: 1px solid #BD7C2F; } .clash-card__unit-stats--archer { background: #EE5487; } .clash-card__unit-stats--archer .one-third { border-right: 1px solid #D04976; } .clash-card__unit-stats--giant { background: #F6901A; } .clash-card__unit-stats--giant .one-third { border-right: 1px solid #de7b09; } .clash-card__unit-stats--goblin { background: #82BB30; } .clash-card__unit-stats--goblin .one-third { border-right: 1px solid #71a32a; } .clash-card__unit-stats--wizard { background: #4FACFF; } .clash-card__unit-stats--wizard .one-third { border-right: 1px solid #309eff; } .clash-card__unit-stats { color: white; font-weight: 700; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .clash-card__unit-stats .one-third { width: 33%; float: left; padding: 20px 15px; } .clash-card__unit-stats sup { position: absolute; bottom: 4px; font-size: 45%; margin-left: 2px; } .clash-card__unit-stats .stat { position: relative; font-size: 24px; margin-bottom: 10px; } .clash-card__unit-stats .stat-value { text-transform: uppercase; font-weight: 400; font-size: 12px; } .clash-card__unit-stats .no-border { border-right: none; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .slick-prev { left: 100px; z-index: 999; } .slick-next { right: 100px; z-index: 999; } </style> </head> <body translate="no"> <div class="slide-container"> <div class="wrapper"> <div class="clash-card barbarian"> <div class="clash-card__image clash-card__image--barbarian"> <img src="http://repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" alt="barbarian" /> </div> <div class="clash-card__level clash-card__level--barbarian">Level 4</div> <div class="clash-card__unit-name">The Barbarian</div> <div class="clash-card__unit-description"> The Barbarian is a kilt-clad Scottish warrior with an angry, battle-ready expression, hungry for destruction. He has Killer yellow horseshoe mustache. </div> <div class="clash-card__unit-stats clash-card__unit-stats--barbarian clearfix"> <div class="one-third"> <div class="stat">20<sup>S</sup></div> <div class="stat-value">Training</div> </div> <div class="one-third"> <div class="stat">16</div> <div class="stat-value"&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0