CSS3实现全景图特效

前端开发 作者: 2024-08-20 12:25:01
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高,并且水平方向自动,即图片最左边贴着容器左侧。
<div class="panorama"></div>
.panorama {
  width: 300px;
  height:
  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;
  }
}
 panorama 10s linear infinite alternate;
  animation-play-state: paused;
}

.panorama:hover,.panorama:focus { running;
}
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65512.html
CSS3实现全景图特效