首页 > 试题广场 >

用HTML、CSS、Javascript编写一个Toast

[问答题]
用HTML、CSS、Javascript编写一个Toast 组件，要求：从底部渐变上移到屏幕正中间，2秒后消失。（注：不能使用本地IDE）
添加回答
牛客806390322号头像 牛客806390322号
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        overflow: hidden;
      }
      .box {
        width: 200px;
        height: 150px;
        background-color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: move 1s linear;
      }

      @keyframes move {
        0% {
          top: 100%;
          opacity: 0;
        }
        100% {
          top: 50%;
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

    <script>
      setTimeout(() => {
        document.getElementsByClassName("box")[0].remove();
      }, 2000);
    </script>
  </body>
</html>

发表于 2022-06-15 21:40:30 回复(0)
菲尼克斯007头像 菲尼克斯007
html 
<body>
  <div class='toast'>弹窗组件</idv>
</body>
<script>
  var toast=document.getElementsByClassName('toast')[0]
  var parent=toast.parentNode
  setTimeout(()=>{
    parent.removeChild(toast)
  },2000)
</script>
css
.toast{
  width:200px;
  height:80px;
  border:1px black solid;
  text-align:center;
  line-height:80px;
  position:fixed;
  left:50%;
  top:50%;
  margin-top:-40px;
  margin-left:-100px;
  animation:move 1s linear;
}
@keyframes move{
  0%{
    transform:translateY(100%);
    opacity:0;
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}


发表于 2020-08-29 16:46:00 回复(0)
欲言。头像 欲言。

See the Pen Toast动画 by Emiya (@Emiya1996) on CodePen.

编辑于 2019-10-03 16:12:34 回复(0)
诺维阿鑫头像 诺维阿鑫
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单CSS动画</title>
    </head>
    <style>

#target{
 width:300px;
height:300px;
background:yellow;
position:fixed;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
animation:mymove 1s linear; 
}
@keyframes mymove{
 from{
  transform:translateY(100%);
  opacity:0;

}to{
  transform:translateY(50%)
  opacity:1;
}
}
    </style>
    <body>
     <div id="target"></div>
     <script>
     var parent=target.parentNode;
setTimeout(function(){parent.removeChild(target)},2000);

     </script>
    </body>
</html>
发表于 2018-09-22 13:06:08 回复(0)
提交观点

问题信息

C++工程师 iOS工程师 安卓工程师 运维工程师 前端工程师 算法工程师 欢聚集团 2018 PHP工程师 Java工程师
上传者：小小
难度：
4条回答 1802浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号