国外网赚学习

项目EMU教程

关注的频道
QQ:1565238120

网页加载时,CSS上移的动画效果控制

网页加载时,CSS上移的动画效果控制,这个效果是如今网页中使用特别多的,找了很多案例,在这里贴出来方便日后使用。

首页 > 建站 > 程序/文档 > 网页加载时,CSS上移的动画效果控制 第 35 次浏览

网页加载时,CSS上移的动画效果控制,这个效果是如今网页中使用特别多的,找了很多案例,在这里贴出来方便日后使用。

下面直接贴出代码:

1、CSS代码如下


  • .animate-box {
    opacity: 0
    }

    @-webkit-keyframes fadeInUp {
    from {
    opacity:0;
    -webkit-transform:translate3d(0, 100%, 0);
    transform:translate3d(0, 100%, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    transform:translate3d(0, 50px, 0)
    }
    to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
    }
    }
    @keyframes fadeInUp {
    from {
    opacity:0;
    -webkit-transform:translate3d(0, 100%, 0);
    transform:translate3d(0, 100%, 0);
    -webkit-transform:translate3d(0, 50px, 0);
    transform:translate3d(0, 50px, 0)
    }
    to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
    }
    }
    .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
    }
    .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    }


  • 2、div代码 加入类即可,如:

    <div class=”animate-box fadeInUp animated”>我需要上移</div>

更新时间: 2022-09-08
本文地址:https://www.lzb6.com/website/program/160.html
置顶