# Toast with CSS3
<!DOCTYPE html>
<html lang="en">
<head>
<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>
