3D Text Animation With CSS | (Turkish Video Tutorial)
Tutorial about: 3D Text Animation with CSS&HTML (Lesson 6 Turkish Video Tutorial)
Video Language : Turkish Language
Githup link: CSS Education
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. CSS More Information
What We Can Learn?
We going to learn how to create 3D Text Animation. how to add background color , text,box shadow and how to add keyframes , margin,padding value with CSS&HTML codes in this video.
We Learn About
- KeyFrames
- Animation
- h1 span
- Transform
- TranslateY
- Position: Absolute
Requirements
1- ATOM Program
2- Basic ATOM, usage information.
3- Basic CSS code knowledge.
4- Basic HTML code knowledge.
My Operating System
Difficulty
- Basic Level
Technical Aspects
- Keyframes - Transform - BoxShadow - TranslateY - Animation - FontFamily - Position - Absolute
Description
We talked about how to make 3D Text Animation , part of part span name, transform,box-shadow,keyframes,translateY,animate.
I describe the CSS and HTML in video.Also My github repository is HERE I added these all code,information my github repository.You can reach all files from my repository.
Also with CSS and HTML codes we are continue a series
Video Tutorial - Turkish Language - 720p
Curriculum
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
ATOM OFFICIAL WEBSITE & GITHUB REPOSITORY & MY GITHUB REPOSITORY
And More Details About Video
Github Repository
CSS Codes1
CSS Codes2
HTML Codes.
CSS&HTML CODES
body
{
margin: 0;
padding: 0;
background: #ff5757;
}
h1
{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1 span
{
color: #262626;
background: #fff;
padding: 10px 20px;
font-family: arial;
display: table-cell;
box-shadow: inset 0 0 5px rgba(0,0,0,.3),0 5px 0 #ccc;
animation: animate .5s infinite;
}
@keyframes animate
{
0%
{
transform: translateY(0px);
box-shadow: inset 0 0 5px rgba(0,0,0,.3), 0 5px 0 #ccc , 0 15px 5px rgba(0,0,0,0);
}
50%
{
transform: translateY(-20px);
box-shadow: inset 0 0 5px rgba(0,0,0,.3) , 0 5px 0 #ccc , 0 15px 5px rgba(0,0,0,6);
}
100%
{
transform: translateY(0px);
box-shadow: inset 0 0 5px rgba(0,0,0,.3) , 0 5px 0 #ccc , 0 15px 5px rgba(0,0,0,0);
}
}
h1 span:nth-child(1)
{
animation-delay: .2s;
}
h1 span:nth-child(2)
{
animation-delay: .4s;
}
h1 span:nth-child(3)
{
animation-delay: .6s;
}
h1 span:nth-child(4)
{
animation-delay: .8s;
}
h1 span:nth-child(5)
{
animation-delay: 1.0s;
}
h1 span:nth-child(6)
{
animation-delay: 1.2s;
}
<!DOCTYPE html>
<html>
<head>
<title>Css 3D Jumping Text Effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>
<span>J</span>
<span>U</span>
<span>M</span>
<span>P</span>
<span>E</span>
<span>R</span>
</h1>
</body>
</html>
Author : @rdvn
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you for approval.
Hey @rdvn I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x