CSS中display实现淡入淡出过渡效果的实例

来源：懂视网责编：小采时间：2020-11-27 18:49:59

CSS中display实现淡入淡出过渡效果的实例

CSS中display实现淡入淡出过渡效果的实例:display实现淡入淡出过渡效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {

推荐度：

点击下载本文 文档为doc格式

导读CSS中display实现淡入淡出过渡效果的实例:display实现淡入淡出过渡效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {

display实现淡入淡出过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 p {
 position: relative;
 }
 input {/*按钮样式*/
 cursor: pointer;
 border: none;
 outline: none;
 background: #34BC9D;
 color: #fff;
 height: 40px;
 }
 img {
 position: absolute;
 transition: 1s;
 left: 0;
 top: 100%;
 opacity: 0;
 cursor: pointer;
 display: none;
 }
 </style>
</head>
<body>
 <p>
 <input id="root" type="button" onclick="show()" value="点击显示图片">
 <img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">
 </p>
<script>
 var root = document.getElementById("root");
 var img = document.getElementById("img");
 function show(){
 if(root.value === "点击显示图片"){
 root.value = "点击隐藏图片";
 /*设置setTimeout，让display先执行，opacity后执行*/
 img.style.display = "block";
 setTimeout(function () {
 img.style.opacity = 1;
 },.1);
 }else{
 root.value = "点击显示图片";
 img.style.opacity = 0;
 /*隐藏需要先执行opacity，再执行display，否则无效*/
 setTimeout(function () {
 img.style.display = "none";
 },900);
 }
 }
</script>
</body>
</html>

CSS中display实现淡入淡出过渡效果的实例

CSS中display实现淡入淡出过渡效果的实例:display实现淡入淡出过渡效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {

推荐度：

点击下载本文 文档为doc格式

标签：效果实例淡入淡出

热门焦点

CSS中display实现淡入淡出过渡效果的实例

CSS中display实现淡入淡出过渡效果的实例

CSS中display实现淡入淡出过渡效果的实例

最新推荐

猜你喜欢

热门推荐