Skip to main content

SlideShow

Slideshow

Change image every 3 seconds:

1 / 5
World Map
2 / 5
PUBG Show
3 / 5
React Logo
4 / 5
Sidebar Icon
5 / 5
Android Logo

Comments

Post a Comment

The Most Populer

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

Javascript FireCracker Animation

  || FireCracker Animation Using JavaScript ||  #CODE :                                                                              <!DOCTYPE html> <html> <head> <title>JavaScript FireDesign</title> <style type="text/css"> body{ background: #000; margin: 0; width: 100%; overflow: hidden; } </style> </head> <body> <canvas></canvas> <script type="text/javascript"> var t =0; var c = document.querySelector("canvas"); var $ = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; $.fillStyle = 'hsla(0,0%,0%,1)'; window.addEventListener('resize',function(){ c.width = window.innerWidth; c.height= window.innerHeight; },fa...
Post a Comment
Read more