div+css实现文字段落圆形遮罩效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现文字段落圆形遮罩效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&display=swap'); :root{ --color-all:#020617; --color-text:#fafafa; } body{ background-color: var(--color-all); width: auto; height: 100vh; display: grid; grid-template: repeat(6, 1fr)/ 1fr 1fr 1fr; } .container{ grid-area: 1/2/-1/3; display: grid; grid-template: repeat(6, 1fr)/ 1fr; } .sphere{ font-family: 'Bruno Ace SC', cursive; color: var(--color-text); grid-area: 2/ 1/ 6 / 2; font-size: 1rem; border-radius: 100%; /* font-stretch: extra-expanded; */ overflow: hidden; } </style> </head> <body > <div class="container"> <div class="sphere"> Achieve Adventure Appreciation Attitude Believe Build Challenge Achieve Adventure Appreciation Attitude Believe Build Codepen Challenge Climb Compassion Confidence Conquer Create Dare Determine Dream Drive Empower Enjoy Fearless Focus Forgive Goals Harmony Humble Hunger Imagine Improve Inspire Integrity Joyful Kind Know Laugh Lead Learn Limitless Live Love Mindful Mindset Mission Meaningful Motivated Moving Now Opportunity Optimistic Outstanding Overcome Passion Peaceful Perseverance Plan Positive Possibilities Powerful Codepen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0