论坛 › 动画音画 › 这个播放按钮如何？

也曾年轻 发表于 2026-6-16 09:07

这个播放按钮如何？

本帖最后由 也曾年轻 于 2026-6-16 09:11 编辑 <br /><br /><style>
#outBlk {
    width:960px;
    height: 540px;
    position: relative;
    margin:40px auto 32px calc(50% - 561px);
    /* 蚊香盘样式 */
    #mSVG {
      width: 100px;
                        position:absolute; right:5px;top:5px;
                        cursor: pointer;
      #svg_1 {
      stroke: url(#grd);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 5 3;
      SSSstroke-dashoffset: 0;
      opacity: .65;
      animation: aMove ease-in-out 8s infinite alternate;
      z-index:1;
      }
    }
#vid {position: absolute;left: 0px; top:0px; object-fit:cover; width:100%`; z-index:0}
}

</style>
<div id="outBlk">
    <video src="https://img2.tukuppt.com/video_show/15653652/00/52/86/606d059e977a0.mp4" loop autoplay id="vid"></video>
<svg id="mSVG" viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grd">
      <stop offset="0" stop-color="red" />
      <stop offset="0.5" stop-color="green" />
      <stop offset="1" stop-color="Violet" />
      </linearGradient>
    </defs>
    </defs>
<path id="svg_1" d="m13.29231,31.39753c0.00207,-0.82452 0.70735,-5.87986 1.56786,-11.23413c2.6832,-16.69562 2.72267,-16.7693 6.12941,-11.44803l2.01557,3.14829l5.89451,-3.11382c7.79659,-4.11858 17.09974,-5.64218 25.6515,-4.20097c3.63013,0.61181 7.48196,1.6062 8.55964,2.20975c2.13961,1.19826 2.00246,2.22731 -1.40768,10.56178c-1.86902,4.56798 -2.04842,4.69817 -5.27694,3.82968c-5.49505,-1.47812 -14.44257,-1.01255 -18.76247,0.9763l-4.05033,1.8648l2.84303,3.10537c1.56367,1.708 2.44948,3.35995 1.96847,3.67103c-0.48102,0.31109 -6.33338,0.91742 -13.00523,1.34734c-10.01003,0.64508 -12.13007,0.51971 -12.12735,-0.71737l0,0zm51.54381,46.03324l-4.33626,-6.01018l3.94819,-3.99526c4.06359,-4.11198 6.99431,-9.88515 8.28546,-16.32148l0.73682,-3.67295l-4.24973,0.7111c-2.33736,0.39116 -4.26412,0.34033 -4.28169,-0.1129c-0.08207,-2.116 11.03084,-22.97503 12.11102,-22.73254c1.69843,0.38127 18.93004,15.99931 18.93004,17.15736c0,0.51687 -1.81098,1.24282 -4.02437,1.6132l-4.02438,0.6734l-0.39719,7.1815c-0.50943,9.21056 -5.14736,19.8408 -11.60464,26.59813c-2.58627,2.70648 -5.16463,4.92085 -5.72966,4.92085c-0.56505,0 -2.97867,-2.70463 -5.36361,-6.01024l0,0zm-39.14347,16.84608c0,-0.66455 0.68125,-2.58686 1.51389,-4.27182c1.51067,-3.05705 1.50192,-3.07189 -4.12995,-6.98502c-8.81149,-6.12235 -15.36107,-16.98915 -17.42121,-28.9046l-0.6754,-3.9064l4.8156,-0.6907c9.9268,-1.42385 10.01745,-1.38081 12.00554,5.69929c1.34156,4.77765 2.99156,7.6408 6.54837,11.36287c2.61519,2.73672 5.12029,4.7395 5.5669,4.45066c0.44659,-0.28883 1.093,-1.99551 1.43647,-3.79264c0.34347,-1.79713 1.05967,-3.26752 1.59155,-3.26752c1.22115,0 12.72065,18.97422 12.90321,21.29033c0.12192,1.54691 -6.0944,4.22526 -22.29509,9.60608c-1.03303,0.3431 -1.85988,0.08061 -1.85988,-0.59055l0,0z">
                        <animateattributename="stroke-dashoffset" from='0' to='-180' begin="0" dur='8' repeatCount="indefinite"/>
                        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="-360 50 50" dur="4s" repeatCount="indefinite" />
                        <animate attributeName="fill" values="Red;Orange;Yellow;Green;cyan;Indigo;Violet" dur="8s" repeatCount="indefinite" />               
                </path>
        </svg>
</div>
<script>
    mSVG.onclick = () => {
      vid.paused ? (vid.play(),mSVG.unpauseAnimations()) : (vid.pause(),mSVG.pauseAnimations());
    }
</script>

梦江南 发表于 2026-6-16 09:58

本帖最后由 梦江南 于 2026-6-16 09:59 编辑

