马黑黑 发表于 2022-1-26 14:03

春风十里

本帖最后由 马黑黑 于 2022-1-26 14:06 编辑 <br /><br /><style>
.mnDiv {
        width: 1280px;
        height: 816px;
        position: relative;
        left: -345px;
        background: #444 url('/data/attachment/forum/202201/26/135825hfxsfnubswjuusrp.jpg') no-repeat;
        position: relative;
        opacity: 0.8;
}
.mnDiv iframe {
        position: absolute;
        left: 10px;
        top: 720px;
        width: 330px;
        height: 86px;
        clip-path: circle(33px at 43px 43px);
        shadow: 1px 1px 2px 1px #eee;
        opacity: 0.85;
}
.mnDiv img {
        position: absolute;
        left: 640px;
        top: 300px;
        width: 640px;
        height: 420px;
        opacity: 0.1;
        transform-origin: 20% 100%;
        animation: bai 5s ease infinite alternate;
}

@keyframes bai {
        100% { transform: rotate(-45deg); }
}
</style>

<div class="mnDiv">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=38576323&auto=1&height=66"></iframe>
        <img src="/data/attachment/forum/202201/26/135826cu512s95221507e9.jpg" alt="" />
</div>

红影 发表于 2022-1-26 14:43

又是新效果啊，背景透明制作。感觉有3层图图? 文字的那张也是图图吧？

红影 发表于 2022-1-26 14:50

看了一下代码，就两张图图，真的好奇怪，明显感觉花朵在女孩前面和在文字后面。
这个是网易云播放器剪切的实例吧。真漂亮的制作{:4_187:}

马黑黑 发表于 2022-1-26 16:18

红影 发表于 2022-1-26 14:43
又是新效果啊，背景透明制作。感觉有3层图图? 文字的那张也是图图吧？

背景图自然地效果，原图在这里：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=56347&pid=1430485&fromuid=7130

马黑黑 发表于 2022-1-26 16:21

红影 发表于 2022-1-26 14:50
看了一下代码，就两张图图，真的好奇怪，明显感觉花朵在女孩前面和在文字后面。
这个是网易云播放器剪切的 ...

花朵背景不透明，否则效果更好。这里，效果与图片自身有极大关系，我只是给相应几个元素加了opacity修饰。网易播放器的裁剪还可以把圆形x轴再右移一点点

加林森 发表于 2022-1-26 17:14

好美的制作，老黑真厉害。两张图片就搞定了。我得学习学习了。{:4_199:}

马黑黑 发表于 2022-1-26 17:47

加林森 发表于 2022-1-26 17:14
好美的制作，老黑真厉害。两张图片就搞定了。我得学习学习了。

嗯，简单的，你去试试

加林森 发表于 2022-1-26 18:23

马黑黑 发表于 2022-1-26 17:47
嗯，简单的，你去试试

好的好的

马黑黑 发表于 2022-1-26 19:14

加林森 发表于 2022-1-26 18:23
好的好的

{:5_108:}

加林森 发表于 2022-1-26 19:24

马黑黑 发表于 2022-1-26 19:14


{:4_191:}

马黑黑 发表于 2022-1-26 19:53

加林森 发表于 2022-1-26 19:24


{:4_190:}

加林森 发表于 2022-1-26 20:12

马黑黑 发表于 2022-1-26 19:53


谢茶

红影 发表于 2022-1-26 20:46

马黑黑 发表于 2022-1-26 16:18
背景图自然地效果，原图在这里：

https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost ...

那张玫瑰还是不透明的，在这里倒是看不出的。

红影 发表于 2022-1-26 20:52

马黑黑 发表于 2022-1-26 16:21
花朵背景不透明，否则效果更好。这里，效果与图片自身有极大关系，我只是给相应几个元素加了opacity修饰 ...

奇怪，那朵花怎么看怎么像在文字后面，太神奇了。花朵直接扣个图，就透明了啊。{:4_173:}

马黑黑 发表于 2022-1-26 20:55

红影 发表于 2022-1-26 20:52
奇怪，那朵花怎么看怎么像在文字后面，太神奇了。花朵直接扣个图，就透明了啊。

我没安装PS

马黑黑 发表于 2022-1-26 20:56

红影 发表于 2022-1-26 20:46
那张玫瑰还是不透明的，在这里倒是看不出的。

我对图片用了 opacity 处理了，应该是 0.2 的值

马黑黑 发表于 2022-1-26 20:56

红影 发表于 2022-1-26 20:52
奇怪，那朵花怎么看怎么像在文字后面，太神奇了。花朵直接扣个图，就透明了啊。

这是颜色造成的效果，我也没想到的

马黑黑 发表于 2022-1-26 21:04

加林森 发表于 2022-1-26 20:12
谢茶

好喝多喝

红影 发表于 2022-1-26 21:11

马黑黑 发表于 2022-1-26 20:55
我没安装PS

我也不会那个，我就美图用用就足够了{:4_173:}

马黑黑 发表于 2022-1-26 21:11

红影 发表于 2022-1-26 21:11
我也不会那个，我就美图用用就足够了

美图是个软件吗
页: [1] 2 3 4 5
查看完整版本: 春风十里