web.htmlcss

رفتن به کانال در Telegram

Learn HTML CSS and JavaScript..

نمایش بیشتر

کشور مشخص نشده استدسته بندی مشخص نشده است

6 045

مشترکین

+824 ساعت

+337 روز

+19930 روز

اطلاعاتی وجود ندارد

نمایش های پست

اطلاعاتی وجود ندارد24 ساعت

اطلاعاتی وجود ندارد48 ساعت

اطلاعاتی وجود ندارد

نرخ مشارکت

اطلاعاتی وجود ندارد

پست های در روز

Ads index

beta

آرشیو پست ها

\n\n\n\n

\n \n \n \n

\n\n","datePublished":"2021-09-12T12:44:26Z","dateModified":"2021-09-12T12:44:26Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1439},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/24","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/24","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/24","headline":"☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇","articleBody":"☝️☝️☝️☝️☝️\nSOURCE CODE\n 👇👇👇👇👇","datePublished":"2021-09-12T12:43:57Z","dateModified":"2021-09-12T12:43:57Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1202},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/23","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/23","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/23","headline":"web.htmlcss","datePublished":"2021-09-12T12:41:19Z","dateModified":"2021-09-12T12:41:19Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1202},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/22","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/22","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/22","headline":" \n\n\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n","datePublished":"2021-09-07T13:01:02Z","dateModified":"2021-09-07T13:01:02Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1267},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/21","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/21","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/21","headline":"☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇","articleBody":"☝️☝️☝️☝️☝️\nSOURCE CODE\n 👇👇👇👇👇","datePublished":"2021-09-07T13:00:51Z","dateModified":"2021-09-07T13:00:51Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/20","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/20","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/20","headline":"web.htmlcss","datePublished":"2021-09-07T12:46:37Z","dateModified":"2021-09-07T12:46:37Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1126},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/19","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/19","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/19","headline":" \n\n\n\n

\n\n","datePublished":"2021-09-05T12:35:50Z","dateModified":"2021-09-05T12:35:50Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1092},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/18","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/18","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/18","headline":"☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇","articleBody":"☝️☝️☝️☝️☝️\nSOURCE CODE\n 👇👇👇👇👇","datePublished":"2021-09-05T12:35:26Z","dateModified":"2021-09-05T12:35:26Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":949}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/17","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/17","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/17","headline":"web.htmlcss","datePublished":"2021-09-05T12:35:22Z","dateModified":"2021-09-05T12:35:22Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":943},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/16","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/16","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/16","headline":"web.htmlcss","datePublished":"2021-08-25T17:20:47Z","dateModified":"2021-08-25T17:20:47Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1016},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/15","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/15","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/15","headline":" \n\n\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n","datePublished":"2021-08-25T12:38:37Z","dateModified":"2021-08-25T12:38:37Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":1000},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/14","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/14","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/14","headline":"☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇","articleBody":"☝️☝️☝️☝️☝️\nSOURCE CODE\n 👇👇👇👇👇","datePublished":"2021-08-25T12:38:21Z","dateModified":"2021-08-25T12:38:21Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":843},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/13","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/13","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/13","headline":" This link is Required. \n\n\n\n","datePublished":"2021-08-22T12:48:08Z","dateModified":"2021-08-22T12:48:08Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":860},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/11","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/11","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/11","headline":"☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇","articleBody":"☝️☝️☝️☝️☝️\nSOURCE CODE\n👇👇👇👇👇","datePublished":"2021-08-22T12:47:21Z","dateModified":"2021-08-22T12:47:21Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":827},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/10","url":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/10","mainEntityOfPage":"https://telemetr.io/fa/channels/1544025008-web_htmlcss_animation/posts/10","headline":"web.htmlcss","datePublished":"2021-08-22T12:46:27Z","dateModified":"2021-08-22T12:46:27Z","author":{"@type":"Organization","name":"web.htmlcss","url":"https://telemetr.io/fa/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/fa/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":824},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}}]}

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045

