风雾菩提（背景图透明设置学习）
<style type="text/css">.hy { width: 1200px; height: 675px; position: relative;left:-280px; top: 150px;box-shadow:4px 4px 5px #333; padding:2px;border-radius:8px;background:#666}
.hy img { cursor: pointer; opacity: .7; }
.frame { position: absolute; left: 560px; top: 450px; display: none;padding:2px;border-radius:8px;background:#3F0534;}
.hy:hover .frame { display: block; }
.hy span {
position: absolute;
display: inline-block;
width: 3px;
height: 3px;
background: white;
opacity: 0.4;
transform: rotate(45deg);
animation: splash var(--k) infinite;
}
.hy span:nth-child(1){ left:20%; top:35%; --k: 9s; width:4px; height: 4px; }
.hy span:nth-child(2){ left:25%; top:40%; --k: 3s; }
.hy span:nth-child(3){ left:40%; top:18%; --k: 2s; }
.hy span:nth-child(4){ left:50%; top:17%; --k: 5s; }
.hy span:nth-child(5){ left:58%; top:10%; --k: 1s; }
.hy span:nth-child(6){ left:66%; top:5%; --k: 0.5s; }
.hy span:nth-child(7){ left:75%; top:30%; --k: 7s; }
.hy span:nth-child(8){ left:80%; top:20%; --k: 4s; }
.hy span:nth-child(9){ left:87%; top:16%; --k: 4.5s; }
.hy span:nth-child(10){ left:67%; top:23%; --k: 7.5s; }
@keyframes splash {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.8; transform:scale(1.5) rotate(-45deg); }
}
</style>
<p style="text-align:center;">
<div class="hy">
<img src="http://image.hnol.net/c/2022-01/23/11/202201231109394241-5088534.gif" alt=""/>
</p>
<iframe class="frame" style="opacity: 0.3;" frameborder="no" border="0" marginwidth="0" marginheight="0"
width=86 height=86
src="https://music.163.com/outchain/player?type=2&id=38673087&auto=1&height=66"></iframe>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<p><br><br><br><br><br><br><br><br> </p> 抓了几颗小星星来，不过好像逃掉不少。学习一下{:4_173:} 网易云的边没法改掉呢。
把<p><br><br> </p>加上去，果然可以高度下来 了。
还有就是怎样去掉网易云的那个边，光留待图片和播放按钮的那个方形@马黑黑 {:4_173:} 红影 发表于 2022-1-23 15:25
还有就是怎样去掉网易云的那个边，光留待图片和播放按钮的那个方形@马黑黑
对网易云播放器进行 clip-path 裁剪吧，你现在是正方形的，刚好用 circle(55%) 保留按钮。也可以用 border-radius 直接操作 iframe ，用 style="" 应该可以 马黑黑 发表于 2022-1-23 17:12
对网易云播放器进行 clip-path 裁剪吧，你现在是正方形的，刚好用 circle(55%) 保留按钮。也可以用 borde ...
这个不是裁成圆的么，我不知道怎样把方的边裁掉一点啊。 红影 发表于 2022-1-23 21:11
这个不是裁成圆的么，我不知道怎样把方的边裁掉一点啊。
裁剪成园的方的不是基本去掉了么 马黑黑 发表于 2022-1-23 21:42
裁剪成园的方的不是基本去掉了么
55%弄上去貌似菱形了{:4_189:} 红影 发表于 2022-1-23 23:13
55%弄上去貌似菱形了
差不多就好
马黑黑 发表于 2022-1-23 23:36
差不多就好
嗯，空了我去试试改变一下数值，看看会有什么效果。 红影 发表于 2022-1-24 11:16
嗯，空了我去试试改变一下数值，看看会有什么效果。
现在可以用 clip-path 修饰它了吧 马黑黑 发表于 2022-1-27 23:02
现在可以用 clip-path 修饰它了吧
哈哈，到家的时候就忘记了，到单位了又看不到网易云，不知道裁剪后按钮能不能用{:4_173:} 马黑黑 发表于 2022-1-27 23:02
现在可以用 clip-path 修饰它了吧
这个除了加小星星，是不是也能把那个闪光棒也加这里？ 红影 发表于 2022-1-28 11:04
这个除了加小星星，是不是也能把那个闪光棒也加这里？
完全可以 红影 发表于 2022-1-28 11:03
哈哈，到家的时候就忘记了，到单位了又看不到网易云，不知道裁剪后按钮能不能用
应该没多大问题 马黑黑 发表于 2022-1-28 11:04
完全可以
不知道加到什么地方会比较好看。 马黑黑 发表于 2022-1-28 11:05
应该没多大问题
还是等回家后再试，至少能看到效果。 红影 发表于 2022-1-28 12:31
还是等回家后再试，至少能看到效果。
也好 红影 发表于 2022-1-28 12:31
不知道加到什么地方会比较好看。
这个要依据自己的审美了 马黑黑 发表于 2022-1-28 12:45
也好
只要回家能想起来这事{:4_170:}