EaseInOutSine Gradient Demo

Developer
Andreas Larsen
Size
3,205 Kb
Views
76,912
  1. EaseInOutSine Gradient Demo Previews
  2. EaseInOutSine Gradient Demo HTML Codes
  3. EaseInOutSine Gradient Demo CSS Codes

How do I make an easeinoutsine gradient demo?

What is a easeinoutsine gradient demo? How do you make a easeinoutsine gradient demo? This script and codes were developed by Andreas Larsen on 25 August 2022, Thursday.

EaseInOutSine Gradient Demo Previews
IQ Test

EaseInOutSine Gradient Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>EaseInOutSine Gradient Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outer"> <div class="inner"> <h2>linear</h2> </div>
</div>
<div class="outer outer--smooth"> <div class="inner inner--smooth"> <h2>ease-in-out-sine</h2> </div>
</div> <script src='https://codepen.io/larsenwork/pen/0871c9957ff96903e2bcc22a30028839.js'></script>
</body>
</html>

EaseInOutSine Gradient Demo - Script Codes CSS Codes

/*
ease-in-out-sine-gradient is processed into:
linear-gradient( hsl(290, 50%, 8%) 0%, hsla(290, 50%, 8%, 0.978) 9.5%, hsla(290, 50%, 8%, 0.925) 17.7%, hsla(290, 50%, 8%, 0.857) 24.7%, hsla(290, 50%, 8%, 0.781) 31%, hsla(290, 50%, 8%, 0.701) 36.8%, hsla(290, 50%, 8%, 0.62) 42.3%, hsla(290, 50%, 8%, 0.538) 47.6%, hsla(290, 50%, 8%, 0.455) 52.9%, hsla(290, 50%, 8%, 0.373) 58.2%, hsla(290, 50%, 8%, 0.291) 63.7%, hsla(290, 50%, 8%, 0.212) 69.5%, hsla(290, 50%, 8%, 0.138) 75.8%, hsla(290, 50%, 8%, 0.07) 82.9%, hsla(290, 50%, 8%, 0.019) 91.2%, hsla(290, 50%, 8%, 0) 100%
)
*/
.outer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: hsl(290, 50%, 8%)
}
.outer--smooth { opacity: 0; -webkit-animation: displayMe; animation: displayMe; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite
}
.inner { width: 100%; height: 75%; background: -webkit-linear-gradient( left, hsla(290, 100%, 50%, .7), hsla(330, 100%, 60%, .75), hsla(30, 100%, 50%, .7) ); background: linear-gradient( to right, hsla(290, 100%, 50%, .7), hsla(330, 100%, 60%, .75), hsla(30, 100%, 50%, .7) ); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative
}
.inner:before, .inner:after { content: ''; position: absolute; height: 33%; width: 100%; left: 0; background-image: -webkit-linear-gradient( hsl(290, 50%, 8%), hsla(290, 50%, 8%, 0) ); background-image: linear-gradient( hsl(290, 50%, 8%), hsla(290, 50%, 8%, 0) )
}
.inner:before { top: -.5px
}
.inner:after { bottom: -.5px; -webkit-transform: rotate(180deg); transform: rotate(180deg)
}
.inner--smooth { height: 90%
}
.inner--smooth:before, .inner--smooth:after { height: 45%; background-image: ease-in-out-sine-gradient( hsl(290, 50%, 8%), transparent )
}
@-webkit-keyframes displayMe { 0% { opacity: 1 } 50% { opacity: 1 } 50.5% { opacity: 0 }
}
@keyframes displayMe { 0% { opacity: 1 } 50% { opacity: 1 } 50.5% { opacity: 0 }
}
@font-face { font-family: Montserrat; font-weight: 400; src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/256812/Montserrat-Regular.woff);
}
body { font-family: Montserrat; font-weight: 400; color: white;
}
h2 { font-size: 12vmin; letter-spacing: -0.04em; text-align: center;
}
EaseInOutSine Gradient Demo - Script Codes
EaseInOutSine Gradient Demo - Script Codes
Home Page Home
Developer Andreas Larsen
Username larsenwork
Uploaded August 25, 2022
Rating 4.5
Size 3,205 Kb
Views 76,912
Do you need developer help for EaseInOutSine Gradient Demo?

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!

Andreas Larsen (larsenwork) Script Codes
Name
Optimised SVG Flags
Social.svg.min
2 shadows are better than 1
Discover Color
Easing gradients - take 2
Layout code-off
CphRain code off
Snap.svg letter morph animation
Thanks for downloading
Layout code-off completed
Create amazing blog posts 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!