SOURCE CODE
๐๐๐
๐๐๐
web.htmlcss
@web_htmlcss_animation
Learn HTML CSS and JavaScript..
web_htmlcss_animation (English)
Are you looking to enhance your skills in web development? Look no further than our Telegram channel 'web_htmlcss_animation'! This channel is dedicated to helping you learn HTML, CSS, and JavaScript in a fun and interactive way. Whether you are a beginner or have some experience in web development, you will find valuable resources and tutorials that will take your skills to the next level
Who is it for? This channel is perfect for anyone interested in web development, whether you are a student, a professional, or someone looking to switch careers. The content is designed to be easy to understand for beginners but also offers advanced techniques for those looking to sharpen their skills
What is it? 'web_htmlcss_animation' is a community of like-minded individuals who share a passion for web development. You will find tutorials on HTML, CSS, and JavaScript, as well as tips and tricks for creating stunning websites and web applications. The channel also hosts live coding sessions and Q&A sessions where you can interact with experts in the field
Join 'web_htmlcss_animation' today and take your web development skills to the next level. Whether you want to create your own website, start a career in web development, or simply expand your knowledge, this channel has everything you need to succeed. Don't miss out on this valuable opportunity to learn from the best in the industry!
web.htmlcss
22 Jan, 03:05
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:150px;
height:150px;
border:none;
display:grid;
grid-template-columns:1fr 1fr 1fr;
place-items:center;
}
.container div{
width:15px;
height:15px;
background:#fff;
margin:3px;
animation:a 1s linear alternate
infinite;
}
.container .abc{
animation-delay:1s;
}
@keyframes a{
0%{
width:15px;
height:15px;
border-radius:0 50% 0 50%;
}
100%{
width:40px;
height:40px;
background:red;
border-radius:50% 0 50% 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
<div class="div2 abc"></div>
<div class="div3"></div>
<div class="div4 abc"></div>
<div class="div5"></div>
<div class="div6 abc"></div>
<div class="div7"></div>
<div class="div8 abc"></div>
<div class="div9"></div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:150px;
height:150px;
border:none;
display:grid;
grid-template-columns:1fr 1fr 1fr;
place-items:center;
}
.container div{
width:15px;
height:15px;
background:#fff;
margin:3px;
animation:a 1s linear alternate
infinite;
}
.container .abc{
animation-delay:1s;
}
@keyframes a{
0%{
width:15px;
height:15px;
border-radius:0 50% 0 50%;
}
100%{
width:40px;
height:40px;
background:red;
border-radius:50% 0 50% 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
<div class="div2 abc"></div>
<div class="div3"></div>
<div class="div4 abc"></div>
<div class="div5"></div>
<div class="div6 abc"></div>
<div class="div7"></div>
<div class="div8 abc"></div>
<div class="div9"></div>
</div>
</body>
</html>
web.htmlcss
06 Dec, 11:28
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container div{
display:flex;
justify-content:center;
align-items:center;
border-radius:50px;
border-top:3px solid red;
animation:a 3s linear alternate
infinite;
}
.innerDiv1
{
width:100px;
height:100px;
}
.innerDiv2
{
width:90px;
height:90px;
}
.innerDiv3
{
width:80px;
height:80px;
}
.innerDiv4
{
width:70px;
height:70px;
}
.innerDiv5
{
width:60px;
height:60px;
}
.innerDiv6
{
width:50px;
height:50px;
}
.innerDiv7
{
width:40px;
height:40px;
}
.innerDiv8
{
width:30px;
height:30px;
}
.innerDiv9
{
width:20px;
height:20px;
}
.innerDiv10
{
width:10px;
height:10px;
}
@keyframes a{
0%{
transform:rotate(90deg);
}
100%{
transform:rotate(-90deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="innerDiv1">
<div class="innerDiv2">
<div class="innerDiv3">
<div class="innerDiv4">
<div class="innerDiv5">
<div class="innerDiv6">
<div class="innerDiv7">
<div class="innerDiv8">
<div class="innerDiv9">
<div class="innerDiv10">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container div{
display:flex;
justify-content:center;
align-items:center;
border-radius:50px;
border-top:3px solid red;
animation:a 3s linear alternate
infinite;
}
.innerDiv1
{
width:100px;
height:100px;
}
.innerDiv2
{
width:90px;
height:90px;
}
.innerDiv3
{
width:80px;
height:80px;
}
.innerDiv4
{
width:70px;
height:70px;
}
.innerDiv5
{
width:60px;
height:60px;
}
.innerDiv6
{
width:50px;
height:50px;
}
.innerDiv7
{
width:40px;
height:40px;
}
.innerDiv8
{
width:30px;
height:30px;
}
.innerDiv9
{
width:20px;
height:20px;
}
.innerDiv10
{
width:10px;
height:10px;
}
@keyframes a{
0%{
transform:rotate(90deg);
}
100%{
transform:rotate(-90deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="innerDiv1">
<div class="innerDiv2">
<div class="innerDiv3">
<div class="innerDiv4">
<div class="innerDiv5">
<div class="innerDiv6">
<div class="innerDiv7">
<div class="innerDiv8">
<div class="innerDiv9">
<div class="innerDiv10">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
web.htmlcss
06 Dec, 07:18
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container{
width:300px;
height:100px;
position:relative;
}
.container input{
margin:20px 20px;
width:250px;
height:30px;
padding:5px;
outline:none;
}
h2{
color:red;
font-family:Courier new,monospace;
text-shadow:0px 0px 10px red;
text-align:center;
text-transform:uppercase;
animation:a 2s linear alternate
infinite;
}
@keyframes a{
0%{
transform:translateX(30px);
}
100%{
transform:translateX(-30px);
}
}
</style>
</head>
<body>
<div class="container">
<h2 id="heading"></h2>
<input
type="text"
id="input"
onkeyup="abc()"
placeholder="Enter a text "
>
</div>
<script type="text/javascript">
function abc(){
var heading =
document.getElementById('heading');
var input =
document.getElementById('input');
heading.innerHTML=input.value;
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container{
width:300px;
height:100px;
position:relative;
}
.container input{
margin:20px 20px;
width:250px;
height:30px;
padding:5px;
outline:none;
}
h2{
color:red;
font-family:Courier new,monospace;
text-shadow:0px 0px 10px red;
text-align:center;
text-transform:uppercase;
animation:a 2s linear alternate
infinite;
}
@keyframes a{
0%{
transform:translateX(30px);
}
100%{
transform:translateX(-30px);
}
}
</style>
</head>
<body>
<div class="container">
<h2 id="heading"></h2>
<input
type="text"
id="input"
onkeyup="abc()"
placeholder="Enter a text "
>
</div>
<script type="text/javascript">
function abc(){
var heading =
document.getElementById('heading');
var input =
document.getElementById('input');
heading.innerHTML=input.value;
}
</script>
</body>
</html>
web.htmlcss
05 Dec, 13:12
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container{
width:200px;
height:200px;
position:relative;
}
.container div{
width:100px;
height:100px;
position:absolute;
border-radius:50%;
animation:a 1.5s linear infinite;
filter:drop-shadow(0px 0px 10px red);
}
.container div:nth-child(1)
{
top:10px;
left:20px;
border-left:5px solid red;
}
.container div:nth-child(2)
{
top:10px;
right:20px;
border-top:5px solid red;
}
.container div:nth-child(3)
{
bottom:45px;
left:50px;
border-right:5px solid red;
}
@keyframes a{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;
}
.container{
width:200px;
height:200px;
position:relative;
}
.container div{
width:100px;
height:100px;
position:absolute;
border-radius:50%;
animation:a 1.5s linear infinite;
filter:drop-shadow(0px 0px 10px red);
}
.container div:nth-child(1)
{
top:10px;
left:20px;
border-left:5px solid red;
}
.container div:nth-child(2)
{
top:10px;
right:20px;
border-top:5px solid red;
}
.container div:nth-child(3)
{
bottom:45px;
left:50px;
border-right:5px solid red;
}
@keyframes a{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
web.htmlcss
13 Nov, 12:14
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container span{
color:rgba(255,255,255,0.1);
font-size:25px;
font-family:Arial,sans-serif;
text-transform:uppercase;
display:inline-block;
transition:all 0.5s;
animation:a 2s infinite;
}
span:nth-child(1){
animation-delay:0s;
}
span:nth-child(2){
animation-delay:0.2s;
}
span:nth-child(3){
animation-delay:0.4s;
}
span:nth-child(4){
animation-delay:0.6s;
}
span:nth-child(5){
animation-delay:0.8s;
}
span:nth-child(6){
animation-delay:1s;
}
span:nth-child(7){
animation-delay:1.2s;
}
span:nth-child(8){
animation-delay:1.4s;
}
span:nth-child(9){
animation-delay:1.6s;
}
span:nth-child(10){
animation-delay:1.8s;
}
@keyframes a{
0%{
transform:translateY(0);
margin-left:0px;
}
25%{
color:red;
transform:translateY(-15px)
scale(5);
margin-left:10px;
text-shadow:0px 15px 5px
rgba(0,0,0,1);
}
100%{
color:green;
transform:translateY(0);
margin-left:0px;
}
}
</style>
</head>
<body>
<div class="container">
<span>w</span>
<span>e</span>
<span>b</span>
<span>.</span>
<span>h</span>
<span>t</span>
<span>m</span>
<span>l</span>
<span>c</span>
<span>c</span>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container span{
color:rgba(255,255,255,0.1);
font-size:25px;
font-family:Arial,sans-serif;
text-transform:uppercase;
display:inline-block;
transition:all 0.5s;
animation:a 2s infinite;
}
span:nth-child(1){
animation-delay:0s;
}
span:nth-child(2){
animation-delay:0.2s;
}
span:nth-child(3){
animation-delay:0.4s;
}
span:nth-child(4){
animation-delay:0.6s;
}
span:nth-child(5){
animation-delay:0.8s;
}
span:nth-child(6){
animation-delay:1s;
}
span:nth-child(7){
animation-delay:1.2s;
}
span:nth-child(8){
animation-delay:1.4s;
}
span:nth-child(9){
animation-delay:1.6s;
}
span:nth-child(10){
animation-delay:1.8s;
}
@keyframes a{
0%{
transform:translateY(0);
margin-left:0px;
}
25%{
color:red;
transform:translateY(-15px)
scale(5);
margin-left:10px;
text-shadow:0px 15px 5px
rgba(0,0,0,1);
}
100%{
color:green;
transform:translateY(0);
margin-left:0px;
}
}
</style>
</head>
<body>
<div class="container">
<span>w</span>
<span>e</span>
<span>b</span>
<span>.</span>
<span>h</span>
<span>t</span>
<span>m</span>
<span>l</span>
<span>c</span>
<span>c</span>
</div>
</body>
</html>
7,319
subscribers
25
photos
14
videos
