index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 300px;
/*渐变*/
background: linear-gradient(black 50%,white 50%);
border: 1px solid black;
border-radius: 50%;
display: flex;
align-items: center;
transition: all 2s;
margin: 100px auto;
}
.box:hover{
transform: translateX(500px) scale(1.2) rotate(360deg);
}
@keyframes xuanzhuan{
0%{
transform: scale(0.5);
}
100%{
transform: scale(1.5);
}
}
.left{
width: 30px;
height: 30px;
background: white;
border: 60px solid black;
border-radius: 50%;
/*animation: 姓名 时间 一直做动画 来回（变大-变小） 匀速;*/
animation: xuanzhuan 2s infinite alternate linear;
/*改轴心点 x轴 y轴*/
transform-origin: left;
}
.right{
width: 30px;
height: 30px;
background: black;
border: 60px solid white;
border-radius: 50%;
animation: xuanzhuan 2s infinite alternate linear;
/*改轴心点 x轴 y轴*/
transform-origin: right;
/*动画延迟,-（符号）解决刚开始动画延时的问题*/
animation-delay: -2s;
text-align: center;
}
.right span{
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"><span>I miss you</span></div>
</div>
<script>
var boxs = document.querySelector('.box')
boxs.onclick = function () {
document.querySelector('span').style.display = 'block'
document.querySelector('span').style.color = 'red'
}
</script>
</body>
</html>
运行结果：
