CSS 三模仿android 中的toast效果
CSS 3模仿android 中的toast效果
在android中,可以使用toast搞出一个信息提示的效果,在CSS 3中,其实也可以
模仿一下,如下代码,先是CSS:
之后设计一个按钮,然后设计JAVASCRIPT代码如下:
可惜只能在非IE下运行了
在android中,可以使用toast搞出一个信息提示的效果,在CSS 3中,其实也可以
模仿一下,如下代码,先是CSS:
#toast{ position: fixed; top: 20px; left: 50%; width: 200px; margin-left: -100px; border: 1px solid #666; background-color: #B1BCCF; padding: 10px 0 ; text-align:center; opacity: .9; /*The good stuff */ -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */ -moz-transition: opacity 0.5s ease-out; /* FF4+ */ -ms-transition: opacity 0.5s ease-out; /* IE10? */ -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */ transition: opacity 0.5s ease-out; }
之后设计一个按钮,然后设计JAVASCRIPT代码如下:
<script type="text/javascript"> var intervalCounter = 0; function hideToast(){ var alert = document.getElementById("toast"); alert.style.opacity = 0; clearInterval(intervalCounter); } function drawToast(message){ var alert = document.getElementById("toast"); if (alert == null){ var toastHTML = '<div id="toast">' + message + '</div>'; document.body.insertAdjacentHTML('beforeEnd', toastHTML); } else{ alert.style.opacity = .9; } intervalCounter = setInterval("hideToast()", 1000); } function save(){ drawToast("Item saved"); } </script> <button onclick="save()">Save</button>
可惜只能在非IE下运行了