生命的萌芽

起个网名好难 发表于 2024-3-2 18:46

本帖最后由起个网名好难于 2024-3-2 20:13 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
#oBlk {width:910px;height:568px;position:relative;margin:auto;overflow:hidden;border-radius:32px;box-shadow:4px 4px 10px black;background-color:hsl(125, 72%, 92%);font-size:12px;margin:100px 0 32px calc(50% - 531px);}
#indicator{position:absolute;left:30%;bottom:5px;width:40%;margin:5px auto; appearance: none; height:8px; overflow:hidden; border-radius: 8px;cursor:pointer;}
#indicator::-webkit-progress-bar {background:pink;}
#indicator::-webkit-progress-value {background:hsl(125, 72%, 72%);}

#rdisk { font-size:40px; color:red; cursor: pointer; animation: rotating 6s infinite linear ;position:absolute; left:calc(50% - 20px); bottom:30px; z-index:100;display:block;border-radius:50%;}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="oBlk">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewbox="0 0 910 568">
<defs>
<mask id="mask0" x="0" y="0" width="910" height="568">
<circle cx="455" cy="284" r="10" style="stroke:#006600; fill:#ffffff;">
<animate attributename="r" from="10" to="910" dur="2" fill="freeze">
</animate>
</circle>
</mask>
<mask id="mask1" x="0" y="0" width="910" height="568">
<ellipse cx="455" cy="284" rx="11.375" ry="7.1" style="stroke:#006600; fill:#ffffff;">
<animate attributename="rx" from="11.375" to="682.5" dur="2" fill="freeze">
</animate>
<animate attributename="ry" from="7.1" to="426" dur="2" fill="freeze">
</animate>
</ellipse>
</mask>
<mask id="mask2" x="0" y="0" width="910" height="568">
<rect x="443.625" y="276.9" width="11.375" height="7.1" style="stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="11.375" to="910" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="7.1" to="568" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="443.625" to="0" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="276.9" to="0" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask3" x="0" y="0" width="910" height="568">
<rect x="443" y="272" width="12" height="12" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="443" to="-455" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="272" to="-626" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask4" x="0" y="0" width="910" height="568">
<rect x="443" y="272" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="443" to="-455" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="272" to="-626" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask5" x="0" y="0" width="910" height="568">
<rect x="443" y="272" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="443" to="-455" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="272" to="-626" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<mask id="mask6" x="0" y="0" width="910" height="568">
<rect x="443" y="272" width="12" height="12" style="clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);stroke:#006600; fill:#ffffff;">
<animate attributename="width" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="height" from="12" to="1820" dur="2" fill="freeze">
</animate>
<animate attributename="x" from="443" to="-455" dur="2" fill="freeze">
</animate>
<animate attributename="y" from="272" to="-626" dur="2" fill="freeze">
</animate>
</rect>
</mask>
<pattern id="pm7" width="200" height="200" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="100" height="100" fill="white">
</rect>
<rect x="100" y="0" width="100" height="100" fill="black">
<animate attributename="fill" from="black" to="white" begin=" " dur="3" fill="freeze">
</animate>
</rect>
<rect x="0" y="100" width="100" height="100" fill="black">
<animate attributename="fill" from="black" to="white" begin=" " dur="3" fill="freeze">
</animate>
</rect>
<rect x="100" y="100" width="100" height="100" fill="white">
</rect>
</pattern>
<mask id="mask7" x="0" y="0" width="910" height="568">
<rect x="0" y="0" width="910" height="568" style="fill:url(#pm7)">
</rect>
</mask>
<pattern id="pm8" width="50" height="50" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="0" height="50" fill="white">
<animate attributename="width" from="0" to="50" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask8" x="0" y="0" width="910" height="568">
<rect x="0" y="0" width="910" height="568" style="fill:url(#pm8)">
</rect>
</mask>
<pattern id="pm9" width="50" height="50" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="0" fill="white">
<animate attributename="height" from="0" to="50" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask9" x="0" y="0" width="910" height="568">
<rect x="0" y="0" width="910" height="568" style="fill:url(#pm9)">
</rect>
</mask>
<pattern id="pm10" width="200" height="100" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" style="clip-path: polygon(0 0, 0 100%, 100% 0);">
</rect>
<rect x="0" y="0" width="200" height="100" fill="black" style="clip-path: polygon(100% 0, 0 100%, 100% 100%);">
<animate attributename="fill" from="black" to="white" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask10" x="0" y="0" width="910" height="568">
<rect x="0" y="0" width="910" height="568" style="fill:url(#pm10)">
</rect>
</mask>
<pattern id="pm11" width="200" height="100" patternunits="userSpaceOnUse">
<rect x="0" y="0" width="200" height="100" fill="white" style="clip-path: polygon(0 0, 0% 100%, 100% 100%);">
</rect>
<rect x="0" y="0" width="200" height="100" fill="black" style="clip-path: polygon(100% 0, 0 0, 100% 100%);">
<animate attributename="fill" from="black" to="white" begin=" " dur="3" fill="freeze">
</animate>
</rect>
</pattern>
<mask id="mask11" x="0" y="0" width="910" height="568">
<rect x="0" y="0" width="910" height="568" style="fill:url(#pm11)">
</rect>
</mask>
</defs>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraicFC4lHDD9gXLjkP0t8KaSiaD23ogSY0kJrWeHpH2PURFutuD3zBWZ5w/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic0" attributename="opacity" from="0" to="1" begin="0;epic50.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic0" attributename="opacity" from="1" to="0" begin="bpic0.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorazWBxST3mp8CqWNzic0yVbjxFiaEKGgJQCicmNG29kBVTvmGy0B63vj3icQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic1" attributename="opacity" from="0" to="1" begin="epic0.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic1" attributename="opacity" from="1" to="0" begin="bpic1.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora70LbpiaPY1ricJsYCEHA7VQarJJMWhibbFPb60tpCs5IdwAI0zCQib3aDg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic2" attributename="opacity" from="0" to="1" begin="epic1.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic2" attributename="opacity" from="1" to="0" begin="bpic2.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoravTbQVoPrj8AXG5xCbqp904wdbkfgyg3iaLa5bv0tXiamKbkJ3DL3icb1Q/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic3" attributename="opacity" from="0" to="1" begin="epic2.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic3" attributename="opacity" from="1" to="0" begin="bpic3.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraGSTInqZK6ich0Tv0icVsl1PDpNibu8YfInd7eicQNuhogibDfAMbWlfKHGw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic4" attributename="opacity" from="0" to="1" begin="epic3.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic4" attributename="opacity" from="1" to="0" begin="bpic4.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora6biapbpUHYhEW7SDu72DorZKhtcS5RdcfabmvqUAia60KAIDgFFBMWpg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic5" attributename="opacity" from="0" to="1" begin="epic4.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic5" attributename="opacity" from="1" to="0" begin="bpic5.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoragzAmRyvXMiceUulsmacy9a79r63e45afKxROG6YZbONqbd2uxJqMF0A/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic6" attributename="opacity" from="0" to="1" begin="epic5.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic6" attributename="opacity" from="1" to="0" begin="bpic6.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoray90w4ZtSqlK6EcK5j04IkQnKmIn8ZvibJ4MwOJxVFiaP7LRa76SJyJSA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic7" attributename="opacity" from="0" to="1" begin="epic6.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic7" attributename="opacity" from="1" to="0" begin="bpic7.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorakNsckcIdd5SusBPwy99pdmic2IyJoFSZT6DDQ0r1mSp0kibrynjzYgFg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic8" attributename="opacity" from="0" to="1" begin="epic7.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic8" attributename="opacity" from="1" to="0" begin="bpic8.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoradZpFPf4vcPJNJ2H5o4ibmC2NePTEspl64fbQyCv5m3h4UcqHT1WVl4w/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic9" attributename="opacity" from="0" to="1" begin="epic8.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic9" attributename="opacity" from="1" to="0" begin="bpic9.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorabHo5BItiaciah1NLW2D8rsZyzF1CfcnoD8GB2MjmysW9kMziagRpoXQvg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic10" attributename="opacity" from="0" to="1" begin="epic9.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic10" attributename="opacity" from="1" to="0" begin="bpic10.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraAOGlTraGWJKJdhlROmBK9T7qGHaA9afiaAlxL7soIQg8vPxTDWGyhOA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic11" attributename="opacity" from="0" to="1" begin="epic10.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic11" attributename="opacity" from="1" to="0" begin="bpic11.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraricW5ib8NPcd06lG2flBgoz8Z1RKrib2UoGib5czmXtptxk4UCWwqdgOEA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic12" attributename="opacity" from="0" to="1" begin="epic11.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic12" attributename="opacity" from="1" to="0" begin="bpic12.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora3V1QusPZhVu7BsWjZqXPqB1vywiaTuz8qBEv3s8023fIFia9H5gwkLjg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic13" attributename="opacity" from="0" to="1" begin="epic12.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic13" attributename="opacity" from="1" to="0" begin="bpic13.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraER2jZsNQL96lbibGxKE9Hia06wdgMoOyU83YgVXrmzzgrYiaWRP4Liayibg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic14" attributename="opacity" from="0" to="1" begin="epic13.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic14" attributename="opacity" from="1" to="0" begin="bpic14.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraOticAzrHiaP6PiazcibDglbHUEfQ6RYCHGf6nX4QcZO43lR47Kv3emebaQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic15" attributename="opacity" from="0" to="1" begin="epic14.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic15" attributename="opacity" from="1" to="0" begin="bpic15.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraOmiaRWNBg0Lgws6v9xuq7QTcuLIPWp0giceUSFibJZ4jnamZZ6AKrBh2w/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic16" attributename="opacity" from="0" to="1" begin="epic15.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic16" attributename="opacity" from="1" to="0" begin="bpic16.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora4O3poHvWLxHbXpEwu927wzNmQfics5DXEzUo8z2jDnibk0RRQz6iaoZLQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic17" attributename="opacity" from="0" to="1" begin="epic16.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic17" attributename="opacity" from="1" to="0" begin="bpic17.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraZyD6P4VNmKXPCsC9NjrtCMvh7cyFNhrCAS8jLQgZX0VeUuQ1T46Kuw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic18" attributename="opacity" from="0" to="1" begin="epic17.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic18" attributename="opacity" from="1" to="0" begin="bpic18.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorada9gFRHiaiajBmZlVrSWR4vFtaW8iakCEddSd0vQicLL4Ryibjd6W1y50uQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic19" attributename="opacity" from="0" to="1" begin="epic18.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic19" attributename="opacity" from="1" to="0" begin="bpic19.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraopUIZ9iaKaQL6tIOvP7URra22aWWQ1qD2JbuuSPMfkxYicw6QCk0hU1Q/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic20" attributename="opacity" from="0" to="1" begin="epic19.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic20" attributename="opacity" from="1" to="0" begin="bpic20.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoramuBr5E2icMeZF5X5Mgyick7wc2yeL8Gk26BhZUibzoqUWLyxvkVAnCLsA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic21" attributename="opacity" from="0" to="1" begin="epic20.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic21" attributename="opacity" from="1" to="0" begin="bpic21.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraxSHZrVBc7AefFvwwiaNmGFH8Laia4KHibGDhM9CnRyfHG6ibgAFaKLBbKQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic22" attributename="opacity" from="0" to="1" begin="epic21.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic22" attributename="opacity" from="1" to="0" begin="bpic22.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraiaibiaylLe8eLicoibicHkLmMvjHOccWU4fjkferWSiaXJ9WEupJy97pUicCBw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic23" attributename="opacity" from="0" to="1" begin="epic22.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic23" attributename="opacity" from="1" to="0" begin="bpic23.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorajDDWV2COFImO0oMYPibIfHNVHxCuGJAFhVv5L6fRUcOrMg8rZzrkJFQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic24" attributename="opacity" from="0" to="1" begin="epic23.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic24" attributename="opacity" from="1" to="0" begin="bpic24.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraSBt9HjO2d124ia46icY52eSicxliay94oxx5C4aeYmECDhw6DSZU9ibw2icg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic25" attributename="opacity" from="0" to="1" begin="epic24.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic25" attributename="opacity" from="1" to="0" begin="bpic25.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoragicAIbAHpZGoFo9dEcEiaicdCSUpzEqsODpQ8GjM9P5nQl4KYRIYC9Vzw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic26" attributename="opacity" from="0" to="1" begin="epic25.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic26" attributename="opacity" from="1" to="0" begin="bpic26.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraj2wY0ItJRKFica7zjkou8libljH8GN67voicXdFA7KwwAUGLsyM2thuLQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic27" attributename="opacity" from="0" to="1" begin="epic26.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic27" attributename="opacity" from="1" to="0" begin="bpic27.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorarMdibsHyQDmTkLXPRkvVLTQjibAMmVmReuMflDoicB48784ZI5Opsf01A/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic28" attributename="opacity" from="0" to="1" begin="epic27.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic28" attributename="opacity" from="1" to="0" begin="bpic28.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraDerpQz052dc7hIJwwHAk2icdO7ricnIs3Iat2n3yeC1A2nicZo53qfMgg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic29" attributename="opacity" from="0" to="1" begin="epic28.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic29" attributename="opacity" from="1" to="0" begin="bpic29.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraj46AqGELL94Ap6zVCib8ZMascdg2OMOBVODtaEicwzTDUmicriap9AUUfQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic30" attributename="opacity" from="0" to="1" begin="epic29.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic30" attributename="opacity" from="1" to="0" begin="bpic30.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorauf1P1gVfAZsusQjbODcianPZa35ItEKerACiahHYcdUd7FBv7TNIiaj7g/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic31" attributename="opacity" from="0" to="1" begin="epic30.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic31" attributename="opacity" from="1" to="0" begin="bpic31.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora7nhIPbyDgRY2DjXpFdIZQ1sVgDXp8PPobnl6PicM4dY24f6dicibNkFWA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic32" attributename="opacity" from="0" to="1" begin="epic31.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic32" attributename="opacity" from="1" to="0" begin="bpic32.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorabguEyLwMtfI7qqvuUJ5ZCY2oCNtV8EX3k3Eicu8fd3pmVt5QjgzEqiaA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic33" attributename="opacity" from="0" to="1" begin="epic32.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic33" attributename="opacity" from="1" to="0" begin="bpic33.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora4fHscnvfMuuEcQ9bRccO4mI2ibaVb5dcveSZKoVGSHfMpS6gUL7umXA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic34" attributename="opacity" from="0" to="1" begin="epic33.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic34" attributename="opacity" from="1" to="0" begin="bpic34.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoranCxWBZoBNVoic6LYK2TClevF79l8laLYmzjN3w6D7Wh0Kib6QWfia6F7g/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic35" attributename="opacity" from="0" to="1" begin="epic34.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic35" attributename="opacity" from="1" to="0" begin="bpic35.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmorafia0ExiapJ2BnUmpOC7AiaDftBsG5PR0ia3WViaiaS0zN8oib98UxaTJZnAKQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic36" attributename="opacity" from="0" to="1" begin="epic35.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic36" attributename="opacity" from="1" to="0" begin="bpic36.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraD6fusZI5TINtVhDCyquXvMThzNqIxkKNsAuYBicrsSNmWcCIPqIvSPw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic37" attributename="opacity" from="0" to="1" begin="epic36.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic37" attributename="opacity" from="1" to="0" begin="bpic37.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora2b0icWDnlBFc2DN9Qf2PicBehUGibvicXb1riacFxiaT06dlLr11j0cHPI1A/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic38" attributename="opacity" from="0" to="1" begin="epic37.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic38" attributename="opacity" from="1" to="0" begin="bpic38.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraGiby97o5roFawwaC4RkWFQNCesUsjc0D5vfOsFSdQYeM21XRh2ibHCTw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic39" attributename="opacity" from="0" to="1" begin="epic38.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic39" attributename="opacity" from="1" to="0" begin="bpic39.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraAgcGQrhsuL3X4JJDib3cH3rTLBTuUgk80W9lawfKdwIfib6SBfIRciazg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic40" attributename="opacity" from="0" to="1" begin="epic39.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic40" attributename="opacity" from="1" to="0" begin="bpic40.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoralsZBc1AiamHAicx8wqibxYcyqSsutz29Bjciaa93FMuaIpE8aiaiaVmZibfHg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic41" attributename="opacity" from="0" to="1" begin="epic40.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic41" attributename="opacity" from="1" to="0" begin="bpic41.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraiaGx8HKJjToibugKt5g4MJRjdiaouZzhUZF4wjCZI7jia25l0Mmu2D4C9g/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic42" attributename="opacity" from="0" to="1" begin="epic41.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic42" attributename="opacity" from="1" to="0" begin="bpic42.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraL834z3wUyibibicMaibDib7hOV8YKEIn3SOoBQb8iaYiaMyicybbCs2e306NlA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic43" attributename="opacity" from="0" to="1" begin="epic42.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic43" attributename="opacity" from="1" to="0" begin="bpic43.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraLVccP9BcqnI6F24IJa2CiauobWxwic3MEDMyRvKvTVk99fSYthQLEyug/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic44" attributename="opacity" from="0" to="1" begin="epic43.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic44" attributename="opacity" from="1" to="0" begin="bpic44.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraicuwbGFuItzCnK4wQ2rsRa0oZ043OIfNMf6Uttkf3vhIvB4AI3xqGDw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic45" attributename="opacity" from="0" to="1" begin="epic44.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic45" attributename="opacity" from="1" to="0" begin="bpic45.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora3HqVvaCjySgt0SZxehic4iaNlVvdxD44MRVgfY6ZKnXLkWOadDyQLNaw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic46" attributename="opacity" from="0" to="1" begin="epic45.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic46" attributename="opacity" from="1" to="0" begin="bpic46.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraceFwcGWnmYBEtcUiaNClSTP1ujHicTh4D0DOnwR9AiaicADIY19ia1zqyiaw/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic47" attributename="opacity" from="0" to="1" begin="epic46.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic47" attributename="opacity" from="1" to="0" begin="bpic47.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmora9Na82vWncqmtRJOfh1Ne3WRRtzbZkiciaJ5Ff39ISUr5N2qkMUGD9klQ/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic48" attributename="opacity" from="0" to="1" begin="epic47.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic48" attributename="opacity" from="1" to="0" begin="bpic48.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraWpLP7nqmh3ibQL5uEr6tQsn90BibI4YfR9eDUMibLzMFQuCiakKXYtljCg/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic49" attributename="opacity" from="0" to="1" begin="epic48.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic49" attributename="opacity" from="1" to="0" begin="bpic49.begin+8" dur="2" fill="freeze">
</animate>
</image>
<image xlink:href="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK4HHpI7CjjNCkerhmrEmoraWaAblkUSxYInzedjVYCXFia3QsWDgsbYiaoOLHr1Q0jDqV5Xz8EQbFfA/640" opacity="0" x="0" y="0" width="910" height="568" preserveaspectratio="none">
<animate id="bpic50" attributename="opacity" from="0" to="1" begin="epic49.end-2" dur="2" fill="freeze">
</animate>
<animate id="epic50" attributename="opacity" from="1" to="0" begin="bpic50.begin+8" dur="2" fill="freeze">
</animate>
</image>
</svg>
<audio id="mObj" src="https://music.163.com/song/media/outer/url?id=440073297.mp3" loop autoplay ></audio>
<progress value='0.0' max='100.0' id='indicator'></progress>