<!DOCTYPE html> <html> <head> <style type="text/css"> body{ margin:0; padding:0; background:#000; } .box1{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .button{ position:relative; width:150px; text-align:center; font-size:20px; font-family:poppins; font-weight:400; text-transform:uppercase; letter-spacing:8px; padding:20px; color:#7CFC00; border:3px solid #7CFC00; border-radius:100px; transition:1.5s; } .button:hover{ box-shadow:0px 5px 40px 0 #7CFC00 inset, 0px 5px 40px 0 #7CFC00, 0px 5px 40px 0 #7CFC00 inset, 0px 5px 40px 0 #7CFC00; text-shadow:0 0 5px #7CFC00,0 0 5px #7CFC00; } </style> <title></title> </head> <body> <div class="box1" > <div class="button">button</div> </div> </body> </html>

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045

<!DOCTYPE html> <html> <head> <title></title> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <style type="text/css"> body { background:#663399; height: 100vh; display: flex; } .container { margin:200px auto; background: #fff; height: 30px; border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; cursor: pointer; transition: 0.8s; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); } .container:hover .input { width:250px; } .container .input { background: transparent; border: none; outline: none; width: 0px; font-weight: 500; font-size: 16px; transition: 0.8s; } .container .btn .fas { color: #aa00ff; } </style> </head> <body> <div class="container"> <input type="text" name="search" placeholder="Search..." class="input" /> <b><i class="fas fa-search"></i></b> </div> </body> </html>

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045

<html> <head> <style type="text/css"> *{ margin:0; padding:0; } body{ display:flex; justify-content:center; align-items:center; min-height:100vh; background:#000080; } .loader{ position:relative; width:300px; height:300px; transform-style:preserve-3d; transform:perspective(500px) rotateX(60deg); } .loader span { position:absolute; display:block; border:5px solid #fff; box-shadow:0 5px 0 #ccc, inset 0 5px 0 #ccc; box-sizing:border-box; border-radius:50%; animation:ani 3s ease-in-out infinite; } @keyframes ani{ 0%,100% { transform:rotateY(360deg); } 50% { transform:rotateY(180deg); } } .loader span:nth-child(1) { top:0; left:0; bottom:0; right:0; animation-delay:1.4s; } .loader span:nth-child(2) { top:10px; left:10px; bottom:10px; right:10px; animation-delay:1.3s; } .loader span:nth-child(3) { top:20px; left:20px; bottom:20px; right:20px; animation-delay:1.2s; } .loader span:nth-child(4) { top:30px; left:30px; bottom:30px; right:30px; animation-delay:1.1s; } .loader span:nth-child(5) { top:40px; left:40px; bottom:40px; right:40px; animation-delay:1s; } .loader span:nth-child(6) { top:50px; left:50px; bottom:50px; right:50px; animation-delay:0.9s; } .loader span:nth-child(7) { top:60px; left:60px; bottom:60px; right:60px; animation-delay:0.8s; } .loader span:nth-child(8) { top:70px; left:70px; bottom:70px; right:70px; animation-delay:0.7s; } .loader span:nth-child(9) { top:80px; left:80px; bottom:80px; right:80px; animation-delay:0.6s; } .loader span:nth-child(10) { top:90px; left:90px; bottom:90px; right:90px; animation-delay:.5s; } .loader span:nth-child(11) { top:100px; left:100px; bottom:100px; right:100px; animation-delay:0.4s; } .loader span:nth-child(12) { top:110px; left:110px; bottom:110px; right:110px; animation-delay:0.3s; } .loader span:nth-child(13) { top:120px; left:120px; bottom:120px; right:120px; animation-delay:0.2s; } .loader span:nth-child(14) { top:130px; left:130px; bottom:130px; right:130px; animation-delay:0.1s; } .loader span:nth-child(15) { top:140px; left:140px; bottom:140px; right:140px; animation-delay:0s; } </style> <title></title> </head> <body> <div class="loader" > <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045

<!DOCTYPE html> <html> <head> <style type="text/css"> body{ background:#2F2F2F; } .pin{ width:30px; height:30px; border-radius:50% 50% 50% 0; background:#89849b; position:absolute; transform:rotate(-45deg); left:50%; top:50%; margin:-20px 0 0 -20px; animation:ani 1s ease-in; } pin:after{ content:''; width:14px; height:14px; margin:8px 0 0 8px; background:#2F2F2F; position:absolute; border-radius:50%; } .cen{ width:15px; height:15px; background:#2F2F2F; position:absolute; top:48.1%; left:46.5%; border-radius:50%; } .pulse{ background:rgba(0,0,0,0.2); border-radius:50%; height:14px; width:14px; position:absolute; left:50%; top:50%; margin:11px 0px 0px -12px; transform:rotateX(55deg); z-index:-2; } .pulse:after{ content:""; border-radius:50%; height:40px; width:40px; position:absolute; margin:-13px 0 0 -13px; animation:pulsate 1s ease-out infinite; opacity:0.0; box-shadow:0 0 1px 2px #00FFFF; animation-delay:1.1s; } @keyframes pulsate{ 0%{ opacity:0.0; transform:scale(0.1, 0.1); } 50%{ opacity:1.0; } 100%{ opacity:0; transform:scale(1.2, 1.2); } } </style> <title></title> </head> <body> <div class='pin'></div> <div class="cen" ></div> <div class='pulse'></div> </body> </html>

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045

<html> <head> <style type="text/css"> *{ margin:0; padding:0; } body{ display:flex; justify-content:center; align-items:center; min-height:100vh; background:#4B0082; } .loader{ position:relative; width:300px; height:300px; transform-style:preserve-3d; transform:perspective(500px) rotateX(60deg); } .loader span { position:absolute; display:block; border:5px solid #fff; box-shadow:0 5px 0 #ccc, inset 0 5px 0 #ccc; box-sizing:border-box; border-radius:50%; animation:ani 3s ease-in-out infinite; } @keyframes ani{ 0%,100% { transform:translateZ(-100px); } 50% { transform:translateZ(100px); } } .loader span:nth-child(1) { top:0; left:0; bottom:0; right:0; animation-delay:1.4s; } .loader span:nth-child(2) { top:10px; left:10px; bottom:10px; right:10px; animation-delay:1.3s; } .loader span:nth-child(3) { top:20px; left:20px; bottom:20px; right:20px; animation-delay:1.2s; } .loader span:nth-child(4) { top:30px; left:30px; bottom:30px; right:30px; animation-delay:1.1s; } .loader span:nth-child(5) { top:40px; left:40px; bottom:40px; right:40px; animation-delay:1s; } .loader span:nth-child(6) { top:50px; left:50px; bottom:50px; right:50px; animation-delay:0.9s; } .loader span:nth-child(7) { top:60px; left:60px; bottom:60px; right:60px; animation-delay:0.8s; } .loader span:nth-child(8) { top:70px; left:70px; bottom:70px; right:70px; animation-delay:0.7s; } .loader span:nth-child(9) { top:80px; left:80px; bottom:80px; right:80px; animation-delay:0.6s; } .loader span:nth-child(10) { top:90px; left:90px; bottom:90px; right:90px; animation-delay:0.5s; } .loader span:nth-child(11) { top:100px; left:100px; bottom:100px; right:100px; animation-delay:0.4s; } .loader span:nth-child(12) { top:110px; left:110px; bottom:110px; right:110px; animation-delay:0.3s; } .loader span:nth-child(13) { top:120px; left:120px; bottom:120px; right:120px; animation-delay:0.2s; } .loader span:nth-child(14) { top:130px; left:130px; bottom:130px; right:130px; animation-delay:0.1s; } .loader span:nth-child(15) { top:140px; left:140px; bottom:140px; right:140px; animation-delay:0s; } </style> <title></title> </head> <body> <div class="loader" > <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045

<!DOCTYPE html> <html> <head> <title></title> </head> <body> This link is Required. <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script> <script type="text/javascript"> function setup(){ createCanvas(windowWidth, windowHeight); } function draw(){ const col={}; const{r,g,b}=col; col.r=random(0,255); col.g=random(0,255); col.b=random(0,255); fill(col.r,col.g,col.b) ellipse(mouseX,mouseY, 150,100); } </script> </body> </html>

6 045

☝️☝️☝️☝️☝️ SOURCE CODE 👇👇👇👇👇

6 045