uk
Feedback
web.htmlcss

web.htmlcss

Відкрити в Telegram

Learn HTML CSS and JavaScript..

Показати більше
Країна не вказанаКатегорія не вказана
6 045
Підписники
+824 години
+337 днів
+19930 день
Архів дописів
\n\n","datePublished":"2022-12-06T07:18:55Z","dateModified":"2022-12-06T07:18:55Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":890},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/102","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/102","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/102","headline":"web.htmlcss","datePublished":"2022-12-06T07:18:03Z","dateModified":"2022-12-06T07:18:03Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":837},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/101","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/101","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/101","headline":" \n\n\n
\n
\n
\n
\n
\n\n","datePublished":"2022-12-05T13:12:34Z","dateModified":"2022-12-05T13:12:34Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":996},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/100","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/100","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/100","headline":"web.htmlcss","datePublished":"2022-12-05T13:12:20Z","dateModified":"2022-12-05T13:12:20Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":957},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/99","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/99","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/99","headline":"web.htmlcss","datePublished":"2022-11-18T02:31:50Z","dateModified":"2022-11-18T02:31:50Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1386},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/98","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/98","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/98","headline":"web.htmlcss","datePublished":"2022-11-18T02:30:29Z","dateModified":"2022-11-18T02:30:29Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":920}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/97","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/97","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/97","headline":"web.htmlcss","datePublished":"2022-11-17T14:19:44Z","dateModified":"2022-11-17T14:19:44Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":956},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/96","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/96","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/96","headline":" \n\n\n
\n w\n e\n b\n .\n h\n t\n m\n l\n c\n c\n
\n\n","datePublished":"2022-11-13T12:14:57Z","dateModified":"2022-11-13T12:14:57Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1313},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/95","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/95","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/95","headline":"Source code 👇👇👇","articleBody":"Source code \n   👇👇👇","datePublished":"2022-11-13T12:14:10Z","dateModified":"2022-11-13T12:14:10Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1058}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/94","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/94","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/94","headline":"web.htmlcss","datePublished":"2022-11-13T12:14:02Z","dateModified":"2022-11-13T12:14:02Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1066}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/93","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/93","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/93","headline":"web.htmlcss","datePublished":"2022-11-13T00:52:23Z","dateModified":"2022-11-13T00:52:23Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1111},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/92","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/92","mainEntityOfPage":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation/posts/92","headline":"web.htmlcss","datePublished":"2022-11-13T00:51:20Z","dateModified":"2022-11-13T00:51:20Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"publisher":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/uk/channels/1544025008-web_htmlcss_animation","image":"https://img.tlmtr.io/c/1Guzra/6120915802753445520?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1098},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}}]}
web.htmlcss
web.htmlcss
6 045
text_Animation.html0.01 KB

web.htmlcss
web.htmlcss
6 045
SOURCE CODE 👇👇👇

web.htmlcss
web.htmlcss
6 045
photo content

web.htmlcss
web.htmlcss
6 045
<!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>

web.htmlcss
web.htmlcss
6 045
SOURCE CODE 👇👇👇
SOURCE CODE 👇👇👇

web.htmlcss
web.htmlcss
6 045
<!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>

web.htmlcss
web.htmlcss
6 045
photo content

web.htmlcss
web.htmlcss
6 045
You are interested in Javascript program.
Anonymous voting

web.htmlcss
web.htmlcss
6 045
<!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>

web.htmlcss
web.htmlcss
6 045
photo content

web.htmlcss
web.htmlcss
6 045
<!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>

web.htmlcss
web.htmlcss
6 045
photo content

web.htmlcss
web.htmlcss
6 045
Loading.html0.01 KB

web.htmlcss
web.htmlcss
6 045
photo content

web.htmlcss
web.htmlcss
6 045
Image Gallery SOURCE CODE.zip0.52 KB

web.htmlcss
web.htmlcss
6 045
<!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>

web.htmlcss
web.htmlcss
6 045
Source code    👇👇👇

web.htmlcss
web.htmlcss
6 045
photo content

web.htmlcss
web.htmlcss
6 045
ROTATING_IMAGES_ANIMATION.zip2.39 KB

web.htmlcss
web.htmlcss
6 045
photo content