使用 CSS 淡入左大动画效果-css教程-PHP中文网

首页

web前端

css教程

使用 CSS 淡入左大动画效果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 21, 2023 am 10:09 AM

使用 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>

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

声明

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

揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践Mar 08, 2025 am 09:45 AM

这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章，请查看“以：focus-visible的管理用户焦点”。在

将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PM

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例，以及我们必须将这些样式应用于WordPress块和元素的选项。

使用智能表单框架创建JavaScript联系表格Mar 07, 2025 am 11:33 AM

本教程演示了使用智能表单框架创建外观专业的JavaScript表单（注意：不再可用）。尽管框架本身不可用，但原理和技术仍然与其他形式的建筑商相关。

比较5个最佳的PHP形式构建器（和3个免费脚本）Mar 04, 2025 am 10:22 AM

本文探讨了Envato Market上可用的PHP表单构建器脚本，比较了其功能，灵活性和设计。在研究特定选项之前，让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式

使用GraphQL缓存Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点，那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。

展示，不要说Mar 16, 2025 am 11:49 AM

您花多少时间为网站设计内容演示文稿？当您撰写新的博客文章或创建新页面时，您是在考虑

优雅且酷的自定义CSS卷轴：展示柜Mar 10, 2025 am 11:37 AM

在本文中，我们将深入研究滚动条。我知道，这听起来并不魅力，但请相信我，一个精心设计的页面是齐头并进的

See all articles

热AI工具

热工具

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

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。