前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效

原文地址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%; }}

 

相关文章