web过渡（js/transition/display）
李宜然
JavaScript过渡
具体代码如下：
index.html
<title>js过渡</title>
<link id="mystyle" rel="stylesheet" href="index1.css">
</head>
<body>
<div id="wrapper">
<br>
</div>
<input type="button" value="换肤" id="myclick">
</button>
<script>
var myclickTarget=document.getElementById("myclick");
myclickTarget.onclick= function () {
var styleTarget=document.getElementById("mystyle");
styleTarget.href="index2.css";
}
</script>
</body>
index1.js
#wrapper{
width: 100px;
height: 100px;
background-color: red;
}
index2.js
#wrapper{
width: 200px;
height: 200px;
background-color: blue;
}
CSS过渡
transition过渡
<style>
#wrapper{
width: 50px;
height: 50px;
background-color: red;
border:10px solid green;
}
#wrapper:hover{
width: 500px;
height: 300px;
/* 转变，all表示宽高都变，ease时间函数 ，先延迟3秒，再5秒变完*/
transition:all ease 5s 3s;
}
</style>
transition: property duration timing-function delay;
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
注释：请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。
推荐一篇个人觉得写的很全的transition属性博客
链接: https://blog.csdn.net/cuishizun/article/details/82345612.
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
display隐显过渡
display 设置或检索对象是否及如何显示。
none 隐藏功能
block 除了转换成块级元素外，还有显示元素功能
特点：隐藏之后，不保留位置
#news{
display: none;/*不显现*/
}
#rightTab div:target{
display: block;/*显现*/
}
<div id="leftTab">
<div id="menu1" > <a href="#home" >学校概况</a></div>
<div id="menu" > <a href="#news" >新闻中心</a></div>
</div>
<div id="rightTab">
<div id="home"><p> 江西**大学</p></div>
<div id="news"><p> 2020年10月24日</p></div>
</div>
类似资料：