<!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實現淡入淡出過渡效果的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!