Dive into the universe 🌌 with #CSS! Cosmic dreams ✨ , inspired by a mesmerizing video from @anxovizcaino (https://twitter.com/anxovizcaino/status/1782832442572693845).
🔊 Sound by Suno (#GenAI) ✅ Best perspective from portrait resolution. ✅ Works well in Chrome
A Pen by Konstantin Denerz on CodePen.
Got the idea from 2 other pens around here. I just threw in my own sense style. http://codepen.io/codetrail/pen/uHvpl http://codepen.io/kaypooma/pen/ehfjC
Disclaimer: I am not responsible for your seizures
Happy Coding! :)
| .night | |
| - for (i = 0; i < 20; i++) | |
| .shooting_star |
| const count = 5000 | |
| let scene | |
| let camera | |
| let renderer | |
| let mouseX = 0 | |
| let mouseY = 0 | |
| let windowHalfX = window.innerWidth / 2 | |
| let windowHalfY = window.innerHeight / 2 |
A timeline with animated collapsible descriptions for each item.
Source for Unix facts: Wikipedia.
A Pen by Jon Kantner on CodePen.
| <div class="stars"></div> |
| p.attention click to roll | |
| .container | |
| - for (i = 0; i < 400; i++) | |
| .trigger | |
| .monitor | |
| .opening | |
| .camera.o-x | |
| .camera.o-y | |
| .camera.o-z | |
| .awing |
| %h1.logo | |
| Solar explorer | |
| %span in only CSS | |
| %input.planet9{:type => 'radio', :id => 'pluto', :name => 'planet'} | |
| %label.pluto.menu{:for => 'pluto'} | |
| .preview | |
| .info | |
| %h2 | |
| .pip | |
| Pluto |
| <aside id="sidebar" class="nano"> | |
| <div class="nano-content"> | |
| <div class="logo-container"><span class="logo glyphicon glyphicon-envelope"></span>Mail</div><a class="compose-button">Compose</a> | |
| <menu class="menu-segment"> | |
| <ul> | |
| <li class="active"><a href="#">Inbox<span> (43)</span></a></li> | |
| <li><a href="#">Important</a></li> | |
| <li><a href="#">Sent</a></li> | |
| <li><a href="#">Drafts</a></li> | |
| <li><a href="#">Trash</a></li> |
| - | |
| const DEMOS = [ | |
| { | |
| name: 'Kitkat', | |
| id: 'LYpNyvm', | |
| }, | |
| { | |
| name: 'Newton', | |
| id: 'abzeaWJ', | |
| }, |