- Hello, Visitor
- Monday, November 11, 2024
Search Result
Home » Html Css
» 3D Animated Text With Html Css
3D Animated Text With Html Css
Posted by NzCoding - 18 January 2022
Video Tutorial:
Html Code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/x-icon" href="assets/images/favicon.png"><title>NzCoding - 3D Text Animation With Html Css</title><link rel="stylesheet" href="assets/css/style.css" /></head><body><div class="container"><div class="box"><span style="--i:1;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:2;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:3;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:4;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:5;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:6;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:7;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:8;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:9;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:10;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:11;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:12;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:13;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:14;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:15;"><i>I LOVE</i> nz <i>Coding</i></span><span style="--i:16;"><i>I LOVE</i> nz <i>Coding</i></span></div></div></body></html>
Css Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&display=swap');* {margin: 0;padding: 0;font-family: poppins;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #222;overflow: hidden;}.container {display: flex;justify-content: center;align-items: center;}.container .box {transform-style: preserve-3d;animation: animate 25s linear infinite;}@keyframes animate {0% {transform: perspective(1000px) rotateX(0deg) rotate(25deg);}100% {transform: perspective(1000px) rotateX(360deg) rotate(25deg);}}.container .box span {position: absolute;color: #fff;font-size: 3.5em;white-space: nowrap;text-transform: uppercase;font-weight: 900;padding: 0px 10px;background: linear-gradient(99deg, transparent, rgba(0,0,0,0.5), transparent);line-height: 0.76em;transform-style: preserve-3d;text-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);transform: translate(-50%, -50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(130px);}.container .box span i:nth-child(1) {font-style: initial;color: #ff246f;}.container .box span i:nth-child(2) {font-style: initial;color: #12b5ff;}
Hope it will help you.
Related posts
Moving Car Animation With Html & Css
16 January 2022
3249 Views
Html Loading Spinner with Color Changing Effects
15 January 2022
1460 Views
Loading Spinner with Html & Css
06 January 2022
1378 Views
Responsive card hover effect using CSS
21 December 2021
1466 Views
Transparent Login Form HTML CSS & JavaScript
20 December 2021
1784 Views
Popular Posts
Featured Post
Categories
- Html Css 7
- More 3
- Card Design 2
- Spinner 2
- GitHub 2
- Laravel 16
- Livewire 12
- Javascript 1
- Form Design 1
- SEO 1
- Php 0
Leave a Reply