【习作】追逐梦想，奋勇前行
本帖最后由 相约爱晚亭 于 2022-10-7 20:52 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1736995">
<style>
#beijing { left: -302px; width: 1200px; height: 662px; overflow: hidden; user-select: none; position: relative; }
#shipin { position: absolute; width: 100%; height: 100%; top:0px;object-fit: cover; }
#biankuang { position: absolute;width: 100%; height: 100%; top:0px; left:0px; mix-blend-mode: screen;}
#tupian { position: absolute; top: 0px; left:0px; width: 320px; height: 120px; background: transparent url('.png') no-repeat; }
#tupian::after { content:""; background-image: inherit; width: 100%; height:100%; position: absolute; top:0px; left:870px; transform:scaleX(-1); }
#bian { position: absolute; top: 0px; left:0px; width: 1200px; height: 61px; background: transparent url('.jpg') no-repeat; opacity: 0.90; }
.wenzi { position: absolute; top: 0px; left:260px; z-index: 10; }
.text {animation: stroke 5s infinite alternate;letter-spacing: 10px;font-size: 66px;}
@keyframes stroke {
0% {fill: rgba(72, 138, 20, 0);stroke: rgba(220,20,60, 1);stroke-dashoffset: 25%;stroke-dasharray: 0 50%;stroke-width: 1;}
70% {fill: rgba(72, 138, 20, 0);stroke: rgba(220,20,60, 1);stroke-width: 3;}
90%,100% {fill: rgba(178,34,34, 0.8);stroke: rgba(220,20,60, 0);stroke-dashoffset: -25%;stroke-dasharray: 50% 0;stroke-width: 0;}}
</style>
<div id="beijing">
<video id="shipin" src="https://video.699pic.com/videos/33/16/19/b_zudVXP8iP8YG1638331619.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
<div id="bian"></div>
<img id="biankuang" src="https://pic1.imgdb.cn/item/633be06b16f2c2beb1b87845.gif" alt="" />
<div id="tupian"></div>
<div class="wenzi text"><svg width="700" height="80"><g><text x="10" y="70" font-family="楷体"> 追逐梦想 奋勇前行</text></g>
</svg></div>
<div style="position: relative; width: 800px; top:500px; left: 650px;font-family:楷体;font-size: 28px;font-weight:bold;color:#ccfff2;">相约爱晚亭2022.10.05</div>
</div></td></tr></table>
<br><br><br><br>
谢谢红影转载《云窟万象》分享源码。 相约爱晚亭 发表于 2022-10-5 14:49
谢谢红影转载《云窟万象》分享源码。
相约爱晚亭很棒~~~
一起学习制作就很好，不要像有些人直接偷别人制作好的复制粘贴去别的论坛发了，别人以为他自己制作的 相约爱晚亭 发表于 2022-10-5 14:49
谢谢红影转载《云窟万象》分享源码。
你可以把#bian，#tupian 等等的几句删掉，我是因为上面有太多图标，想遮挡用的{:4_173:} 这个边框用滤镜后边半透明了，原来的logo等都挡不掉，我是没办法才多加那么多零碎{:4_173:} 小辣椒 发表于 2022-10-5 16:06
相约爱晚亭很棒~~~
一起学习制作就很好，不要像有些人直接偷别人制作好的复制粘贴去别的论坛发了，别 ...
套用代码，应尊重原创！谢谢临帖评点，支持鼓励！ 红影 发表于 2022-10-5 16:33
这个边框用滤镜后边半透明了，原来的logo等都挡不掉，我是没办法才多加那么多零碎
搂空边框很新颖，了解帖子结构，可以自己学着做。 红影 发表于 2022-10-5 16:33
这个边框用滤镜后边半透明了，原来的logo等都挡不掉，我是没办法才多加那么多零碎
原来不是转载而是经过加工后的帖子，很了不起。 相约爱晚亭 发表于 2022-10-5 16:42
套用代码，应尊重原创！谢谢临帖评点，支持鼓励！
不客气，祝玩得开心~~~{:4_187:} 相约爱晚亭 发表于 2022-10-5 16:47
搂空边框很新颖，了解帖子结构，可以自己学着做。
那个边框不是镂空的，是加了滤镜让后面的视屏显示出来的。 相约爱晚亭 发表于 2022-10-5 16:50
原来不是转载而是经过加工后的帖子，很了不起。
我不转载的，都是网上找了素材自己做的。自己做才能学到东西啊。 红影 发表于 2022-10-6 06:55
那个边框不是镂空的，是加了滤镜让后面的视屏显示出来的。
什么滤镜有这样的功效？边框是个动图，背景是什么颜色？ 红影 发表于 2022-10-6 06:56
我不转载的，都是网上找了素材自己做的。自己做才能学到东西啊。
真棒！我也不转载他人作品！好作品可收藏。 相约爱晚亭 发表于 2022-10-6 11:02
什么滤镜有这样的功效？边框是个动图，背景是什么颜色？
我去找一下地址。那个边框是这样的https://pic1.imgdb.cn/item/633be06b16f2c2beb1b87845.gif 相约爱晚亭 发表于 2022-10-6 11:02
什么滤镜有这样的功效？边框是个动图，背景是什么颜色？
你看，边框完全不透明的，用mix-blend-mode: screen; 就能让黑色隐形了，黑黑在
CSS：多背景图片叠加
https://www.huachaowang.com/forum.php?mod=viewthread&tid=63578&fromuid=2
(出处: 花潮论坛)
这个帖子里讲过的，我正好找到的是不透明的边框，就试验了一下。 相约爱晚亭 发表于 2022-10-6 11:05
真棒！我也不转载他人作品！好作品可收藏。
转载而不说明是转的，这样很不好。 红影 发表于 2022-10-6 20:54
你看，边框完全不透明的，用mix-blend-mode: screen; 就能让黑色隐形了，黑黑在
CSS：多背景图片叠加
h ...
影子懂得真多，点赞！滤去黑背景，明白了。想要真正弄懂会应用，还需多下功夫才成。谢谢！ 学到新知识了！CSS的这个mix-blend-mode: screen;属性我从没接触过呢，早上进来看，以为边框图片的中间是透明的，但觉得奇怪，中间透明为什么边框上有视频内容？晚上有时间开电脑又进来看，查看源代码，发现边框图中间不是透明的，感觉奇怪，不透明那为什么图片遮盖在上面还能看到视频？认真阅读代码，发现只有这个mix-blend-mode: screen;我不认识，上网搜索后便明白了。
谢谢楼主的分享，学到新的东西好开心！ 相约爱晚亭 发表于 2022-10-6 21:10
影子懂得真多，点赞！滤去黑背景，明白了。想要真正弄懂会应用，还需多下功夫才成。谢谢！
我不懂啊，之前一点都不会，只是跟在黑黑后头学习的{:4_173:}
<style>
#beijing1 {left:-300px; width:1200px; height:662px; overflow:hidden; user-select:none; position:relative; z-index:0; background-size:cover; background-image:url(https://pic1.imgdb.cn/item/633be06b16f2c2beb1b87845.gif);}
#shipin1 {width:975px; height: 490px; margin-top:110px; margin-left:116px; overflow:hidden; border:0px #FF4A20 solid;}
.wenzi1 { position: absolute; top: 0px; left:260px; z-index: 10; }
.text1 {animation: stroke 5s infinite alternate;letter-spacing: 10px;font-size: 66px;font-weight : 900;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0)drop-shadow(#ffffff 0 -1px 0);}
@keyframes stroke {
0% {fill: rgba(72, 138, 20, 0);stroke: rgba(220,20,60, 1);stroke-dashoffset: 25%;stroke-dasharray: 0 50%;stroke-width: 1;}
70% {fill: rgba(72, 138, 20, 0);stroke: rgba(220,20,60, 1);stroke-width: 3;}
90%,100% {fill: rgba(178,34,34, 0.8);stroke: rgba(220,20,60, 0);stroke-dashoffset: -25%;stroke-dasharray: 50% 0;stroke-width: 0;}}
</style>
<div id="beijing1">
<div id="shipin1" >
<video src="https://video.699pic.com/videos/33/16/19/b_zudVXP8iP8YG1638331619.mp4" controls="controls" loop="loop" autoplay="autoplay" muted="true" style="width:1100px; height:662px; margin-top:-53px; margin-left:-53px; "></video>
</div>
<div class="wenzi1 text1">
<svg width="700" height="80">
<g><text x="10" y="70" font-family="楷体"> 追逐梦想 奋勇前行</text></g>
</svg>
</div>
<div style="position: absolute;width: 800px; top:550px; left: 650px;font-family:楷体;font-size: 28px;font-weight:bold;color:#ccfff2;">相约爱晚亭2022.10.05</div>
</div>
页:
[1]
2