1、实现动画，当鼠标移动到目标上，实现暂停
<!doctype html> <html charset="utf-8"> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn"> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>地图旋转</title> <meta http-equiv="Content-Language" content="zh-cn"> <meta name="keywords" content="关键词,关键词,..." /> <meta name="description" content="关键词,关键词,..." /> <style type="text/css"> body{ background-color: red; } .circle{ border-radius: 100%; height: 880px; width: 880px; left: 200px; top: 200px; position: absolute; border: 1px solid #394057; transform-style: preserve-3d; animation: earth 10s infinite linear; background-image:url('./earth.jpg'); } @keyframes earth { from {background-position: -140px -145px;} to {background-position: -880px -145px;} } .circle:hover { animation-play-state: paused; } </style> </head> <body> <div class="container"> <div class="circle"> </div> </div> </body> </html>
2、实现动画回归到初始位置/想要定位的地方暂停
在1中，将animation-play-state: paused;替换为animation: 0s ease 0s normal none 1 none !important;
并在该处加上定位background-position: -140px -145px;【分别代表X,Y，其他用法可从中领悟】