如何用css+js实现点击按钮弹出div

html-css021

如何用css+js实现点击按钮弹出div,第1张

<head>

    <title></title>

    <style type="text/css">

    .div1{position:absolutedisplay:none}

    .div2{position:absolutedisplay:none}

    </style>

    <script type="text/javascript">

        function div1Show() {

            var div1 = document.getElementById("div1")

            div1.style.display = ""

        }

        function div2Show() {

            var div1 = document.getElementById("div1")

            var div2 = document.getElementById("div2")

            div1.style.display = "none"

            div2.style.display = ""

        }

    </script>

</head>

<body>

    <div id="div1" class="div1">

    </div>

    <div id="div2" class="div1">

    <input type="button" value="btn2" id="btn2" onclick="div2Show()" />

    </div>

    <input type="button" value="btn1" id="btn1" onclick="div1Show()"/>

</body>

</html>

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。