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
Leave a Reply