代码拉取完成,页面将自动刷新
?> 背景知识: gradient, linear-gradient, radial-gradient, repeating-linear-gradient
<script v-pre type="text/x-template" id="stripes-background-linear"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .progress-outer { width: 60%; height: 12px; border-radius: 8px; overflow: hidden; position: relative; } .progress-enter { height: inherit; background: rgba(180, 160, 120, .2); } .progress-bg { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0); background-size: 16px 16px; animation: panoramic 20s linear infinite; } @keyframes panoramic{ to { background-position: 200% 0; } } </style>Work overtime today.
<script v-pre type="text/x-template" id="stripes-background-radial"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .coupon-card { width: 200px; height: 120px; background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px); } </style> <script> </script> </script>Today's work is seriously overtime.
示例中为了实现:hover时有贴边的阴影,所以采用了
radial-gradient
。如果你有更好的办法,欢迎留言~
《CSS揭秘》作者Lea Verou使用CSS3渐变实现的图案库Patterns Gallery,还有它的SVG版本SVG Patterns Gallery,有兴趣的可以去研究一下作者的实现原理。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。