使用 CSS 向左弹跳动画效果-css教程-PHP中文网

首页

web前端

css教程

使用 CSS 向左弹跳动画效果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 25, 2023 pm 05:53 PM

使用 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 bounceInLeft {
            0% {
               opacity: 0;
               -webkit-transform: translateX(-2000px);
            }
            60% {
               opacity: 1;
               -webkit-transform: translateX(30px);
            }
            80% {
               -webkit-transform: translateX(-10px);
            }
            100% {
               -webkit-transform: translateX(0);
            }
         }

         @keyframes bounceInLeft {
            0% {
               opacity: 0;
               transform: translateX(-2000px);
            }
            60% {
               opacity: 1;
               transform: translateX(30px);
            }
            80% {
               transform: translateX(-10px);
            }
            100% {
               transform: translateX(0);
            }
         }

         .bounceInLeft {
            -webkit-animation-name: bounceInLeft;
            animation-name: bounceInLeft;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated bounceInLeft"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

以上是使用 CSS 向左弹跳动画效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

滑动页脚Apr 09, 2025 am 11:50 AM

刚刚推出了一个引人入胜的新网站。标语：Big Tech正在看着您。我们正在看大型技术。上升的出色工作。这

喜欢的页面Apr 09, 2025 am 11:47 AM

前几天，我发布了有关在JavaScript中解析RSS提要的内容。我还发布了有关RSS设置的信息，讨论了Feedbin的核心。

重新创建Codepen Gutenberg嵌入块以进行理智。Apr 09, 2025 am 11:43 AM

学习如何通过Chris Coyier实施WordPress的Gutenberg编辑器来创建一个自定义Codepen块，并为Sanity Studio提供预览。

如何使用CSS制作线路图Apr 09, 2025 am 11:36 AM

线，条和饼图是仪表板的面包和黄油，是任何数据可视化工具包的基本组成部分。当然，您可以使用SVG

编程SASS创建可访问的颜色组合Apr 09, 2025 am 11:30 AM

我们一直在寻求使网络更容易访问。颜色对比只是数学，因此Sass可以帮助涵盖设计师可能错过的边缘案例。

我们如何创建一个在SVG中生成格子呢模式的静态站点Apr 09, 2025 am 11:29 AM

格子呢是一块图案布，通常与苏格兰有关，尤其是他们时尚的苏格兰语。在Tartanify.com上，我们收集了5,000多个格子呢

PHP模板的后续行动Apr 09, 2025 am 11:14 AM

不久前，我仅以PHP（基本上是Heredoc语法）发布了有关PHP模板的信息。我从字面上使用该技术来进行某种超级基础

使用Bootstrap组件创建模态图像库Apr 09, 2025 am 11:10 AM

您是否曾经在网页上单击图像，该图像通过导航打开图像的较大版本以查看其他照片？

See all articles

热AI工具

热工具

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），