<div class="Number"> <div class="NumberItem"> <h1><span class="counter">2012</span></h1> <h2>公司成立时间</h2> </div> <div class="NumberItem"> <h1><span class="counter">15</span>+</h1> <h2>网站建设经验</h2> </div> <div class="NumberItem"> <h1><span class="counter">300</span>+</h1> <h2>全国服务网络</h2> </div> <div class="NumberItem"> <h1><span class="counter">1000</span>+</h1> <h2>全国团队成员</h2> </div> <div class="NumberItem"> <h1><span class="counter">70000</span>+</h1> <h2>全国已服务客户</h2> </div> </div> /* css */ .Number { border-top: 1px solid #ffffff80; position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; display: flex; justify-content: space-around; } .NumberItem { padding: 30px 0; } .NumberItem h1 { font-family: 'Impact'; font-weight: 100; font-size: 40px; line-height: 1; background: linear-gradient(242.13deg, #FFFFFF 19.52%, #997C65 95.78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; display: flex; } .NumberItem h1 span { font-family: 'Impact'; font-weight: 100; font-size: 40px; } .NumberItem h2 { margin-top: 10px; font-weight: bold; font-size: 16px; line-height: 1; background: linear-gradient(245.45deg, #FFFFFF 8.2%, #997C65 99.64%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } @media (max-width: 720px) { .Number { position: relative; display: flex; justify-content: center; flex-wrap: wrap; } .NumberItem { width: 33%; padding: 15px 0; display: flex; flex-direction: column; align-items: center; } .NumberItem h1, .NumberItem h2 { background: linear-gradient(242.13deg, #fbd48a 19.52%, #997C65 95.78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } } @media (max-width: 460px) { .NumberItem { width: 50%; } .NumberItem h1, .NumberItem h1 span { font-size: 28px; } }
上一篇:css 文字 渐变色 阴影色
下一篇:已经是最后一篇