带呼吸动画的返回顶部按钮

博主：牛宝宝
发布时间：2020-09-12 13:02:13
298 次浏览
🎨前端
JavaScript

直接贴代码吧，能不能看懂随缘吧

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
<style type="text/css">
*{
    margin:0;
    padding: 0;
}
html{
    height: 100%;
} 
    .toTopBtn {
     position: fixed;
    bottom: 100px;
    left: 100px;
    background: rgb(36, 234, 227);
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    display: none;
    /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
    animation-name: breath;                         /* 动画名称 */
    animation-duration: 1s;                         /* 动画时长3秒 */
    animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;            /* 播放次数：无限 */
 
    /* Safari and Chrome */
    -webkit-animation-name: breath;                 /* 动画名称 */
    -webkit-animation-duration: 1s;                 /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}
 
@keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */    
}
 
@-webkit-keyframes breath {
    from { opacity: 0.1; }                          /* 动画开始时的不透明度 */
    50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */
    to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}
</style>
</head>
<body> 
       <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
      <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
       <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
        <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
         <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
          <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
           <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
      <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
       <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
        <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
         <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
          <p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p><p>nsk</p>
<script type="text/javascript" src="http://vscss.com/dm/jquery.js"></script>
<script type="text/javascript">
$(function(){
    var toTop = $("<span>返回顶部</span>");
    $('body').append(toTop);
    $(window).scroll(function(event) {
        if($(window).scrollTop()>100){
            $('.toTopBtn').fadeIn();
        }else{
            $('.toTopBtn').fadeOut();
        }
    });
    $('.toTopBtn').click(function(){
        $('html,body').animate({
            scrollTop:0
        },200);
        //return false;
    });
});
</script>
</body>
</html>