Skip to content

Instantly share code, notes, and snippets.

@Yoosuke

Yoosuke/background-animation

Created July 31, 2019 04:23
Show Gist options
  • Save Yoosuke/2957a6e1836cb7f8c604d4850afb61ea to your computer and use it in GitHub Desktop.
Save Yoosuke/2957a6e1836cb7f8c604d4850afb61ea to your computer and use it in GitHub Desktop.
Download ZIP
Raw
background-animation
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<style>
* {
margin: 0px;
padding: 0px;
}
.animation,
.animation:after {
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 0;
}
.animation:after {
content: '';
}
.animation li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: show 6s linear infinite 0s;
}
.animation li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
}
.animation li div h3 {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.animation li:nth-child(1) span {
background-image: url(../assets/img/images_1.jpg);
animation-delay: 0s;
}
.animation li:nth-child(2) span {
background-image: url(../assets/img/images_2.jpg);
animation-delay: 2s;
}
.animation li:nth-child(3) span {
background-image: url(../assets/img/images_3.jpg);
animation-delay: 4s;
}
@keyframes show {
0% { opacity: 0; -moz-animation-timing-function: ease-in; }
8% { opacity: 1; -moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Gmail</li>
<li>画像</li>
<li><i class="material-icons md-36">apps</i></li>
</ul>
</nav>
</header>
<main>
<ul class="animation">
<li>
<span>title</span>
<div>
<h3>animation</h3>
</div>
</li>
<li><!-- image-erea1 --></li>
<li><!-- image-erea2 --></li>
<li><!-- image-erea3 --></li>
</ul>
</main>
<footer></footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment