Simple Text spining

Developer
Nick Mkrtchyan
Size
3,005 Kb
Views
14,168
  1. Simple Text spining Previews
  2. Simple Text spining HTML Codes
  3. Simple Text spining CSS Codes

How do I make an simple text spining?

What is a simple text spining? How do you make a simple text spining? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

Simple Text spining Previews
IQ Test

Simple Text spining - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Text spining</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @font-face { font-family:'Electrolize'; font-style: normal; font-weight: 400; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
body { background: grey;
}
.text-warp { font-family:'Electrolize'; width:50%; margin:0 auto 0; -webkit-perspective:1400; z-index:109; text-transform: uppercase;
}
.text { font-family:'Electrolize'; -webkit-transform-style:preserve-3d; position:relative; -webkit-transform-origin:center center; -webkit-animation:wobble 5s linear infinite; text-align:center;
}
.text h1 { letter-spacing:2px; font-size:100px; position:absolute; top:100px; color:#fff; font-weight:700; -webkit-animation:color 10s linear infinite; margin: 0 auto; padding-left:40px; text-shadow:0 0px 25px red; animation:color 10s linear infinite;
}
@-webkit-keyframes wobble { from, to { -webkit-transform:rotate3D(0, 0, 0, -1deg); } 100% { -webkit-transform:rotate3D(0, 1, 0, -359deg); }
}
@-webkit-keyframes color { from, to { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); } 10% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 40% { text-shadow:0 0px 95px rgba(17, 139, 220, 1); } 50% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 80% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); }
}
@keyframes color { 0% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); } 10% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 40% { text-shadow:0 0px 95px rgba(17, 139, 220, 1); } 50% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 80% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); } 100% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); }
}
.text h1:nth-child(2) { -webkit-transform:translateZ(10px); -webkit-animation-delay:175ms; -moz-animation-delay:175ms; animation-delay:175ms;
}
.text h1:nth-child(3) { -webkit-transform:translateZ(20px); -webkit-animation-delay:150ms; -moz-animation-delay:150ms; animation-delay:150ms;
}
.text h1:nth-child(4) { -webkit-transform:translateZ(30px); -webkit-animation-delay:125ms; -moz-animation-delay:125ms; animation-delay:125ms;
}
.text h1:nth-child(5) { -webkit-transform:translateZ(40px); -webkit-animation-delay:100ms; -moz-animation-delay:100ms; animation-delay:100ms;
}
.text h1:nth-child(6) { -webkit-transform:translateZ(50px); -webkit-animation-delay:75ms; -moz-animation-delay:75ms; animation-delay:75ms;
}
.text h1:nth-child(7) { -webkit-transform:translateZ(60px); -webkit-animation-delay:50ms; -moz-animation-delay:50ms; animation-delay:50ms;
}
.text h1:nth-child(8) { -webkit-transform:translateZ(70px); -webkit-animation-delay:25ms; -moz-animation-delay:25ms; animation-delay:25ms;
}
.text h1:nth-child(9) { -webkit-transform:translateZ(80px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="text-warp"> <div class="text"> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> <h1>Nick Mkrtchyan</h1> </div>
</div>
</body>
</html>

Simple Text spining - Script Codes CSS Codes

@font-face { font-family:'Electrolize'; font-style: normal; font-weight: 400; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
body { background: grey;
}
.text-warp { font-family:'Electrolize'; width:50%; margin:0 auto 0; -webkit-perspective:1400; z-index:109; text-transform: uppercase;
}
.text { font-family:'Electrolize'; -webkit-transform-style:preserve-3d; position:relative; -webkit-transform-origin:center center; -webkit-animation:wobble 5s linear infinite; text-align:center;
}
.text h1 { letter-spacing:2px; font-size:100px; position:absolute; top:100px; color:#fff; font-weight:700; -webkit-animation:color 10s linear infinite; margin: 0 auto; padding-left:40px; text-shadow:0 0px 25px red; animation:color 10s linear infinite;
}
@-webkit-keyframes wobble { from, to { -webkit-transform:rotate3D(0, 0, 0, -1deg); } 100% { -webkit-transform:rotate3D(0, 1, 0, -359deg); }
}
@-webkit-keyframes color { from, to { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); } 10% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 40% { text-shadow:0 0px 95px rgba(17, 139, 220, 1); } 50% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 80% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); }
}
@keyframes color { 0% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); } 10% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 40% { text-shadow:0 0px 95px rgba(17, 139, 220, 1); } 50% { text-shadow:0 0px 45px rgba(17, 139, 220, 0.3); } 80% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); } 100% { text-shadow:0 0 10px rgba(17, 139, 220, 0.5); }
}
.text h1:nth-child(2) { -webkit-transform:translateZ(10px); -webkit-animation-delay:175ms; -moz-animation-delay:175ms; animation-delay:175ms;
}
.text h1:nth-child(3) { -webkit-transform:translateZ(20px); -webkit-animation-delay:150ms; -moz-animation-delay:150ms; animation-delay:150ms;
}
.text h1:nth-child(4) { -webkit-transform:translateZ(30px); -webkit-animation-delay:125ms; -moz-animation-delay:125ms; animation-delay:125ms;
}
.text h1:nth-child(5) { -webkit-transform:translateZ(40px); -webkit-animation-delay:100ms; -moz-animation-delay:100ms; animation-delay:100ms;
}
.text h1:nth-child(6) { -webkit-transform:translateZ(50px); -webkit-animation-delay:75ms; -moz-animation-delay:75ms; animation-delay:75ms;
}
.text h1:nth-child(7) { -webkit-transform:translateZ(60px); -webkit-animation-delay:50ms; -moz-animation-delay:50ms; animation-delay:50ms;
}
.text h1:nth-child(8) { -webkit-transform:translateZ(70px); -webkit-animation-delay:25ms; -moz-animation-delay:25ms; animation-delay:25ms;
}
.text h1:nth-child(9) { -webkit-transform:translateZ(80px);
}
Simple Text spining - Script Codes
Simple Text spining - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 3.5
Size 3,005 Kb
Views 14,168
Do you need developer help for Simple Text spining?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Mkrtchyan (Sonick) Script Codes
Name
Slider
Canvas Background Effect 2
JQuery Gallery Simple 3D Effect
404 Monster Error
Canvas Starfield
Canvas Background Effect 3
Canvas Hover Effect
CSS3 Text Animation Effect 2
Preloader
A Pen by Nick Mkrtchyan
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!