css布局实现响应式图文介绍页面代码
代码语言:html
所属分类:响应式
代码描述:css布局实现响应式图文介绍页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>品牌介绍动态效果网页</title> <meta name="description" content="Neat"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no"> <style> html, body { min-height: 100%; /* min-width: 1000px; */ } * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } .hide { display: none; } .lf { float: left; } .lr { float: right; } .red, .red a,.red a h5, .red a p { color: #FF0000 !important; } a { text-decoration: none; color: inherit; } .mr2 { margin-right: 1rem; } .ml2 { margin-left: 1rem; } .main-group { box-sizing: border-box; width: 100%; min-height: 100vh; height: 100vh; display: flex; /* justify-content: center; */ margin: 0 auto; } .logo-group { box-sizing: border-box; background: #dcba86; height: 100%; /* width: 30%; */ transition: 2s; -moz-transition: 2s; /* Firefox 4 */ -webkit-transition: 2s; /* Safari 和 Chrome */ -o-transition: 2s; /* Opera */ width: 0; } .logo-group img { margin: 3em; opacity: 0; transition: 2s; -moz-transition: 2s; /* Firefox 4 */ -webkit-transition: 2s; /* Safari 和 Chrome */ -o-transition: 2s; /* Opera */ } .desc-group { position: relative; width: 70%; height: 100%; background: #fff; } .desc-group .color-blod { position: absolute; width: 0; height: 100vh; background: #747373; animation: to-right 2s cubic-bezier(0.71,0.04,0.4,0.92)forwards; } @keyframes to-right { 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } } .desc-group .box-group { position: absolute; height: 40%; left: 28vw; top: 25vh; opacity: 0; transition: 2s; -moz-transition: 2s; /* Firefox 4 */ -webkit-transition: 2s; /* Safari 和 Chrome */ -o-transition: 2s; /* Opera */ } .desc-group .box-group h2 { font-size: 6rem; margin-bottom: 3rem; color: #c99035; font-weight: 300; } .desc-group .box-group p { margin-left: 0.5rem;; font-size: 1.5rem; padding-right: 20rem; color: #747373; font-weight: 300; } .desc-group .box-group a { display: inline-block; margin-top: 4rem; font-size: 1rem; color: #747373; border: 1px solid #747373; border-radius: 6px; padding: 5px 30px; } .main-group .pic { position: absolute; z-index: 1; left: 15vw; top: 20vh; height: 60vh; /* width: 40vw; */ width: 0; background: url('//repo.bfw.wiki/bfwrepo/image/610fc112c4061.png') no-repeat; background-size: cover; box-shadow: 7px 29px 49px 0px rgba(0,0,0,.3); transition: 1s; -moz-transition: 1s; /* Firefox 4 */ -webkit-transition:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0