Show dialogue with blur animation

Developer
Size
2,085 Kb
Views
42,504

How do I make an show dialogue with blur animation?

Show dialogue with css blur animation. What is a show dialogue with blur animation? How do you make a show dialogue with blur animation? This script and codes were developed by Chris Maki on 12 August 2022, Friday.

Show dialogue with blur animation Previews

Show dialogue with blur animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>show dialogue with blur animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button>Show Me</button>
<div class="box"> <h3>This is some stuff in a box</h3> <p>hey stuff!!</p>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Show dialogue with blur animation - Script Codes CSS Codes

button { background-color: aqua; border-radius: 4px; color: white; outline: none; border: none; padding: .65em 3.25em; margin: 1.25em; transition: .35s ;
}
button:hover { background-color: #00e8e8;
}
.box { background-color: #ccc; border-radius: 6px; padding: 5em; width: 400px; margin: auto; position: relative; top: 50px; display: none;
}
.blur { display:block; -webkit-animation: fade .4s cubic-bezier(0.63,-0.52, 0.32, 1.25); animation: fade .8s cubic-bezier(0.63,-0.52, 0.32, 1.25);
}
@keyframes fade { 0% { -webkit-filter: blur(10px); transform: scale(1.1) } 100% { transform: scale(1);-webkit-filter: blur(0px); }
}

Show dialogue with blur animation - Script Codes JS Codes

// $('button').on('click', function(){
// $('.box').toggleClass('blur');
// });
var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.addEventListener('click', function(){ box.classList.toggle('blur');
});
Show dialogue with blur animation - Script Codes
Show dialogue with blur animation - Script Codes
Home Page Home
Developer Chris Maki
Username chrisMaki
Uploaded August 12, 2022
Rating 3
Size 2,085 Kb
Views 42,504
Do you need developer help for Show dialogue with blur animation?

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!

Chris Maki (chrisMaki) Script Codes
Create amazing marketing copy 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!