SCSS Grid

Developer
Victor Freire
Size
2,818 Kb
Views
22,264
  1. SCSS Grid Previews
  2. SCSS Grid HTML Codes
  3. SCSS Grid CSS Codes

How do I make an scss grid?

Testing gradual effect in elements.. What is a scss grid? How do you make a scss grid? This script and codes were developed by Victor Freire on 15 September 2022, Thursday.

SCSS Grid Previews
IQ Test

SCSS Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS Grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></main>
</body>
</html>

SCSS Grid - Script Codes CSS Codes

* { padding: 0; margin: auto; box-sizing: border-box;
}
body { background: #90a8d0;
}
main { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50vh; height: 50vh; perspective: 500px; transform-style: preserve-3d;
}
i { float: left; width: 10vh; height: 10vh; opacity: .8; animation-name: round; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: ease-in-out; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
}
i:nth-child(1) { background: #f7cbca; animation-delay: 0.1s;
}
i:nth-child(1):hover { opacity: 1;
}
i:nth-child(1):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(2) { background: #f7cbca; animation-delay: 0.2s;
}
i:nth-child(2):hover { opacity: 1;
}
i:nth-child(2):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(3) { background: #f7ccca; animation-delay: 0.3s;
}
i:nth-child(3):hover { opacity: 1;
}
i:nth-child(3):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(4) { background: #f7cdca; animation-delay: 0.4s;
}
i:nth-child(4):hover { opacity: 1;
}
i:nth-child(4):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(5) { background: #f7ceca; animation-delay: 0.5s;
}
i:nth-child(5):hover { opacity: 1;
}
i:nth-child(5):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(6) { background: #f7ceca; animation-delay: 0.6s;
}
i:nth-child(6):hover { opacity: 1;
}
i:nth-child(6):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(7) { background: #f7cfca; animation-delay: 0.7s;
}
i:nth-child(7):hover { opacity: 1;
}
i:nth-child(7):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(8) { background: #f7d0ca; animation-delay: 0.8s;
}
i:nth-child(8):hover { opacity: 1;
}
i:nth-child(8):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(9) { background: #f7d1ca; animation-delay: 0.9s;
}
i:nth-child(9):hover { opacity: 1;
}
i:nth-child(9):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(10) { background: #f7d1ca; animation-delay: 1s;
}
i:nth-child(10):hover { opacity: 1;
}
i:nth-child(10):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(11) { background: #f7d2ca; animation-delay: 1.1s;
}
i:nth-child(11):hover { opacity: 1;
}
i:nth-child(11):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(12) { background: #f7d3ca; animation-delay: 1.2s;
}
i:nth-child(12):hover { opacity: 1;
}
i:nth-child(12):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(13) { background: #f7d4ca; animation-delay: 1.3s;
}
i:nth-child(13):hover { opacity: 1;
}
i:nth-child(13):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(14) { background: #f7d4ca; animation-delay: 1.4s;
}
i:nth-child(14):hover { opacity: 1;
}
i:nth-child(14):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(15) { background: #f7d5ca; animation-delay: 1.5s;
}
i:nth-child(15):hover { opacity: 1;
}
i:nth-child(15):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(16) { background: #f7d6ca; animation-delay: 1.6s;
}
i:nth-child(16):hover { opacity: 1;
}
i:nth-child(16):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(17) { background: #f7d7ca; animation-delay: 1.7s;
}
i:nth-child(17):hover { opacity: 1;
}
i:nth-child(17):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(18) { background: #f7d7ca; animation-delay: 1.8s;
}
i:nth-child(18):hover { opacity: 1;
}
i:nth-child(18):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(19) { background: #f7d8ca; animation-delay: 1.9s;
}
i:nth-child(19):hover { opacity: 1;
}
i:nth-child(19):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(20) { background: #f7d9ca; animation-delay: 2s;
}
i:nth-child(20):hover { opacity: 1;
}
i:nth-child(20):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(21) { background: #f7daca; animation-delay: 2.1s;
}
i:nth-child(21):hover { opacity: 1;
}
i:nth-child(21):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(22) { background: #f7daca; animation-delay: 2.2s;
}
i:nth-child(22):hover { opacity: 1;
}
i:nth-child(22):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(23) { background: #f7dbca; animation-delay: 2.3s;
}
i:nth-child(23):hover { opacity: 1;
}
i:nth-child(23):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(24) { background: #f7dcca; animation-delay: 2.4s;
}
i:nth-child(24):hover { opacity: 1;
}
i:nth-child(24):hover:active { transform: translateZ(-10px); opacity: .65;
}
i:nth-child(25) { background: #f7ddca; animation-delay: 2.5s;
}
i:nth-child(25):hover { opacity: 1;
}
i:nth-child(25):hover:active { transform: translateZ(-10px); opacity: .65;
}
@keyframes round { 30% { transform: rotate(0) rotateY(180deg) rotateX(0) scale(0.5); } 60% { transform: rotate(180deg) rotateY(180deg) rotateX(0) scale(0.2); } 90%, 100% { transform: rotate(180deg) rotateY(180deg) rotateX(180deg); }
}
SCSS Grid - Script Codes
SCSS Grid - Script Codes
Home Page Home
Developer Victor Freire
Username victorfreire
Uploaded September 15, 2022
Rating 3.5
Size 2,818 Kb
Views 22,264
Do you need developer help for SCSS Grid?

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!

Victor Freire (victorfreire) Script Codes
Name
Search Box and Button Animated
Google Dots Radio Buttons
Clip-Path Polygons
Wi-Fi Icon Spinner inspired by Material Design
Archery
Save for later...
Gooey Light Rings Loader
Create amazing captions 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!