<div id="rdisk" >☀</div>
</div>
<script>
var bstrs = [];
var masks = document.getElementsByTagName("mask");
for(n = 0; n < masks.length; n++) bstrs="";

var imgs = document.getElementsByTagName('image');
for(n = 0; n < imgs.length; n++) {
let j = parseInt(Math.random() * masks.length);
imgs.setAttribute('mask',`url(#mask${j})`);
bstrs += `bpic${n}.begin;`;
}
for(n = 0; n < masks.length; n++) {
let mIdx = parseInt(masks.id.substring(4));
let aniObjs = document.querySelector(`#mask${mIdx}`).getElementsByTagName("animate");
if(aniObjs.length == 0) {
aniObjs = document.querySelector(`#pm${mIdx}`).getElementsByTagName("animate");
}
for(let j = 0; j < aniObjs.length; j++) aniObjs.setAttribute('begin', bstrs);
}

mObj.addEventListener('timeupdate', function() {
if(indicator) {
indicator.value = this.currentTime / this.duration * 100;
}
});

rdisk.onclick = function() {
if (mObj.paused) {
this.style.animationPlayState = 'running';
mObj.play();
} else {
this.style.animationPlayState = 'paused';
mObj.pause();
}
};
</script>

马黑黑 发表于 2024-3-2 19:39

