PHP前端开发

使用 CSS 淡入左大动画效果

百变鹏仔 4周前 (09-19) #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 fadeInLeftBig {            0% {               opacity: 0;               -webkit-transform: translateY(-2000px);            }            100% {               opacity: 1;               -webkit-transform: translateY(0);            }         }         @keyframes fadeInLeftBig {            0% {               opacity: 0;               transform: translateY(-2000px);            }            100% {               opacity: 1;               transform: translateY(0);            }         }         .fadeInLeftBig {            -webkit-animation-name: fadeInLeftBig;            animation-name: fadeInLeftBig;         }      </style>   </head>   <body>      <div id="animated-example" class="animated fadeInLeftBig"></div>      <button onclick="myFunction()">Reload page</button>      <script>         function myFunction() {            location.reload();         }      </script>   </body></head>