PHP前端开发

CSS淡出动画效果

百变鹏仔 3个月前 (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 fadeOut {            0% {opacity: 1;}            100% {opacity: 0;}         }         @keyframes fadeOut {            0% {opacity: 1;}            100% {opacity: 0;}         }         .fadeOut {            -webkit-animation-name: fadeOut;            animation-name: fadeOut;         }      </style>   </head>   <body>      <div id="animated-example" class="animated fadeOut"></div>      <button onclick="myFunction()">Reload page</button>      <script>         function myFunction() {            location.reload();         }      </script>   </body></html>