Skip to content

Instantly share code, notes, and snippets.

@lx7575000

lx7575000/CSSFullSpace.html

Created April 21, 2016 12:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lx7575000/7f2adf9700a69a96d10f68c5413fca62 to your computer and use it in GitHub Desktop.
Save lx7575000/7f2adf9700a69a96d10f68c5413fca62 to your computer and use it in GitHub Desktop.
Download ZIP
CSS实现全景动画展示
Raw
CSSFullSpace.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test CSS Background ...</title>
<style>
.panorama{
width: 500px;
height: 300px;
background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
background-size: auto 100%;
cursor: pointer;
animation: panorama 10s linear infinite alternate;
animation-play-state: paused;
}
.panorama:hover,
.panorama:focus{
animation-play-state: running;
}
@keyframes panorama{
to{
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div class="panorama"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment