Icon1 MG
How do I make an icon1 mg?
What is a icon1 mg? How do you make a icon1 mg? This script and codes were developed by ULRIKA PAN on 14 November 2022, Monday.
Icon1 MG - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>icon1 MG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>關閉視窗</h1>
<h2>Motion Graphic</h2>
<div class="block"> <div class="line1"></div> <div class="line2"></div>
</div>
</body>
</html>
Icon1 MG - Script Codes CSS Codes
@charset "UTF-8";
* { position: relative; font-family: 微軟正黑體;
}
html, body { margin: 0px; padding: 0px;
}
h1, h2 { text-align: center; color: #8AD2D2;
}
h2 { color: #5E5E62; margin: -20px;
}
.block { width: 200px; height: 200px; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: pointer; background-color: #95E2E7; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.25); transition: 0.6s;
}
.block .line1, .block .line2 { width: 155px; height: 15px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition-duration: 0.5s; background-color: white;
}
.block .line1 { transform: translateX(-50%) translateY(-200%);
}
.block .line2 { transform: translateX(-50%) translateY(200%);
}
.block:hover { background-color: #FE9EB0;
}
.block:hover .line1 { background-color: #E46985; transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1.1);
}
.block:hover .line2 { background-color: #E46985; transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1.1);
}
.block:active { box-shadow: 0px 0px 75px rgba(0, 0, 0, 0.3); background-color: #FC7593;
}
Developer | ULRIKA PAN |
Username | ulrikapan |
Uploaded | November 14, 2022 |
Rating | 3 |
Size | 2,595 Kb |
Views | 12,144 |
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 |
Mobile Profile UI | 2,931 Kb |
A Pen by ULRIKA PAN | 2,497 Kb |
Flat Button | 3,153 Kb |
Facebook Profile -UI Practice | 4,152 Kb |
Neon text 01 | 2,540 Kb |
SVG basic | 2,562 Kb |
ABOUT ME | 2,497 Kb |
HTML-form | 2,413 Kb |
Brand Style Guideline | 3,984 Kb |
Slide out navigation-1 | 4,826 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 |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Incremental game | Eprouver | 5,868 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Main page display | BarryKe | 4,562 Kb |
3D-box | Parthviroja | 2,346 Kb |
Css3 loader | Clknap | 2,391 Kb |
Scroll using CSS | Casperovic | 2,159 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!