svg元素动画

复制代码
    <section style="line-height: 0;font-size: 0px;transform: scale(1);"><svg
                style="pointer-events: none;display: inline-block;width: 100%;vertical-align: top;background-repeat: repeat;background-size: 100% 100%;background-image: url(22);-webkit-tap-highlight-color: transparent;user-select: none;"
                viewBox="0 0 701 1973">

                <g transform-origin="352 430" decs="yuananim">
                    <animateTransform attributeType="xml" attributeName="transform" type="scale" dur="2s"
                        repeatCount="indefinite" values="1; 1.25; 1">
                    </animateTransform>
                    <foreignObject x="337" y="425" width="31" height="31"><svg
                            style="width: 100%;vertical-align: top;background-repeat: no-repeat;vertical-align: top;background-size: 100% 100%;background-image: url(11);-webkit-tap-highlight-color: transparent;user-select: none;"
                            viewBox="0 0 31 31"></svg>
                    </foreignObject>
                </g>

                <g opacity="0">
                    <animateTransform attributeName="transform" type="translate" values="135135 0" begin="click"
                        dur="1000s" restart="never" fill="freeze">
                    </animateTransform>
                    <animate attributeName="opacity" begin="click+0s" restart="never" dur="1000s" keyTimes="0; 0.001; 1"
                        values="0;1;1" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1.0;0.42 0 0.58 1.0">
                    </animate>
                    <rect x="0" y="0" width="701" height="1973" opacity="0" fill="transparent"
                        style="pointer-events: visible;" decs="clickarea">
                        <set attributeName="visibility" from="visible" to="hidden" begin="click"></set>
                    </rect>
                    <g transform="translate(-135135 0)">
                        <foreignObject x="0" y="0" width="100%" height="100%">
                            <svg style="pointer-events: none;display: inline-block;width: 100%;vertical-align: top;background-size: 100% 100%;background-repeat: no-repeat;background-image: url(22);-webkit-tap-highlight-color: transparent;user-select: none;"
                                viewBox="0 0 701 1973">
                            </svg>
                        </foreignObject>
                    </g>
                </g>
            </svg>


        </section>
复制代码

svg元素动画

posted @   newmiracle宇宙  阅读(28)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示