Fog city night festival

Developer
Matt Popovich
Size
2,645 Kb
Views
20,240
  1. Fog city night festival Previews
  2. Fog city night festival HTML Codes
  3. Fog city night festival CSS Codes

How do I make an fog city night festival?

Playing with CSS transforms, filters, and blend modes. What is a fog city night festival? How do you make a fog city night festival? This script and codes were developed by Matt Popovich on 14 November 2022, Monday.

Fog city night festival Previews
IQ Test

Fog city night festival - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fog city night festival</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> <div class="blend"></div>
<div class="city"></div>
</body>
</html>

Fog city night festival - Script Codes CSS Codes

body, html { position: relative; overflow: hidden; height: 100%; width: 100%;
}
div { position: absolute; z-index: 10; top: 0; left: 0; height: 100%; width: 100%;
}
.city { position: absolute; z-index: 2; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/suhyeon-choi-317980.jpg"); background-size: cover; background-position: center; mix-blend-mode: hard-light;
}
.city:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; box-shadow: inset 0px 0px 300px black;
}
.blend { position: absolute; z-index: 1; top: -250%; left: -250%; height: 500%; width: 500%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/436243/daria-tumanova-310162.jpg"); background-size: cover; background-position: center; -webkit-transform-origin: 60% 60%; transform-origin: 60% 60%; -webkit-animation: 50s infinite linear twirl, 0.46875s infinite ease-in-out glow; animation: 50s infinite linear twirl, 0.46875s infinite ease-in-out glow;
}
@-webkit-keyframes twirl { 0% { -webkit-transform: rotate(0deg) scale(1.1); transform: rotate(0deg) scale(1.1); } 50% { -webkit-transform: rotate(180deg) scale(0.9); transform: rotate(180deg) scale(0.9); } 100% { -webkit-transform: rotate(360deg) scale(1.1); transform: rotate(360deg) scale(1.1); }
}
@keyframes twirl { 0% { -webkit-transform: rotate(0deg) scale(1.1); transform: rotate(0deg) scale(1.1); } 50% { -webkit-transform: rotate(180deg) scale(0.9); transform: rotate(180deg) scale(0.9); } 100% { -webkit-transform: rotate(360deg) scale(1.1); transform: rotate(360deg) scale(1.1); }
}
@-webkit-keyframes glow { 0% { -webkit-filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); } 40% { -webkit-filter: hue-rotate(-45deg) brightness(1) contrast(1.2) blur(10px); filter: hue-rotate(-45deg) brightness(1) contrast(1.2) blur(10px); } 100% { -webkit-filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); }
}
@keyframes glow { 0% { -webkit-filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); } 40% { -webkit-filter: hue-rotate(-45deg) brightness(1) contrast(1.2) blur(10px); filter: hue-rotate(-45deg) brightness(1) contrast(1.2) blur(10px); } 100% { -webkit-filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); filter: hue-rotate(0deg) brightness(0.75) contrast(1.4) blur(10px); }
}
Fog city night festival - Script Codes
Fog city night festival - Script Codes
Home Page Home
Developer Matt Popovich
Username mpopv
Uploaded November 14, 2022
Rating 4
Size 2,645 Kb
Views 20,240
Do you need developer help for Fog city night festival?

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!

Matt Popovich (mpopv) Script Codes
Name
FOLLOW UR DREAMS
SCSS Grid System
Vader Arrives on the Sanctuary Moon
MoonJS Hello World
CSS Falling Shelf Menu
Make Your Own Marco Mag
Trump Twitter Cover Generator
Magazine article
Polygon-style gradient pull quote
Profile CSS
Create amazing video scripts 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!