西椅子胡同 发表于 2021-8-18 15:49

风光锦绣

自2022年起，因图片音乐链接中断致使音画不显图。下面是用电脑本地文件转换的视频：<br><br><video autoplay controls="" loop="" src="http://url.amp3a.com/youku.php/XNTg0NTE5NTQwOA==.mp4" width=506 height=900></video><br>

195400 发表于 2021-8-18 18:28

http://www.yinhuabbs.cn/data/attachment/forum/202010/12/172524vwyfy603w3z01f6x.gifhttp://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif

寒冬残荷 发表于 2021-8-18 23:28

太神奇了！欣赏，点赞！高手呀！几个元素我见都没见过。

寒冬残荷 发表于 2021-8-18 23:30

这才是真正的html代码动画！我开始以为是摄影呢！

195400 发表于 2021-8-19 06:10

<style type="text/css">
        #outblk        {
                width:800px;height:1000px;overflow:hidden;position:relative;border:thick grey solid;
        }
       
        #pic0{
                width:1800px;height:1200px;opacity:0;position:absolute;top:0px;left:0px;
                animation: animateP0 20s linear infinite;
        }
        #pic1{
                width:800px;height:1000px;opacity:0;position:absolute;top:0px;left:0px;
                animation: animateP1 20s linear infinite;
        }
       
        /*定义一个动画*/
        @keyframes animateP0 {
                0% {opacity:0.2;}
                11%{opacity:1;left:0px; }
                40%,50%{opacity:1;left:-1000px;}
                90%{opacity:1;left:0px;}
                95%,100%{opacity:0.3;}
        }
        @keyframes animateP1 {
                0%,5% {opacity:0;}
                11%,90%{opacity:1; }
                90%,100%{opacity:0.1;}
        }

</style>
<div id="outblk">
<img id="pic0" src="https://ss2.meipian.me/users/60902957/36aaed10-fe12-11eb-9c99-d1cbadc72298.jpg" >
<img id="pic1" src="https://ss2.meipian.me/users/60902957/c5a70dc0-fe15-11eb-9f65-7b83652a9ce2.png" >
</div>

西椅子胡同 发表于 2021-8-19 06:59

195400 发表于 2021-8-18 18:28


谢谢您鼓励和帮助！看您的每个帖子每个回复都能开拓思路学到新的知识，谢谢您！

195400 发表于 2021-8-19 07:36




http://www.yinhuabbs.cn/data/attachment/forum/202010/14/093757ihuxknqqhqusrhkn.jpghttp://www.yinhuabbs.cn/data/attachment/forum/202101/05/080000ceeug75jpzjg3k2p.gif



西椅子胡同 发表于 2021-8-19 07:42

寒冬残荷 发表于 2021-8-18 23:28
太神奇了！欣赏，点赞！高手呀！几个元素我见都没见过。
问您好！这个音画是用SVG代码组织的，我也是刚接触SVG不久。自己试着在音画中用它的几个标签编写代码组织图片，觉得能够在一定程度上达到以前Time+html代码的效果，但这种代码音画不能在兼容模式观看，且字符量较大，不如CSS和JavaSpript简捷。

西椅子胡同 发表于 2021-8-19 07:55

谢谢195400、寒冬残荷二位老师！早上好！

寒冬残荷 发表于 2021-8-19 10:25


<style>
.svg1{ fill:none; stroke-dasharray:1300; stroke-width: 2px;}
#svg_2{}
#svg_1{stroke-width: 12px; stroke: #ff00ff; stroke-dasharray:5,5; opacity:0; animation: textChange 2s ease-out infinite forwards;}
#svg_3{ stroke-width: 5px; stroke:#ff7700; stroke-dashoffset:1; animation: lineMove 2s ease infinite forwards; }
#svg_4{stroke-width: 2px; stroke:#000; animation: lineMove2 2s ease-out 0.5s infinite forwards; opacity:0; }
@keyframes lineMove {0%{stroke-dasharray: 0,5;}100%{stroke-dasharray:5,10;} }
@keyframes lineMove2 {0%{opacity:0;stroke-dasharray: 0, 1300;}100%{opacity:1;stroke-dasharray:1300, 2600;} }
@keyframes textChange {0%{opacity:0;stroke-opacity: 0;}100%{opacity:1;stroke-opacity: 1;} }
</style>


<div class="svg1">
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<ellipse ry="190" rx="123" id="svg_1" cy="193.289165" cx="288.5"></ellipse>
<ellipse ry="101" rx="183" id="svg_3" cy="193.289165" cx="288.5"></ellipse>
<ellipse ry="69" rx="154" id="svg_4" cy="197.289165" cx="288.5"></ellipse>
<text stroke="#000" transform="matrix(3.248901844024658,0,0,3.248901844024658,-502.6295621395111,-236.1346936225891) " xml:space="preserve" text-anchor="start" font-family="楷体" font-size="20" id="svg_2" y="140.016449" x="200.157134" stroke-width="0" fill="#d34141">欣赏学习</text>
</g>
</svg>
</div>
页: [1] 2 3
查看完整版本: 风光锦绣