CSS Only Line Animated Modal

Developer
Tom
Size
2,502 Kb
Views
12,144
  1. CSS Only Line Animated Modal Previews
  2. CSS Only Line Animated Modal HTML Codes
  3. CSS Only Line Animated Modal CSS Codes

How do I make an css only line animated modal?

Modal draws then fades in using SVG & CSS Animation. What is a css only line animated modal? How do you make a css only line animated modal? This script and codes were developed by Tom on 19 November 2022, Saturday.

CSS Only Line Animated Modal Previews
IQ Test

CSS Only Line Animated Modal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Line Animated Modal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<a href="#show" class="modal-open">Click To Show</a>
<div class="overlay" id="show">
<div class="modal">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="true"> <line id="svg_3" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="2.0" x2="558" y2="2.0"/> <line id="svg_4" fill="none" stroke="#000000" stroke-width="2" x1="558" y1="278" x2="558" y2="2.0"/> <line id="svg_2" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="278" x2="558" y2="278"/> <line id="svg_5" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="2.0" x2="2.0" y2="278"/>
</svg> <div class="modal-inner"> <a href="#" class="modal-close" title="Close Modal">X</a> <h3>Modal Title</h3> </div> </div>
</div>
</div>
</body>
</html>

CSS Only Line Animated Modal - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700italic,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
* { padding:0; margin:0; position:relative; box-sizing:border-box;
}
html { height:100%; min-height:100%;
}
body { height:100%; min-height:100%; font-family: 'Cantarell', sans-serif; font-size: 14px; background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%); color:#424242;
}
.wrap { height:100%; top:0px;
}
svg { width:560px; position:relative; height:280px; margin:0 auto; display:block;
}
svg line { stroke-width:2px; stroke:rgba(2,162,239,1);
}
svg #svg_2 {	stroke-dasharray: 1680; stroke-dashoffset: 1680;
}
svg #svg_4 {	stroke-dasharray: 1680; stroke-dashoffset: -280;
}
svg #svg_3 {	stroke-dasharray: 1680; stroke-dashoffset: -580;
}
svg #svg_5 {	stroke-dasharray: 1680; stroke-dashoffset: -280;
}
@keyframes anim-dash { 90% { stroke:rgba(2,162,239,1); } 100% { stroke:#ffffff; stroke-dashoffset: 0; opacity:1; }
}
.overlay { background:rgba(0,0,0,.5); width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; z-index:-999;
}
.modal { position:absolute; width:560px; height:280px; top:50%; left:50%; transform:translate(-100%,-40%);
}
.modal-inner { position:absolute; top:3px; left:3px; width:554px; height:274px; background:rgba(255,255,255,1); opacity:0;
}
.modal-close { float:right; z-index:+2; color:#424242; margin:5px 5px 0 0; font-size:20px; font-weight:bold; text-decoration:none; text-align:center; line-height:20px; height:20px; width:20px;
}
.modal-inner h3 { display:block; text-align:center; font-size:22px; padding:20px 20px 10px 20px;
}
.overlay:target .modal, .overlay:target { animation:display .6s forwards; z-index:auto;
}
.overlay:target .modal svg line{ animation: anim-dash .6s forwards; animation-delay:.6s;
}
.overlay:target .modal .modal-inner { animation:display .6s forwards; animation-delay:1s;
}
@keyframes display { to { opacity:1; }
}
a.modal-open { display:block; padding:20px; color:#424242; font-weight:bold; margin:0 auto; transform:translateY(100%); width:200px; background:#e0e0e0; border-radius:2px; text-align:center; text-decoration:none;
}
CSS Only Line Animated Modal - Script Codes
CSS Only Line Animated Modal - Script Codes
Home Page Home
Developer Tom
Username TomJ1588
Uploaded November 19, 2022
Rating 3
Size 2,502 Kb
Views 12,144
Do you need developer help for CSS Only Line Animated Modal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom (TomJ1588) Script Codes
Name
Pure CSS Animated Modals
A Pen by Tom
Swing In Social Links
Pure CSS Only Snackbar
Editor Test
Luke ROTJ Lightsaber
UI Test 2
Left Side Slide Out Push Nav
ESPN Style Navigation
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!