没有啥好点子呀,不爽
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%; } }
原文地址:https://www.cnblogs.com/FlyingLiao/p/10089602.html
时间: 2024-10-08 21:55:28