Donuts mask text rotation using CSS only

Donuts mask css text rotation effects is developed using CSS only with transition and animation. Text effects demo and download options available.

HTML Snippet

<div class="donuts">   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div>   <div class="donuts_mask">W3TWEAKS</div> </div>

CSS Code

body {   background: #1e2832;   height: 100vh;   overflow: hidden;   display: flex;   font-family: 'Anton', sans-serif;   justify-content: center;   align-items: center;   color: #fff;   font-size: 7.2rem; }  .donuts_mask {   text-align: center;   display: flex;   justify-content: center;   align-items: center;   width: 500px;   height: 500px;   position: absolute;   -webkit-transform: translate(-50%, -50%);           transform: translate(-50%, -50%); } .donuts_mask::before {   content: '';   position: absolute;   height: 0;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%) scale(0.99);           transform: translate(-50%, -50%) scale(0.99);   border-radius: 100%;   background: #1e2832; } .donuts_mask:nth-child(1) {   z-index: 10;   -webkit-clip-path: circle(5%);           clip-path: circle(5%);   -webkit-animation: rotate 3000ms 150ms ease-in-out infinite;           animation: rotate 3000ms 150ms ease-in-out infinite; } .donuts_mask:nth-child(1)::before {   width: 0%;   padding-top: 0%; } .donuts_mask:nth-child(2) {   z-index: 9;   -webkit-clip-path: circle(10%);           clip-path: circle(10%);   -webkit-animation: rotate 3000ms 300ms ease-in-out infinite;           animation: rotate 3000ms 300ms ease-in-out infinite; } .donuts_mask:nth-child(2)::before {   width: 10%;   padding-top: 10%; } .donuts_mask:nth-child(3) {   z-index: 8;   -webkit-clip-path: circle(15%);           clip-path: circle(15%);   -webkit-animation: rotate 3000ms 450ms ease-in-out infinite;           animation: rotate 3000ms 450ms ease-in-out infinite; } .donuts_mask:nth-child(3)::before {   width: 20%;   padding-top: 20%; } .donuts_mask:nth-child(4) {   z-index: 7;   -webkit-clip-path: circle(20%);           clip-path: circle(20%);   -webkit-animation: rotate 3000ms 600ms ease-in-out infinite;           animation: rotate 3000ms 600ms ease-in-out infinite; } .donuts_mask:nth-child(4)::before {   width: 30%;   padding-top: 30%; } .donuts_mask:nth-child(5) {   z-index: 6;   -webkit-clip-path: circle(25%);           clip-path: circle(25%);   -webkit-animation: rotate 3000ms 750ms ease-in-out infinite;           animation: rotate 3000ms 750ms ease-in-out infinite; } .donuts_mask:nth-child(5)::before {   width: 40%;   padding-top: 40%; } .donuts_mask:nth-child(6) {   z-index: 5;   -webkit-clip-path: circle(30%);           clip-path: circle(30%);   -webkit-animation: rotate 3000ms 900ms ease-in-out infinite;           animation: rotate 3000ms 900ms ease-in-out infinite; } .donuts_mask:nth-child(6)::before {   width: 50%;   padding-top: 50%; } .donuts_mask:nth-child(7) {   z-index: 4;   -webkit-clip-path: circle(35%);           clip-path: circle(35%);   -webkit-animation: rotate 3000ms 1050ms ease-in-out infinite;           animation: rotate 3000ms 1050ms ease-in-out infinite; } .donuts_mask:nth-child(7)::before {   width: 60%;   padding-top: 60%; } .donuts_mask:nth-child(8) {   z-index: 3;   -webkit-clip-path: circle(40%);           clip-path: circle(40%);   -webkit-animation: rotate 3000ms 1200ms ease-in-out infinite;           animation: rotate 3000ms 1200ms ease-in-out infinite; } .donuts_mask:nth-child(8)::before {   width: 70%;   padding-top: 70%; } .donuts_mask:nth-child(9) {   z-index: 2;   -webkit-clip-path: circle(45%);           clip-path: circle(45%);   -webkit-animation: rotate 3000ms 1350ms ease-in-out infinite;           animation: rotate 3000ms 1350ms ease-in-out infinite; } .donuts_mask:nth-child(9)::before {   width: 80%;   padding-top: 80%; } .donuts_mask:nth-child(10) {   z-index: 1;   -webkit-clip-path: circle(50%);           clip-path: circle(50%);   -webkit-animation: rotate 3000ms 1500ms ease-in-out infinite;           animation: rotate 3000ms 1500ms ease-in-out infinite; } .donuts_mask:nth-child(10)::before {   width: 90%;   padding-top: 90%; }  @-webkit-keyframes rotate {   0% {     -webkit-transform: translate(-50%, -50%) rotateZ(0deg);             transform: translate(-50%, -50%) rotateZ(0deg);   }   50% {     -webkit-transform: translate(-50%, -50%) rotateZ(360deg);             transform: translate(-50%, -50%) rotateZ(360deg);   } }  @keyframes rotate {   0% {     -webkit-transform: translate(-50%, -50%) rotateZ(0deg);             transform: translate(-50%, -50%) rotateZ(0deg);   }   50% {     -webkit-transform: translate(-50%, -50%) rotateZ(360deg);             transform: translate(-50%, -50%) rotateZ(360deg);   } } 

Preview