css3+原生js实现toast提示层弹框（淡入淡出动画效果）

最新推荐文章于 2024-08-27 04:36:56 发布

codeTnt

最新推荐文章于 2024-08-27 04:36:56 发布

阅读量5.2k

点赞数 3

分类专栏： js 文章标签： toast javascript

本文链接：https://blog.csdn.net/codeTnt/article/details/81030077

版权

今天无聊，写了一个小插件。利用css3封装了一个toast弹出层。

代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>toast</title>
  </head>
  <style media="screen">
    @keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-webkit-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-moz-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-o-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @-ms-keyframes fadeIn {
      0%    {opacity: 0}
      100%  {opacity: 1}
    }
    @keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-webkit-keyframes fadeOut {
      0%    {opacity: 1}
      100%  {opacity: 0}
    }
    @-moz-keyframes fadeOut {
      0%