Color drop animation for profession.is

Developer
Wenting Zhang
Size
3,083 Kb
Views
16,192
  1. Color drop animation for profession.is Previews
  2. Color drop animation for profession.is HTML Codes
  3. Color drop animation for profession.is CSS Codes

How do I make an color drop animation for profession.is?

What is a color drop animation for profession.is? How do you make a color drop animation for profession.is? This script and codes were developed by Wenting Zhang on 07 November 2022, Monday.

Color drop animation for profession.is Previews
IQ Test

Color drop animation for profession.is - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>color drop animation for profession.is</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://brick.a.ssl.fastly.net/Roboto+Condensed:300,400,700/Latin+Modern+Roman:400i">
<link rel="stylesheet" href="https://i.icomoon.io/public/daef4d80b1/row/style.css">
<header>
<ul class="menuDots"> <li><span>Try it now</span><i></i></li> <li><span>Résumés</span><i></i></li> <li><span>Features</span><i></i></li> <li><span>Newsletter</span><i></i></li> <li><span>About</span><i></i></li>	</ul>
</header>
<main> <h4>Hover over the menu items to see effect. Created for <a href="http://profession.is" target="_blank">profession.is</a> by <a href="https://twitter.com/DesignJokes" target="_blank">@DesignJokes</a>.</h4> <h4>If you have a moment, <a href="https://thenetawards.com/vote/talent/wenting-zhang/" target="_blank">vote for me<span>☻</span></a></h4>
</main>	<footer>	<a class="next" target="_blank" href="https://twitter.com/intent/tweet?text=Color%20drop%20animation&via=designjokes%20@codepen&url=https://codepen.io/wentin/pen/doYyrj&hashtags=css">	<div class="nextIcon icon"></div>	</a>	</footer>	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" /> </filter> </defs>	</svg>
</body>
</html>

Color drop animation for profession.is - Script Codes CSS Codes

