pure css3 animation gradient background.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{width: 100wh; height: 90vh; color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 4s ease infinite; -moz-animation: Gradient 4s ease infinite; animation: Gradient 4s ease infinite;}
@-webkit-keyframes Gradient{
0%{background-position: 0% 50%}
50%{background-position: 100% 50%}
100%{background-position: 0% 50%}
}
@-moz-keyframes Gradient{
0%{background-position: 0% 50%}
50%{background-position: 100% 50%}
100%{background-position: 0% 50%}
}
@keyframes Gradient{
0%{background-position: 0% 50%}
50%{background-position: 100% 50%}
100%{background-position: 0% 50%}
}
h1, h6{font-family: 'Open Sans'; font-weight: 300; text-align: center; position: absolute; top: 45%; right: 0; left: 0;}
</style>
</head>
<body>
<h1>Pure CSS3 Animated Gradient Background</h1>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300" type="text/css" />
</body>
</html>
'Front End > source' 카테고리의 다른 글
| [소스] SVG gradient animation loop (0) | 2018.02.21 |
|---|---|
| input file up load preview (0) | 2018.02.06 |