div+css实现文字段落圆形遮罩效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看