https://qny.smzdm.com/202004/10/5e90018f328bf5215.gif_e600.jpg{:4_174:}https://qny.smzdm.com/202004/10/5e90018f328bf5215.gif_e600.jpg

梦江南 发表于 2026-6-16 10:00

不知啥原因，收藏的沙发转不出来。

也曾年轻 发表于 2026-6-16 10:09

梦江南 发表于 2026-6-16 09:58


太舒服了，搬了两大一小来{:5_106:}

梦江南 发表于 2026-6-16 10:10

也曾年轻 发表于 2026-6-16 10:09
太舒服了，搬了两大一小来

大的没转出来，只好用小了。

也曾年轻 发表于 2026-6-16 10:10

这按钮上加了三种动态

上午好！ 谢谢欣赏支持！

梦江南 发表于 2026-6-16 10:12

也曾年轻 发表于 2026-6-16 10:09
太舒服了，搬了两大一小来

这个按钮挺好看的。

也曾年轻 发表于 2026-6-16 10:17

梦江南 发表于 2026-6-16 10:10
大的没转出来，只好用小了。

https://image.baidu.com/search/index?tn=baiduimage&fm=result&ie=utf-8&word=%E6%B2%99%E5%8F%91%20%E5%8A%A8%E5%9B%BE

在这找一个满意的

霜染枫丹 发表于 2026-6-16 15:09

