最终效果：
这个背景图片
图片地址：【https://ucc.alicdn.com/images/user-upload-01/9a49d83642d941b0b17674ae9b4c0914.png】
组合效果：
完整编码：
<!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://ucc.alicdn.com/images/user-upload-01/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://ucc.alicdn.com/images/user-upload-01/fa9f9db4cbfd43d49d6246b1ffd4f5f7.png" title="love" alt="爱你的boby"> </div> </div> </body> </html>
