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 fadeInRightBig {            0% {               opacity: 0;               -webkit-transform: translateX(2000px);            }            100% {               opacity: 1;               -webkit-transform: translateX(0);            }         }         @keyframes fadeInRightBig {            0% {               opacity: 0;               transform: translateX(2000px);            }            100% {               opacity: 1;               transform: translateX(0);            }         }         .fadeInRightBig {            -webkit-animation-name: fadeInRightBig;            animation-name: fadeInRightBig;         }      </style>   </head>   <body>      <div id="animated-example" class="animated fadeInRightBig"></div>      <button onclick="myFunction()">Reload page</button>      <script>         function myFunction() {            location.reload();         }      </script>   </body></head>