特别漂亮的小播，色彩的变化添加了美感，看着就觉得赏心悦目！！{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-16 15:36

霜染枫丹 发表于 2026-6-16 15:09
特别漂亮的小播，色彩的变化添加了美感，看着就觉得赏心悦目！！

下午好！ 谢谢欣赏支持!

给元素加入了新的动态

也曾年轻 发表于 2026-6-16 16:10

<style>
#mySVG {
        width:400px;
    g {
      stroke: url(#gradColor);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 5 3;
      SSSstroke-dashoffset: 0;
      opacity: .65;
    }
}
</style>
<svg id='mySVG' viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
    <linearGradient id="gradColor">
      <stop offset="0" stop-color="red" />
      <stop offset="0.5" stop-color="green" />
      <stop offset="1" stop-color="Violet" />
    </linearGradient>
</defs>
<g>
    <path id="svg_2" d="m31.23903,93.38821c6.19882,-5.66378 10.73165,-12.83603 14.52976,-20.10328c2.32018,-2.89852 0.12354,-5.43428 -3.03667,-2.97638c-8.12172,5.13427 -19.17725,6.89496 -27.97069,2.21084c-9.94065,-4.86688 -14.42336,-16.43981 -12.16791,-26.52377c1.42835,-10.21921 9.28397,-18.22944 17.8133,-23.98341c9.79782,-6.63611 20.37824,-12.33292 29.33288,-20.01724c3.73895,0.07097 6.55285,5.62614 10.57678,7.09616c10.68461,7.53496 23.34685,13.0813 31.76067,23.15694c4.25081,5.7412 6.67353,12.81079 6.944,19.79917c-1.29513,9.47677 -7.2634,19.47123 -17.55573,22.17002c-8.8974,2.5489 -18.05148,-0.68363 -25.80495,-4.79611c-0.94706,-0.19244 -4.42074,-2.78356 -3.04402,-0.76987c4.63527,9.00633 9.71397,17.94941 17.06922,25.26204c0.43232,0.92396 3.82288,3.11607 2.01842,3.08124c-15.10248,0 -30.20491,0 -45.30739,0c1.61407,-1.20211 3.22821,-2.40425 4.84234,-3.60636l0,0z">
      <animate attributeName="fill" values="Red;orange;yellow;green;cyan;blue;purple" dur="8s" begin="0" repeatCount="indefinite" />
      <animate attributename="stroke-dashoffset" from='0' to='-180' begin="0" dur='8' repeatCount="indefinite" />
    </path>
    <path id="svg_4" d="m137.48089,85.93355c-24.25741,-22.37474 -32.9304,-36.5286 -33.00069,-53.85548c-0.0641,-15.79558 10.64226,-31.04063 21.73751,-30.95272c5.54047,0.04399 17.42515,5.85763 21.63355,10.58266c2.12044,2.38074 3.12478,2.14598 7.84572,-1.83394c12.8484,-10.83163 25.39498,-11.05898 33.52071,-0.60737c12.98663,16.70388 10.62227,36.65136 -6.79673,57.34228c-9.26094,11.0005 -29.48481,30.51599 -31.62364,30.51599c-0.65082,0 -6.64321,-5.03615 -13.31643,-11.19143l0,0z">
      <animate attributeName="fill" values="Red;orange;yellow;green;cyan;blue;purple" dur="8s" begin="2" repeatCount="indefinite" />
      <animate attributename="stroke-dashoffset" from='0' to='-180' begin="0" dur='8' repeatCount="indefinite" />
    </path>
    <path id="svg_5" d="m38.31086,191.09489c5.78428,-5.03518 10.69327,-11.03234 12.76673,-17.84143c-6.20066,3.92981 -11.88759,10.25068 -20.53719,10.01122c-6.52991,0.31242 -14.30852,0.31771 -18.90504,-4.23498c-10.27193,-6.88575 -13.03126,-20.64812 -4.5964,-29.41119c5.77215,-6.32728 15.85158,-9.01022 25.10159,-8.0612c5.82823,-2.06152 -1.13994,-7.28147 -1.8407,-10.53927c-4.33776,-11.81727 5.88126,-25.99187 20.90752,-27.35319c10.77769,-1.28985 21.31377,4.52632 26.58745,12.07447c2.86588,5.28158 1.37265,11.2758 0.70402,16.75508c-2.2516,2.75354 -8.01824,9.41507 0.21095,8.89036c8.1363,-0.10734 16.72834,1.88388 22.09349,7.27751c7.8475,7.26412 8.56734,19.26815 0.67194,26.69074c-4.17642,4.52106 -10.44352,8.13952 -17.53675,7.93807c-6.94261,0.58426 -14.46042,-0.6713 -19.38352,-5.0811c-2.09971,-1.22653 -7.2447,-5.86063 -7.24293,-4.84436c5.14256,8.93102 10.95766,18.20578 21.24511,23.74008c3.67562,2.46371 -5.59854,0.76988 -7.84365,1.27202c-13.60279,0.01002 -27.20552,0.02024 -40.80831,0.03031c2.80187,-2.43774 5.60392,-4.87538 8.40568,-7.31313l0,-0.00001z">
      <animate attributeName="fill" values="Red;orange;yellow;green;cyan;blue;purple" dur="8s" begin="4" repeatCount="indefinite" />
      <animate attributename="stroke-dashoffset" from='0' to='-180' begin="0" dur='8' repeatCount="indefinite" />
    </path>
    <path id="svg_7" d="m197.46437,152.48437c-9.60327,-17.58327 -26.91745,-32.5906 -41.64705,-47.48436c-17.13475,9.55787 -31.93821,30.58502 -44.81732,45.22997c11.4873,16.93949 28.02305,32.36673 42.91958,47.55846c16.05873,-13.89901 29.79155,-29.7789 43.54478,-45.30407l0,0z">
      <animate attributeName="fill" values="Red;orange;yellow;green;cyan;blue;purple" dur="8s" begin="6" repeatCount="indefinite" />
      <animate attributename="stroke-dashoffset" from='0' to='-180' begin="0" dur='8' repeatCount="indefinite" />
    </path </g>
</svg>

红影 发表于 2026-6-16 18:28

形态和色彩都很美，这个小播很好啊{:4_187:}

也曾年轻 发表于 2026-6-16 18:39

红影 发表于 2026-6-16 18:28
形态和色彩都很美，这个小播很好啊

谢谢欣赏支持！

练手玩{:5_106:}

霜染枫丹 发表于 2026-6-16 19:44

也曾年轻 发表于 2026-6-16 16:10
#mySVG {
        width:400px;
    g {


很漂亮的~~我都收藏起来，流光溢彩的边框很精致！谢谢也曾年轻，我把他们都做成GIF图片，用起来更方便{:4_199:}{:4_204:}{:4_178:}{:4_187:}

也曾年轻 发表于 2026-6-16 20:02

霜染枫丹 发表于 2026-6-16 19:44
很漂亮的~~我都收藏起来，流光溢彩的边框很精致！谢谢也曾年轻，我把他们都做成GIF图片，用起来更方便{:4 ...

或许网上能找到类似的 gif 图片

霜染枫丹 发表于 2026-6-16 20:07

也曾年轻 发表于 2026-6-16 20:02
或许网上能找到类似的 gif 图片

能找到，找起来反到费时间，很多需要注册才能打开，我都是随手看到合适的就留下来，自己做省事{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-16 20:08

也曾年轻 发表于 2026-6-16 20:02
或许网上能找到类似的 gif 图片

现在有AI就可以提要求做一幅，{:4_190:}

也曾年轻 发表于 2026-6-16 21:45

霜染枫丹 发表于 2026-6-16 20:07
能找到，找起来反到费时间，很多需要注册才能打开，我都是随手看到合适的就留下来，自己做省事{ ...

只会找现成的， 找不到就干瞪眼。

也曾年轻 发表于 2026-6-16 21:46

霜染枫丹 发表于 2026-6-16 20:08
现在有AI就可以提要求做一幅，

脑子僵化了， 不想学也学不会{:5_102:}

霜染枫丹 发表于 2026-6-16 21:49

也曾年轻 发表于 2026-6-16 21:45
只会找现成的， 找不到就干瞪眼。

在绘声绘影，ps中和ppt中能导出来JIF图片，比线上转换快

查看完整版本: 这个播放按钮如何？