PHP前端开发

使用 CSS 淡入大动画效果

百变鹏仔 3个月前 (09-20) #CSS
文章标签 效果

要使用 CSS 在图像上实现淡入大动画效果,您可以尝试运行以下代码:

示例

现场演示

<html>   <head>      <style>         .animated {            background-image: url(/css/images/logo.png);            background-repeat: no-repeat;            background-position: left top;            padding-top:95px;            margin-bottom:60px;            -webkit-animation-duration: 10s;            animation-duration: 10s;            -webkit-animation-fill-mode: both;            animation-fill-mode: both;         }         @-webkit-keyframes fadeInUpBig {            0% {            opacity: 0;            -webkit-transform: translateY(2000px);         }         100% {            opacity: 1;            -webkit-transform: translateY(0);         }      }      @keyframes fadeInUpBig {         0% {            opacity: 0;            transform: translateY(2000px);         }         100% {            opacity: 1;            transform: translateY(0);         }      }      .fadeInUpBig {         -webkit-animation-name: fadeInUpBig;         animation-name: fadeInUpBig;      }   </style>   </head>   <body>      <div id="animated-example" class="animated fadeInUpBig"></div>      <button onclick="myFunction()">Reload page</button>      <script>         function myFunction() {            location.reload();         }      </script>   </body></html>