js结合css3实现简单toast效果效果：点击按钮，提⽰信息过渡1s出现，然后过渡⼀秒⾃动消失，居中显⽰
<!DOCTYPE html>
<html lang="en">
<head>
css和html和js怎么结合<meta charset="UTF-8">
<title> </title>
<style>
.show-msg {
opacity:0;
transition: all 1s;
}
.
msg {
font-size: 18px;
color: #fff;
background-color: rgba(0,0,0,.6);
padding:10px 15px;
margin:50px auto;
border-radius: 4px;
}
</style>
</head>
<body>
<button class="btn">btn</button>
<div class="show-msg">
<p class="msg"></p>
</div>
<script>
var msgDom = document.querySelector('.msg')
var btn = document.querySelector('.btn')
var showMsg = document.querySelector('.show-msg')
function show (msg) {
msgDom.innerHTML = msg
showMsg.style.display = 'flex'
showMsg.style.opacity = '1'
setTimeout(function(){
showMsg.style.opacity = '0'
},1000)
}
btn.addEventListener('click',function() {
show('good')
},false)
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。