CSS3学习【不间断更新实现各种效果】

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>

View Code

2、实现动画回归到初始位置/想要定位的地方暂停

在1中，将animation-play-state: paused;替换为animation: 0s ease 0s normal none 1 none !important;

并在该处加上定位background-position: -140px -145px;【分别代表X,Y，其他用法可从中领悟】