情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）
【摘要】 最终效果：这个背景图片图片地址：【https://img-blog.csdnimg.cn/9a49d83642d941b0b17674ae9b4c0914.png】 组合效果：完整编码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib...
最终效果：
这个背景图片
图片地址：【】
组合效果：
完整编码：
<!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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）