For Fun
How do I make an for fun?
Not sure what I am coding here.. What is a for fun? How do you make a for fun? This script and codes were developed by Chris Ota on 15 September 2022, Thursday.
For Fun - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>For Fun</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="dots"></div>
<div class="dots2"></div>
<div class="dots3"></div>
</body>
</html>
For Fun - Script Codes CSS Codes
html { background: #111;
}
body { overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; position: absolute; -webkit-animation: scale 3.6s linear infinite; animation: scale 3.6s linear infinite;
}
*,
*:before,
*:after { box-sizing: border-box;
}
@-webkit-keyframes scale { 0% { -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 50% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); }
}
@keyframes scale { 0% { -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 50% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); }
}
@-webkit-keyframes cw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes cw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes ccw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@keyframes ccw { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
div { border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
div:before, div:after { content: ''; position: absolute; display: block; height: inherit; width: inherit; border-radius: inherit;
}
.dots { width: 200px; height: 200px; box-shadow: -106px 0 0 -98px #14c8ff, -106px 0 4px -97px #0014f0, 106px 0 0 -98px #14c8ff, 106px 0 4px -97px #0014f0, 0 -106px 0 -98px #14c8ff, 0 -106px 4px -97px #0014f0, 0 106px 0 -98px #14c8ff, 0 106px 4px -97px #0014f0, 0 0 4px 4px #111, 0 0 4px 8px rgba(0, 30, 250, 0.2); -webkit-animation: cw 3.6s linear infinite; animation: cw 3.6s linear infinite;
}
.dots:before, .dots:after { box-shadow: -106px 0 0 -98px #14c8ff, -106px 0 4px -97px #0014f0, 106px 0 0 -98px #14c8ff, 106px 0 4px -97px #0014f0, 0 -106px 0 -98px #14c8ff, 0 -106px 4px -97px #0014f0, 0 106px 0 -98px #14c8ff, 0 106px 4px -97px #0014f0;
}
.dots:before { -webkit-transform: rotate(8deg); transform: rotate(8deg);
}
.dots:after { -webkit-transform: rotate(65deg); transform: rotate(65deg);
}
.dots2 { width: 216px; height: 216px; box-shadow: -114px 0 0 -106px #14c8ff, -114px 0 4px -105px #0014f0, 114px 0 0 -106px #14c8ff, 114px 0 4px -105px #0014f0, 0 -114px 0 -106px #14c8ff, 0 -114px 4px -105px #0014f0, 0 114px 0 -106px #14c8ff, 0 114px 4px -105px #0014f0, 0 0 4px 4px #111, 0 0 4px 8px rgba(0, 30, 250, 0.2); -webkit-animation: ccw 4.2s linear infinite; animation: ccw 4.2s linear infinite;
}
.dots2:before, .dots2:after { box-shadow: -114px 0 0 -106px #14c8ff, -114px 0 4px -105px #0014f0, 114px 0 0 -106px #14c8ff, 114px 0 4px -105px #0014f0, 0 -114px 0 -106px #14c8ff, 0 -114px 4px -105px #0014f0, 0 114px 0 -106px #14c8ff, 0 114px 4px -105px #0014f0;
}
.dots2:before { -webkit-transform: rotate(73deg); transform: rotate(73deg);
}
.dots2:after { -webkit-transform: rotate(122deg); transform: rotate(122deg);
}
.dots3 { width: 232px; height: 232px; box-shadow: -122px 0 0 -114px #14c8ff, -122px 0 4px -113px #0014f0, 122px 0 0 -114px #14c8ff, 122px 0 4px -113px #0014f0, 0 -122px 0 -114px #14c8ff, 0 -122px 4px -113px #0014f0, 0 122px 0 -114px #14c8ff, 0 122px 4px -113px #0014f0, 0 0 4px 4px #111, 0 0 4px 8px rgba(0, 30, 250, 0.2); -webkit-animation: cw 2.6s linear infinite; animation: cw 2.6s linear infinite;
}
.dots3:before, .dots3:after { box-shadow: -122px 0 0 -114px #14c8ff, -122px 0 4px -113px #0014f0, 122px 0 0 -114px #14c8ff, 122px 0 4px -113px #0014f0, 0 -122px 0 -114px #14c8ff, 0 -122px 4px -113px #0014f0, 0 122px 0 -114px #14c8ff, 0 122px 4px -113px #0014f0;
}
.dots3:before { -webkit-transform: rotate(39deg); transform: rotate(39deg);
}
.dots3:after { -webkit-transform: rotate(242deg); transform: rotate(242deg);
}
Developer | Chris Ota |
Username | chrisota |
Uploaded | September 15, 2022 |
Rating | 4 |
Size | 3,087 Kb |
Views | 22,264 |
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!
Name | Size |
Dynamic Restaurant Prices | 2,765 Kb |
Pure HTML and CSS Braun Clock | 6,537 Kb |
Button Hover Animation | 3,006 Kb |
Vertical Progress Navigation | 4,767 Kb |
Responsive Devices | 5,519 Kb |
Sticky Nav Bar | 5,134 Kb |
Simple Toggle Switch | 2,829 Kb |
Single Element Knob | 1,971 Kb |
Collapsable Menu | 4,335 Kb |
Random Wrist Watch | 7,665 Kb |
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!
Name | Username | Size |
SVG Text Masking | JMChristensen | 2,141 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Lightning | Akm2 | 19,150 Kb |
CSS Colors | Alexpate | 2,232 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!