很优美的创意

红影发表于 2024-3-2 20:05

这个图片轮转的切换效果很玄妙，画面也好美，充满希望的嫩绿，让人心旷神怡{:4_199:}

红影发表于 2024-3-2 20:05

欣赏难难好帖{:4_187:}

起个网名好难 发表于 2024-3-2 20:08

马黑黑发表于 2024-3-2 19:39
很优美的创意

谢谢鼓励！

晚上好!

起个网名好难 发表于 2024-3-2 20:08

红影发表于 2024-3-2 20:05
这个图片轮转的切换效果很玄妙，画面也好美，充满希望的嫩绿，让人心旷神怡

谢谢鼓励！

晚上好!

马黑黑 发表于 2024-3-2 20:09

起个网名好难发表于 2024-3-2 20:08
谢谢鼓励！

晚上好!

{:4_191:}

起个网名好难 发表于 2024-3-2 20:12

红影发表于 2024-3-2 20:05
欣赏难难好帖

这帖除图片有点多外没什么新意，花潮网论坛蛮宽容的允许发代码比较长的帖子。

起个网名好难 发表于 2024-3-2 20:14

马黑黑发表于 2024-3-2 20:09

https://5b0988e595225.cdn.sohucs.com/images/20200213/c0f18f63d3664533b6dc51b7f95718b3.gif

