图片切换新尝试
图片太少花样不多，仅只是个图片切换的初步尝试。现有圆、椭圆、矩形、六边形、菱形、五边形及棋盘格等几种方式。<br><script type="text/javascript">
document.write(unescape('1%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20%0AviewBox%3D%220%200%20960%20600%22%20%20style%3D%22overflow%3Ahidden%3Bborder-radius%3A10%25%3Bbackground%3Aurl%28https%3A//z3.ax1x.com/2021/09/29/4h10Sg.jpg%29%200%200%20/%20100%25%20100%25%3B%22%3E%0A%3Cdefs%3E%0A%20%20%3Cmask%20id%3D%22mask0%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22480%22%20cy%3D%22300%22%20r%3D%2210%22%20style%3D%22stroke%3A%23006600%3B%20fill%3A%23ffffff%22%3E%0A%09%09%3Canimate%20attributename%3D%22r%22%20from%3D%2710%27%20to%3D%27570%27%20begin%3D%22bpic0.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22r%22%20from%3D%27570%27%20to%3D%2710%27%20begin%3D%22epic0.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%3C/circle%3E%0A%20%20%3C/mask%3E%0A%20%20%3Cmask%20id%3D%22mask1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%3Cellipse%20cx%3D%22480%22%20cy%3D%22300%22%20rx%3D%2212%22%20ry%3D%227.5%22%20style%3D%22stroke%3A%23006600%3B%20fill%3A%23ffffff%22%3E%20%20%20%0A%09%09%3Canimate%20attributename%3D%22rx%22%20from%3D%2712%27%20to%3D%27640%27%20begin%3D%22bpic1.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22ry%22%20from%3D%277.5%27%20to%3D%27480%27%20begin%3D%22bpic1.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22rx%22%20from%3D%27640%27%20to%3D%2712%27%20begin%3D%22epic1.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22ry%22%20from%3D%27480%27%20to%3D%277.5%27%20begin%3D%22epic1.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%3C/ellipse%3E%0A%20%20%3C/mask%3E%0A%20%20%3Cmask%20id%3D%22mask2%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%3Crect%20x%3D%22468%22%20y%3D%22292.5%22%20width%3D%2212%22%20height%3D%227.5%22%20style%3D%22stroke%3A%23006600%3B%20fill%3A%23ffffff%22%3E%20%20%20%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%2712%27%20to%3D%27960%27%20begin%3D%22bpic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%277.5%27%20to%3D%27600%27%20begin%3D%22bpic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27468%27%20to%3D%270%27%20begin%3D%22bpic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27292.5%27%20to%3D%270%27%20begin%3D%22bpic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%270%27%20to%3D%27468%27%20begin%3D%22epic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%270%27%20to%3D%27292.5%27%20begin%3D%22epic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%27960%27%20to%3D%2712%27%20begin%3D%22epic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%27600%27%20to%3D%277.5%27%20begin%3D%22epic2.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%3C/rect%3E%0A%20%20%3C/mask%3E%0A%20%20%3Cmask%20id%3D%22mask3%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%3Crect%20x%3D%22468%22%20y%3D%22288%22%20width%3D%2212%22%20height%3D%2212%22%20%0A%09style%3D%22clip-path%3A%20polygon%2825%25%200%25%2C%2075%25%200%25%2C%20100%25%2050%25%2C%2075%25%20100%25%2C%2025%25%20100%25%2C%200%25%2050%25%29%3Bstroke%3A%23006600%3B%20fill%3A%23ffffff%22%3E%20%20%20%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%2712%27%20to%3D%271200%27%20begin%3D%22bpic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%2712%27%20to%3D%271200%27%20begin%3D%22bpic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27468%27%20to%3D%27-120%27%20begin%3D%22bpic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27288%27%20to%3D%27-300%27%20begin%3D%22bpic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27-120%27%20to%3D%27468%27%20begin%3D%22epic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27-300%27%20to%3D%27288%27%20begin%3D%22epic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%271200%27%20to%3D%2712%27%20begin%3D%22epic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%271200%27%20to%3D%2712%27%20begin%3D%22epic4.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%3C/rect%3E%0A%20%20%3C/mask%3E%0A%20%20%3Cmask%20id%3D%22mask5%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%3Crect%20x%3D%22468%22%20y%3D%22292.5%22%20width%3D%2212%22%20height%3D%227.5%22%20%0A%09style%3D%22clip-path%3A%20polygon%2850%25%200%25%2C%20100%25%2050%25%2C%2050%25%20100%25%2C%200%25%2050%25%29%3Bstroke%3A%23006600%3B%20fill%3A%23ffffff%22%3E%20%20%20%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%2712%27%20to%3D%271800%27%20begin%3D%22bpic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%277.5%27%20to%3D%271125%27%20begin%3D%22bpic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27468%27%20to%3D%27-420%27%20begin%3D%22bpic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27292.5%27%20to%3D%27-262.5%27%20begin%3D%22bpic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27-420%27%20to%3D%27468%27%20begin%3D%22epic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27-262.5%27%20to%3D%27292.5%27%20begin%3D%22epic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%271800%27%20to%3D%2712%27%20begin%3D%22epic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%271125%27%20to%3D%277.5%27%20begin%3D%22epic6.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%3C/rect%3E%0A%20%20%3C/mask%3E%0A%20%20%3Cmask%20id%3D%22mask4%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%3Crect%20x%3D%22468%22%20y%3D%22288%22%20width%3D%2212%22%20height%3D%2212%22%20%0A%09style%3D%22clip-path%3A%20polygon%2850%25%200%25%2C%20100%25%2038%25%2C%2082%25%20100%25%2C%2018%25%20100%25%2C%200%25%2038%25%29%3Bstroke%3A%23006600%3B%20fill%3A%23ffffff%22%3E%20%20%20%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%2712%27%20to%3D%271440%27%20begin%3D%22bpic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%2712%27%20to%3D%271440%27%20begin%3D%22bpic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27468%27%20to%3D%27-240%27%20begin%3D%22bpic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27288%27%20to%3D%27-420%27%20begin%3D%22bpic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%0A%09%09%3Canimate%20attributename%3D%22x%22%20from%3D%27-240%27%20to%3D%27468%27%20begin%3D%22epic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22y%22%20from%3D%27-420%27%20to%3D%27288%27%20begin%3D%22epic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%271440%27%20to%3D%2712%27%20begin%3D%22epic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%271440%27%20to%3D%2712%27%20begin%3D%22epic5.begin%22%20dur%3D%272%27%20fill%3D%22freeze%22%20/%3E%0A%09%3C/rect%3E%0A%20%20%3C/mask%3E%0A%09%3Cpattern%20id%3D%22qpg%22%20width%3D%22200%22%20height%3D%22200%22%20patternUnits%3D%22userSpaceOnUse%22%3E%20%20%20%20%0A%09%09%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%27%20height%3D%27100%27%20%20%20fill%3D%22white%22%20%3E%3C/rect%3E%0A%09%09%3Crect%20x%3D%27100%27%20y%3D%270%27%20width%3D%27100%27%20height%3D%27100%27%20%20fill%3D%22black%22%20%3E%0A%09%09%3Canimate%20attributename%3D%22fill%22%20from%3D%27black%27%20to%3D%27white%27%20begin%3D%22bpic7.begin%22%20dur%3D%273%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%09%09%3C/rect%3E%0A%09%09%3Crect%20x%3D%270%27%20y%3D%27100%27%20width%3D%27100%27%20height%3D%27100%27%20%20%20fill%3D%22black%22%20%3E%0A%09%09%3Canimate%20attributename%3D%22fill%22%20from%3D%27black%27%20to%3D%27white%27%20begin%3D%22bpic7.begin%22%20dur%3D%273%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%09%09%3C/rect%3E%0A%09%09%3Crect%20x%3D%27100%27%20y%3D%27100%27%20width%3D%27100%27%20height%3D%27100%27%20%20fill%3D%22white%22%20%3E%3C/rect%3E%0A%09%3C/pattern%3E%20%20%0A%09%3Cmask%20id%3D%22mask6%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%09%3Crect%20y%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22fill%3Aurl%28%23qpg%29%22%20/%3E%0A%09%3C/mask%3E%0A%09%3Cpattern%20id%3D%22vstripe%22%20width%3D%2250%22%20height%3D%2250%22%20patternUnits%3D%22userSpaceOnUse%22%3E%20%20%20%20%0A%09%09%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%270%27%20height%3D%2750%27%20fill%3D%22white%22%20%3E%09%0A%09%09%3Canimate%20attributename%3D%22width%22%20from%3D%270%27%20to%3D%2750%27%20begin%3D%22bpic8.begin%22%20dur%3D%273%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%09%09%3C/rect%3E%09%0A%09%3C/pattern%3E%20%20%0A%09%3Cmask%20id%3D%22mask7%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%09%3Crect%20y%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22fill%3Aurl%28%23vstripe%29%22%20/%3E%0A%09%3C/mask%3E%0A%09%3Cpattern%20id%3D%22hstripe%22%20width%3D%2250%22%20height%3D%2250%22%20patternUnits%3D%22userSpaceOnUse%22%3E%20%20%20%20%0A%09%09%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%2750%27%20height%3D%270%27%20fill%3D%22white%22%20%3E%09%0A%09%09%3Canimate%20attributename%3D%22height%22%20from%3D%270%27%20to%3D%2750%27%20begin%3D%22bpic9.begin%22%20dur%3D%273%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%09%09%3C/rect%3E%09%0A%09%3C/pattern%3E%20%20%0A%09%3Cmask%20id%3D%22mask8%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20%3E%0A%09%09%3Crect%20y%3D%220%22%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22fill%3Aurl%28%23hstripe%29%22%20/%3E%0A%09%3C/mask%3E%0A%0A%3C/defs%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1aY8.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22mask%3Aurl%28%23mask0%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic0%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%220%3Bepic9.end-1%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic0%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic0.begin+7%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1dfS.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22mask%3Aurl%28%23mask1%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic1%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic0.end-1%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic1%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic1.begin+7%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1tTP.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22mask%3Aurl%28%23mask2%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic2%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic1.end-1%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic2%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic2.begin+7%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1UFf.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22mask%3Aurl%28%23mask3%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic4%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic2.end-1%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic4%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic4.begin+7%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1Ywt.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22mask%3Aurl%28%23mask4%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic5%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic4.end-1%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic5%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic5.begin+7%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h18OA.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20style%3D%22mask%3Aurl%28%23mask5%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic6%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic5.end-1%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic6%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic6.begin+7%22%20dur%3D%272%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1JeI.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20mask%3D%22url%28%23mask6%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic7%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic6.end-1%22%20dur%3D%272s%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic7%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic7.begin+5%22%20dur%3D%272s%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h13yd.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20mask%3D%22url%28%23mask7%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic8%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic7.end-1%22%20dur%3D%272s%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic8%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic8.begin+5%22%20dur%3D%272s%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/29/4h1lSe.jpg%22%20opacity%3D%270%27%20%0A%20x%3D%270%27%20y%3D%220%22%20width%3D%22960%22%20height%3D%22600%22%20mask%3D%22url%28%23mask8%29%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22bpic9%22%20attributename%3D%22opacity%22%20from%3D%270%27%20to%3D%271%27%20begin%3D%22epic8.end-1%22%20dur%3D%272s%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Canimate%20id%3D%22epic9%22%20attributename%3D%22opacity%22%20from%3D%221%22%20to%3D%220%22%20begin%3D%22bpic9.begin+5%22%20dur%3D%272s%27%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3C/svg%3E'));
</script><script type="text/javascript">
var style = document.body.currentStyle || document.defaultView.getComputedStyle(document.body, '')
console.log(style.fontSize);
</script> 欣赏，学习了。赞一个！
手机看的，效果很好！ 红枫 发表于 2021-10-21 19:58
欣赏，学习了。赞一个！
手机看的，效果很好！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
又增加了三种切换方式
欣赏了！手机和电脑都看到效果！老师天天有新作品！ 寒冬残荷 发表于 2021-10-21 21:38
欣赏了！手机和电脑都看到效果！老师天天有新作品！
继续SVG的学习:lol 195400 发表于 2021-10-21 21:40
继续SVG的学习
才刚发现，只得前面的三种切换方式，后面的三种不行（只在中间有一小点，不放大），我的电脑和手机都是一样的效果。 棱形，对老师来说应该也不难的！
后三种效果，六角形明显，后两种是八角形，十二角形？过渡快，难分辨！ 寒冬残荷 发表于 2021-10-21 22:37
才刚发现，只得前面的三种切换方式，后面的三种不行（只在中间有一小点，不放大），我的电脑和手机都是一 ...
可能还是版本兼容性的问题，我的手机和电脑都行，但一个老的ipad2就完全没效果，只有图片的淡入淡出 红枫 发表于 2021-10-21 23:00
棱形，对老师来说应该也不难的！
后三种效果，六角形明显，后两种是八角形，十二角形？过渡快，难分辨！
边多了只有2秒钟的过渡时间数不过来，除圆和椭圆外其他几种都是由矩形切割（clip-path）而来的，菱形也简单。 寒冬残荷 发表于 2021-10-21 22:37
才刚发现，只得前面的三种切换方式，后面的三种不行（只在中间有一小点，不放大），我的电脑和手机都是一 ...
手机说不清楚，但360的极速模式应该是行的。