情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）
生活随笔
收集整理的這篇文章主要介紹了
情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最終效果：
這個背景圖片
圖片地址：【https://img-blog.csdnimg.cn/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://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>?
總結
以上是生活随笔為你收集整理的情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C盘不够用了怎么办，看我4年未重做系统如
- 下一篇： 题目： javaweb前端素材管理系统(