红影发表于 2024-3-2 20:40

起个网名好难发表于 2024-3-2 20:08
谢谢鼓励！

晚上好!

喜欢看这样养眼养心的帖子{:4_199:}

红影发表于 2024-3-2 20:42

起个网名好难发表于 2024-3-2 20:12
这帖除图片有点多外没什么新意，花潮网论坛蛮宽容的允许发代码比较长的帖子。

应该谢谢难难，带来这么美的帖子{:4_187:}

小辣椒 发表于 2024-3-2 20:49

太美了，难难这个特效好棒，小辣椒循环看了几遍，这么多代码，出来还这么流畅{:4_178:}

小辣椒 发表于 2024-3-2 20:52

帖子图图运用的好漂亮，都是緑叶开始出来，生机勃勃的发芽了

小辣椒 发表于 2024-3-2 20:52

感谢难难的精彩分享{:4_199:}

起个网名好难 发表于 2024-3-2 21:09

红影发表于 2024-3-2 20:42
应该谢谢难难，带来这么美的帖子

https://img.zcool.cn/community/019f4c5befca48a80121ab5d7aed2a.gif

起个网名好难 发表于 2024-3-2 21:11

小辣椒发表于 2024-3-2 20:49
太美了，难难这个特效好棒，小辣椒循环看了几遍，这么多代码，出来还这么流畅

谢谢鼓励支持！

晚上好！

起个网名好难 发表于 2024-3-2 21:14

小辣椒发表于 2024-3-2 20:52
感谢难难的精彩分享

https://pic.bbs.ybvv.com/forum/202110/16/183618a88yb8zu5tj5n3yb.gif

庶民发表于 2024-3-3 08:57

您的制作很好看

起个网名好难 发表于 2024-3-3 09:57

庶民发表于 2024-3-3 08:57
您的制作很好看

https://img0.baidu.com/it/u=1266254318,2497572299&fm=253&fmt=auto&app=138&f=GIF?w=176&h=151

红影发表于 2024-3-3 10:52

起个网名好难发表于 2024-3-2 21:09

这个抱拳小人真有趣{:4_173:}

页: [1] 2

花潮论坛's Archiver

生命的萌芽