前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效
Posted 人生与戏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效相关的知识,希望对你有一定的参考价值。
没有啥好点子呀,不爽
html代码:
<div class="box"> <div class="content"> <h2>What is Lorem Ipsum?</h2> <p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices. </p> </div> </div>
css代码:
/* 内容居中显示: */ html,body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; } /* 画条纹背景: */ .box { width: 300px; height: 300px; /* linear-gradient的解说: http://www.runoob.com/cssref/func-linear-gradient.html */ background: linear-gradient( -45deg, white 0%, white 25%, hotpink 25%, hotpink 50%, white 50%, white 75%, hotpink 75%, hotpink 100% ); background-size: 10%; box-sizing: border-box; padding: 15px; animation: animate 2s linear infinite; } .box .content { background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 10%; } }
以上是关于前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效的主要内容,如果未能解决你的问题,请参考以下文章
前端每日实战:2.纯 CSS 创作一个矩形旋转 loader 特效
前端每日实战:102# 视频演示如何用纯 CSS 创作一个小和尚
前端每日实战4. 纯 CSS 创作一个金属光泽 3D 按钮特效
前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader