Single element Atari ST demo effect

Developer
Keith Clark
Size
2,477 Kb
Views
42,504
  1. Single element Atari ST demo effect Previews
  2. Single element Atari ST demo effect HTML Codes
  3. Single element Atari ST demo effect CSS Codes

How do I make an single element atari st demo effect?

A single element recreation of a demo effect from my Atari ST days. This original effect used 2 bitplanes to create the transparency effect.. What is a single element atari st demo effect? How do you make a single element atari st demo effect? This script and codes were developed by Keith Clark on 12 August 2022, Friday.

Single element Atari ST demo effect Previews
IQ Test

Single element Atari ST demo effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single element Atari ST demo effect</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%; margin: 0; padding: 0;
}
.fx { background: #000; width: 100%; height: 100%; position: relative; overflow: hidden;
}
.fx:before, .fx:after { content: ""; position: absolute; width: 200%; height: 200%; background-size: 100%; top:-50%; left:-50%;
}
.fx:before { color: rgba(255,80,80,.5)
}
.fx:after { color: rgba(20,150,255,.5)
}
@supports (mix-blend-mode: difference) { .fx:before, .fx:after { mix-blend-mode: difference; } .fx:before { color: #05a; } .fx:after { color: #a50; }
}
.fx:before { background-image: repeating-radial-gradient( circle, rgba(0,0,0,0), rgba(0,0,0,0) 20px, currentColor 20px, currentColor 40px ); animation: move 19.7s infinite alternate ease-in-out;
}
.fx:after { background-image: repeating-radial-gradient( circle, rgba(0,0,0,0), rgba(0,0,0,0) 20px, currentColor 20px, currentColor 40px ); animation: move 12s infinite alternate-reverse ease-in-out;
}
@keyframes move { 0% { transform:translate(20%, -18%); } 15% { transform:translate(10%, 25%); } 30% { transform:translate(-15%, 10%); } 40% { transform:translate(-10%, 7%); } 60% { transform:translate(-20%, -20%); } 80% { transform:translate(-10%, -12%); } 100% { transform:translate(10%, -5%); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="fx"></div>
</body>
</html>

Single element Atari ST demo effect - Script Codes CSS Codes

html, body { height: 100%; margin: 0; padding: 0;
}
.fx { background: #000; width: 100%; height: 100%; position: relative; overflow: hidden;
}
.fx:before, .fx:after { content: ""; position: absolute; width: 200%; height: 200%; background-size: 100%; top:-50%; left:-50%;
}
.fx:before { color: rgba(255,80,80,.5)
}
.fx:after { color: rgba(20,150,255,.5)
}
@supports (mix-blend-mode: difference) { .fx:before, .fx:after { mix-blend-mode: difference; } .fx:before { color: #05a; } .fx:after { color: #a50; }
}
.fx:before { background-image: repeating-radial-gradient( circle, rgba(0,0,0,0), rgba(0,0,0,0) 20px, currentColor 20px, currentColor 40px ); animation: move 19.7s infinite alternate ease-in-out;
}
.fx:after { background-image: repeating-radial-gradient( circle, rgba(0,0,0,0), rgba(0,0,0,0) 20px, currentColor 20px, currentColor 40px ); animation: move 12s infinite alternate-reverse ease-in-out;
}
@keyframes move { 0% { transform:translate(20%, -18%); } 15% { transform:translate(10%, 25%); } 30% { transform:translate(-15%, 10%); } 40% { transform:translate(-10%, 7%); } 60% { transform:translate(-20%, -20%); } 80% { transform:translate(-10%, -12%); } 100% { transform:translate(10%, -5%); }
}
Single element Atari ST demo effect - Script Codes
Single element Atari ST demo effect - Script Codes
Home Page Home
Developer Keith Clark
Username keithclark
Uploaded August 12, 2022
Rating 4
Size 2,477 Kb
Views 42,504
Do you need developer help for Single element Atari ST demo effect?

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!

Keith Clark (keithclark) Script Codes
Name
Pure CSS parallax demo
3D objects in CSS
Using CSS custom properties for theme previews
Pure CSS carousel that preserves history
Styling the last row of a grid with CSS selectors
3D objects in CSS with shading
Zero-element 3d css corridor
Pure CSS z-axis scrolling
Pure CSS starfield
Switching animation keyframes in media queries
Create amazing Facebook ads 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!