最终效果：
这个背景图片
图片地址：【https://img-blog.csdnimg.cn/9a49d83642d941b0b17674ae9b4c0914.png】
组合效果：
完整编码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
* {
margin: 0px auto;
padding: 0px;
}
#box {
width: 900px;
height: 900px;
background-image: url('https://img-blog.csdnimg.cn/9a49d83642d941b0b17674ae9b4c0914.png');
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 15px 15px 15px 15px white inset;
border-radius: 50px;
}
#img {
width: 290px;
height: 290px;
text-align: center;
position: relative;
top: 35%;
border-radius: 50px;
will-change: scale;
animation: BigShow 1s infinite;
}
#img img {
width: 95%;
height: 95%;
border-radius: 50px;
}
@keyframes BigShow {
100% {
transform-origin: center;
transform: scale(1.01, 1.01);
}
90% {
transform-origin: center;
transform: scale(1.02, 1.02);
}
80% {
transform-origin: center;
transform: scale(1.03, 1.04);
}
70% {
transform-origin: center;
transform: scale(1.05, 1.05);
}
60% {
transform-origin: center;
transform: scale(1.06, 1.06);
}
50% {
transform-origin: center;
transform: scale(1.07, 1.07);
}
40% {
transform-origin: center;
transform: scale(1.08, 1.08);
}
30% {
transform-origin: center;
transform: scale(1.09, 1.09);
}
20% {
transform-origin: center;
transform: scale(1.10, 1.10);
}
10% {
transform-origin: center;
transform: scale(1.11, 1.11);
}
0% {
transform-origin: center;
transform: scale(1.0, 1.0);
}
}
</style>
<div id="box">
<div id="img">
<img src="https://img-blog.csdnimg.cn/fa9f9db4cbfd43d49d6246b1ffd4f5f7.png" title="love" alt="爱你的boby">
</div>
</div>
</body>
</html>
