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.

Demo Download

Author Yusuke Nakaya

Created SEPTEMBER 25, 2018

License Open

Compatible browsers Chrome, Firefox, Safari

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