Rotating Cube
Description: Use the CSS3 transform property to create a cube that rotates in three-dimensional space.
<div class="cube"></div>
<style>
.cube {
width: 100px;
height: 100px;
position: relative;
perspective: 1000px;
}
.cube div {
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
transform-style: preserve-3d;
}
.cube .face {
border: 1px solid black;
}
.cube .front {
transform: translateZ(50px);
}
.cube .back {
transform: rotateX(180deg) translateZ(50px);
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
}
.cube:hover {
animation: spin ½s infinite linear;
}
@keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>Hover effect animation
Description: When the mouse hovers over a link, a transition animation including enlargement, shadow and color change is triggered.
<a href="#" class="hover-effect">Hover me</a>
<style>
.hover-effect {
display: inline-block;
padding: 1em 2em;
color: white;
background-color: #3498db;
text-decoration: none;
transition: all 0.3s ease-out;
}
.hover-effect:hover {
transform: scale(1.1);
box-shadow: 0 ⅓em ⅔em rgba(0, 0, 0, 0.¾);
background-color: #2980b9;
}
</style>Path animation
Description: Use the CSS offset-path property to move an element along an SVG path.动。
<svg viewBox="0 0 ¼ ¼" xmlns="http://www.w3.org/2000/svg">
<path id="myPath" d="M 0,100 C 40,0 65,-15 100,0 Z"/>
</svg>
<div class="animated-element"></div>
<style>
.animated-element {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
offset-path: path('M 0,100 C 40,0 65,-15 100,0 Z');
animation: move-along 5s linear infinite;
}
@keyframes move-along {
to {
offset-distance: 100%;
}
}
</style>Pure CSS progress bar
Description: Use linear-gradient and background-size to create a customizable animated progress bar.
<div class="progress-bar">
<div class="progress"></div>
</div>
<style>
.progress-bar {
width: 100%;
height: ˜20px;
background-color: #eee;
position: relative;
}
.progress {
background-image: linear-gradient(to right, #4caf50, #4caf50);
background-size: 0% 100%;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: background-size 0..jpgs ease-out;
}
.progress-bar:hover .progress {
background-size: 100% 100%;
}
</style>Text typewriter effect
Description: Simulate the animation effect of an old-fashioned typewriter outputting text word by word.
<p class="typing-animation">Hello, welcome to my website!</p>
<style>
.typing-animation {
overflow: hidden;
border-right: 3px solid transparent;
white-space: nowrap;
letter-spacing: 0.1em;
animation: typing 4s steps(40, end), blink-caret 0..jpgs step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
50% { border-color: black; }
}
</style>3D Flip Card
Description: When the mouse hovers over the card, the card flips to display the back content with a 3D effect.
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<!-- Front content -->
</div>
<div class="flip-card-back">
<!-- Back content -->
</div>
</div>
</div>
<style>
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 300px;
height: 200px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>SVG path following animation
Description: Use the CSS motion-path property to make an element move along an SVG path.
<svg width="0" height="0">
<path id="motionPath" d="M10 80 Q 52.5 10, 95 80 T 180 80"/>
</svg>
<div class="animated-element"></div>
<style>
.animated-element {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
offset-path: path('M10 80 Q 52.5 10, 95 80 T 180 80');
animation: move-along 5s linear infinite;
}
@keyframes move-along {
to {
offset-distance: 100%;
}
}
</style>SVG heartbeat animation
Description: Use SVG <circle> element and CSS animation to simulate the heartbeat effect.
<svg viewBox="0 0 .png 100" xmlns="http://www.w3.org/2000/svg">
<circle class="heart-beat" cx="50" cy="50" r="45" fill="#ff4d4d"/>
</svg>
<style>
.heart-beat {
animation: heartbeat 1s ease-in-out infinite alternate;
}
@keyframes heartbeat {
to {
transform: scale(0.9);
opacity: 0.8;
}
}
</style>Rotate text
Description: Use CSS3 transform property to rotate text around the center point.
<h1 class="rotating-text">Rotate Me</h1>
<style>
.rotating-text {
display: inline-block;
font-size: 3em;
animation: rotate .pngs linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>Accordion effect
Description: Implement an accordion effect that expands/collapses content on click.
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">Item 1</button>
<div class="accordion-content">
<!-- Content here -->
</div>
</div>
<!-- Add more accordion items as needed -->
</div>
<style>
.accordion .accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion .accordion-header {
display: block;
padding: 1rem;
cursor: pointer;
}
.accordion .accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion .accordion-item.open .accordion-content {
max-height: 100vh;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const accordions = document.querySelectorAll('.accordion');
accordions.forEach(function (accordion) {
accordion.addEventListener('click', function (event) {
const target = event.target;
if (target.classList.contains('accordion-header')) {
const item = target.closest('.accordion-item');
item.classList.toggle('open');
}
});
});
});
</style>Parallax scrolling background
Description: Create a parallax scrolling effect where the background and foreground content move at different speeds when scrolling, creating an illusion of depth.
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<!-- Your content here -->
</div>
</div>
<style>
.parallax-container {
position: relative;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.parallax-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('your-background-image.jpg');
background-size: cover;
transform-origin: top;
transform: translateZ(-1px) scale(2);
}
.content {
position: relative;
z-index: 1;
padding: 2rem;
}
</style>CSS-only hamburger menu
Description: Use pure CSS to implement an expandable/collapsed hamburger menu.
<div class="navbar">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="hamburger">
<span></span>
<span></span>
<span></span>
</label>
<nav id="navbar-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.hamburger {
display: inline-block;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 3px;
background-color: #333;
margin-bottom: 5px;
transition: all 0.3s ease;
}
#menu-toggle:checked ~ #navbar-menu {
display: block;
}
#menu-toggle:checked ~ .hamburger span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#menu-toggle:checked ~ .hamburger span:nth-child(2) {
opacity: 0;
}
#menu-toggle:checked ~ .hamburger span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
#navbar-menu {
display: none;
list-style-type: none;
padding-left: 0;
}
#navbar-menu li {
padding: 1rem 0;
}
#navbar-menu a {
color: #333;
text-decoration: none;
}
</style>CSS3 carousel
Description: Use pure CSS to implement a carousel component that automatically switches images
<div class="carousel">
<input type="radio" name="carousel-control" id="carousel-1" checked>
<input type="radio" name="carousel-control" id="carousel-2">
<input type="radio" name="carousel-control" id="carousel-3">
<div class="carousel-slides">
<label for="carousel-1" class="slide slide-1"></label>
<label for="carousel-2" class="slide slide-2"></label>
<label for="carousel-3" class="slide slide-3"></label>
</div>
<div class="carousel-navigation">
<label for="carousel-1" class="nav-button prev">❮</label>
<label for="carousel-3" class="nav-button next">❯</label>
</div>
</div>
<style>
.carousel {
position: relative;
width: .png00%;
overflow: hidden;
}
.carousel-slides {
position: relative;
width: calc(100% * 3);
transition: transform 0.4s ease-in-out;
}
.slide {
position: relative;
float: left;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
}
/* Add your slide backgrounds here */
.slide-1 { background-image: url('image1.jpg'); }
.slide-2 { background-image: url('image2.jpg'); }
.slide-3 { background-image: url('image3.jpg'); }
.carousel-navigation {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.nav-button {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
cursor: pointer;
}
/* Hide radio buttons */
input[name="carousel-control"] {
display: none;
}
/* Change slide on radio button click */
input[name="carousel-control"]:checked + .carousel-slides {
transform: translateX(-100%);
}
/* Automatic slide change with CSS animations */
@keyframes carousel-slide {
0% { transform: translateX(0); }
33.33% { transform: translateX(-100%); }
66.66% { transform: translateX(-200%); }
100% { transform: translateX(-300%); }
}
input[name="carousel-control"]:checked + .carousel-slides {
animation: carousel-slide 12s linear infinite;
}
</style>CSS3 loading animation
Description: Create an interesting loading animation, such as a rotating ring.
<div class="loading-spinner">
<div class="spinner-circle"></div>
</div>
<style>
.loading-spinner {
display: inline-block;
width: 64px;
height: 64px;
position: relative;
}
.spinner-circle {
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
margin-top: -24px;
margin-left: -24px;
border-radius: 50%;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #000;
animation: spinner 1s linear infinite;
}
@keyframes spinner {
to { transform: rotate(360deg); }
}
</style>CSS3 Clock
Description: Use pure CSS to build a clock that simulates the movement of the hour hand.
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<style>
.clock {
width: 300px;
height: 300px;
position: relative;
border: 20px solid #333;
border-radius: 50%;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
background-color: #333;
border-radius: 50%;
}
.hand {
width: 50%;
height: 6px;
background-color: #f00;
position: absolute;
bottom: 50%;
transform-origin: center bottom;
transition: all 0.05s;
}
.hour-hand {
height: 8px;
background-color: #000;
}
.minute-hand {
width: 40%;
}
.second-hand {
width: 30%;
background-color: #f00;
height: 4px;
animation: second-hand 60s linear infinite;
}
@keyframes second-hand {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
</style>
