CSS: 模拟摄像头平移监控画面效果
演示地址: https://gen8.orz.com.cn/beta/bg180/
应需求方的要求,在页面增加一些动态元素增加引导交互效果。
关键在于 CSS的animation
(keyframes
) 和 background-position
两个属性组合
animation: anibg 13s ease-in-out infinite;
……
@keyframes anibg {
0% {background-position: left center;}
50% {background-position: right center;}
100% {background-position: left center;}
}