动画点击事件
#box {
width: 300px;
display: none;
position: relative;
background-color: pink;
animation-name: test1, test2;
animation-duration: 1s;
animation-iteration-count: 1;
transition-timing-function: ease;
}
@keyframes test2 {
0% {
height: 30px;
}
100% {
height: 300px;
}
}
</style>
</head>
<body>
<div id="box">赵嘉超</div>
<button id="yincang">显示</button>
<script>
var box = document.getElementById('box');
var yincang = document.getElementById('yincang');
yincang.onclick = function () {
if (box.style.display == 'none') {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
}
</script>
