我说这个好看没人反对吧之按钮动画

最新推荐文章于 2024-04-30 13:05:22 发布

Volecity

最新推荐文章于 2024-04-30 13:05:22 发布

阅读量67

点赞数

分类专栏： svg

本文链接：https://blog.csdn.net/start7000k/article/details/119174631

版权

SVG 动画 JavaScript 交互图形设计

关键词由CSDN通过智能技术生成

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
    background: #eee;
    margin: 0;
}
h1 {
    font-family: 'Inconsolata';
    font-variant: small-caps;
    text-align: center;
    color: #bbb;
    font-weight: normal;
    font-size: 2.5em;
}
svg {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -75px;
    position: absolute;
    cursor: pointer;
}
    </style>
</head>
<body>
    <h1>click to play</h1>
<svg viewbox="0 0 140 140">
    <circle cx="70" cy="70" r="65" style="fill:#fff;stroke:#ddd" />
    <polygon id="shape" points="50,40 100,70 50,100, 50,100, 50,40" style="fill:#aaa;">
        <animate id="animate_to_stop" begin="indefinite " fill="freeze" attributeName="points" dur="200ms" to="45,45 95,45 95,95, 45,95, 45,45" />
        <animate id="animate_to_play" begin="indefinite " fill="freeze" attributeName="points" dur="200ms" to="50,40 100,70 50,100, 50,100, 50,40" />
    </polygon>
</svg>
<script>
    var playing = false;

document.getElementById("shape").onclick=function(){
    playing = !playing;
    var animation = playing ? 'stop' : 'play';
    document.getElementById('animate_to_' + animation).beginElement()
    console.log(document.getElementById('animate_to_' + animation))
}

</script>
</body>
</html>