header .menuDots { font-family: "Latin Modern Roman"; font-style: italic; color: #4C4D4D; line-height: 60px; position: absolute; right: 20px; top: -16px; width: 100%; text-align: center; height: 120px; -webkit-filter: url("#goo"); filter: url("#goo"); z-index: 0;
}
header .menuDots li { cursor: pointer; display: inline-block; position: relative; padding: 0 16px;
}
header .menuDots li span { font-size: 20px; display: block;
}
header .menuDots li i { display: block; position: absolute; width: 24px; height: 24px; border-radius: 100%; background-color: #F85931; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: -24px; z-index: -1; -webkit-animation: rubberBandReverse 0.4s ease-in forwards; animation: rubberBandReverse 0.4s ease-in forwards;
}
header .menuDots li::before, header .menuDots li::after { content: ''; display: block; position: absolute; width: 100%; height: 24px; background-color: #F85931; margin-left: auto; margin-right: auto; left: 0; right: 0;
}
header .menuDots li::before { top: -24px;
}
header .menuDots li::after { bottom: -24px;
}
header .menuDots li:hover i { -webkit-animation: rubberBand 0.4s ease-out both; animation: rubberBand 0.4s ease-out both;
}
header .menuDots .square { position: absolute; background-color: #F85931; top: 60px; left: 0; right: 0; height: 60px;
}
header .menuDots .square::before { content: none;
}
header .menuDots li:nth-child(1) i, header .menuDots li:nth-child(1)::before, header .menuDots li:nth-child(1)::after { background-color: #F85931;
}
header .menuDots li:nth-child(2) i, header .menuDots li:nth-child(2)::before, header .menuDots li:nth-child(2)::after { background-color: #FFDD02;
}
header .menuDots li:nth-child(3) i, header .menuDots li:nth-child(3)::before, header .menuDots li:nth-child(3)::after { background-color: #50E3C2;
}
header .menuDots li:nth-child(4) i, header .menuDots li:nth-child(4)::before, header .menuDots li:nth-child(4)::after { background-color: #F85931;
}
header .menuDots li:nth-child(5) i, header .menuDots li:nth-child(5)::before, header .menuDots li:nth-child(5)::after { background-color: #50E3C2;
}
main { display: block; position: absolute; top: 60px; left: 20px; right: 20px; bottom: 20px; background-color: #F85931;
}
main h4 { color: white; /* font-family: Georgia; */ font-family: "Latin Modern Roman"; font-size: 24px; font-style: italic; font-weight: normal; text-align: center; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin-top: 40px;
}
main h4 a { color: white; text-decoration: none; border-bottom: solid 1px white;
}
main h4 a span { font-style: normal;
}
main h4 a:hover { color: #FFDD02; border-bottom: solid 1px #FFDD02;
}
@-webkit-keyframes rubberBand { 0% { width: 28px; height: 28px; border-radius: 100%; -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 50% { width: 22px; height: 22px; border-radius: 100%; -webkit-transform: scale(0.5, 1.5) translateY(-41px); transform: scale(0.5, 1.5) translateY(-41px); } 100% { width: 100%; height: 2px; border-radius: 0; -webkit-transform: scale(1, 1) translateY(-82px); transform: scale(1, 1) translateY(-82px); }
}
@-webkit-keyframes rubberBandReverse { 100% { width: 28px; height: 28px; border-radius: 100%; -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 50% { width: 22px; height: 22px; border-radius: 100%; -webkit-transform: scale(0.5, 1.5) translateY(-41px); transform: scale(0.5, 1.5) translateY(-41px); } 0% { width: 100%; height: 2px; border-radius: 0; -webkit-transform: scale(1, 1) translateY(-82px); transform: scale(1, 1) translateY(-82px); }
}
@keyframes rubberBand { 0% { width: 28px; height: 28px; border-radius: 100%; -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 50% { width: 22px; height: 22px; border-radius: 100%; -webkit-transform: scale(0.5, 1.5) translateY(-41px); transform: scale(0.5, 1.5) translateY(-41px); } 100% { width: 100%; height: 2px; border-radius: 0; -webkit-transform: scale(1, 1) translateY(-82px); transform: scale(1, 1) translateY(-82px); }
}
@keyframes rubberBandReverse { 100% { width: 28px; height: 28px; border-radius: 100%; -webkit-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 50% { width: 22px; height: 22px; border-radius: 100%; -webkit-transform: scale(0.5, 1.5) translateY(-41px); transform: scale(0.5, 1.5) translateY(-41px); } 0% { width: 100%; height: 2px; border-radius: 0; -webkit-transform: scale(1, 1) translateY(-82px); transform: scale(1, 1) translateY(-82px); }
}
footer { position: absolute; width: 100%; bottom: 0; height: 50px; overflow: hidden; z-index: 7;
}
footer .next { top: 30px; margin: 0 auto;
}
footer .next .nextIcon { position: absolute; left: 19px; top: -14px;
}
.next { display: block; width: 60px; height: 30px; background-color: white; position: relative; cursor: pointer; transition: all 0.4s ease;
}
.next::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 100%; background-color: white; left: 0; top: -30px; transition: all 0.4s ease;
}
.next:hover { background-color: #50E3C2;
}
.next:hover::before { background-color: #50E3C2;
}
.nextIcon { height: 24px; width: 24px; transition: all 0.4s ease;
}
.nextIcon::before { font-family: icomoon; content: '\e616'; color: #4C4D4D; width: 24px; height: 24px; font-size: 24px; text-align: center;
}
Color drop animation for profession.is - Script Codes
Color drop animation for profession.is - Script Codes
Home Page Home
Developer Wenting Zhang
Username wentin
Uploaded November 07, 2022
Rating 4.5
Size 3,083 Kb
Views 16,192
Do you need developer help for Color drop animation for profession.is?

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!

Wenting Zhang (wentin) Script Codes
Name
Circle button animation for huffpost
Three.js start point
A Pen by Wenting Zhang
Getting x-height and descender line
Angular directive poc
Guitar string
P5.js start point
Water ripple effect.
Fibonacci output
Algorithmic Animation with Javascript Tail
Create amazing Facebook ads 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!