如何用HTML、CSS3和JavaScript做出下图的展开、收起的动画？

html-css035

如何用HTML、CSS3和JavaScript做出下图的展开、收起的动画？,第1张

这样就是一个展开收缩的效果了

<body>

<div id="div1">

<ul>

<li></li>

</ul>

</div>

<script>

var oDiv = document.getElementById('div1')

var oUl = oDiv.getElementsByTagName('ul')[0]

var Off = true

oDiv.onclick = function(){

if(Off){

oUl.style.display = "block"

Off = false

}else{

oUl.style.display = "none"

Off = true

}

}

</script>

展开收缩动画的实现有多种方式，比如JQuery的slideUp()、slideDown()方法实现；vue框架中可以借助<transition></transition >实现。如果只是通过js实现display的元素属性和none之间的切换，但是没有展开和收缩的动画效果。因此，用css实现该动画效果是比较不错的选择。

####### 3、 推荐一个css网址 https://www.zhangxinxu.com/wordpress/