使用CSS3怎么实现一个全景图特效
本篇文章为大家展示了使用CSS3怎么实现一个全景图特效，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
站在用户的角度思考问题，与客户深入沟通，找到黑龙江网站设计与黑龙江网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖黑龙江地区。
基本代码
html代码：
首先定义一些基本的样式和动画：
.panorama {
width: 300px;
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;
}
@keyframes panorama {
to {
background-position: 100% 0;
}
}background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高，并且水平方向自动，即图片最左边贴着容器左侧。
执行动画的流程是：周而复始、往复交替、线性并且时间周期是10s。
手动控制动画执行
现在我们实现当鼠标悬浮于图片时才让它动起来，鼠标离开让它静止。
需要用到这个属性animation-play-state: paused | running，它表示动画的两个状态：暂停和运行。
完整CSS代码：
.panorama {
width: 300px;
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;
}
}上述内容就是使用CSS3怎么实现一个全景图特效，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
网页名称：使用CSS3怎么实现一个全景图特效
文章路径：http://6mz.cn/article/ppggep.html