LAMP PURE CSS with Animation

Developer
Damien Flandrin
Size
2,911 Kb
Views
433,136
  1. LAMP PURE CSS with Animation Previews
  2. LAMP PURE CSS with Animation HTML Codes
  3. LAMP PURE CSS with Animation CSS Codes

How do I make an lamp pure css with animation?

What is a lamp pure css with animation? How do you make a lamp pure css with animation? This script and codes were developed by Damien Flandrin on 12 June 2022, Sunday.

LAMP PURE CSS with Animation Previews
IQ Test

LAMP PURE CSS with Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LAMP PURE CSS with Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="lamp"> <div class="cable"></div> <div class="cover"></div> <div class="in-cover"> <div class="bulb"></div> </div> <div class="light"></div>
</div>
<div class="copyright"> <a href="https://www.damienflandrin.fr" target="blank">A pen by Damien Flandrin</a>
</div>
</body>
</html>

LAMP PURE CSS with Animation - Script Codes CSS Codes

html, body { height: 100%;
}
body { background: #333; overflow: hidden; position: relative;
}
a { color: #333; text-decoration: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; margin: 0px auto; font-family: Helvetica, Arial, Sans-Serif; text-transform: uppercase; font-weight: bold;
}
.lamp { position: absolute; left: 0px; right: 0px; top: 0px; margin: 0px auto; width: 300px; display: flex; flex-direction: column; align-items: center; transform-origin: center top; animation-timing-function: cubic-bezier(0.6, 0, 0.38, 1); animation: move 5s infinite; /* IE 10+, Fx 29+ */
}
@keyframes move { 0% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } 100% { transform: rotate(-30deg); }
}
.cable { width: 4px; height: 200px; background: white;
}
.cover { width: 200px; height: 80px; background: #EEEEEE; border-top-left-radius: 50%; border-top-right-radius: 50%; position: relative; z-index: 200;
}
.in-cover { width: 100%; max-width: 200px; height: 20px; border-radius: 100%; background: #AAA; position: absolute; left: 0px; right: 0px; margin: 0px auto; bottom: -9px; z-index: 100;
}
.in-cover .bulb { width: 50px; height: 50px; background: #F5D76E; border-radius: 50%; position: absolute; left: 0px; right: 0px; bottom: -20px; margin: 0px auto;
}
.light { width: 200px; height: 0px; border-bottom: 900px solid rgba(100, 100, 100, 0.2); border-left: 50px solid transparent; border-right: 50px solid transparent; position: absolute; left: 0px; right: 0px; top: 270px; margin: 0px auto; z-index: 1;
}
.copyright { width: 100%; height: 100%; text-align: center; position: relative;
}
LAMP PURE CSS with Animation - Script Codes
LAMP PURE CSS with Animation - Script Codes
Home Page Home
Developer Damien Flandrin
Username dam62500
Uploaded June 12, 2022
Rating 4
Size 2,911 Kb
Views 433,136
Do you need developer help for LAMP PURE CSS with Animation?

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!

Damien Flandrin (dam62500) Script Codes
Name
Make a grid with Neat 2.0
Description list inline
Card UI CSS
Menu responsive avec Flexbox - 2
Menu responsive avec Flexbox - 1
A Pen by Damien Flandrin
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!