登录  /  注册
首页 > web前端 > css教程 > 正文

使用 CSS 淡入左大动画效果

WBOY
发布： 2023-09-21 10:09:11
转载
979人浏览过

使用 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中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
相关标签：
css
来源：tutorialspoint网
收藏 点赞
上一篇：使用 CSS 设置动画完成一个周期所需的时间 下一篇：如何使用CSS定义边框的颜色？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使用计算属性的mailto链接未加载完整的消息正文 mailto链接已正确加载收件人和主题，但似乎将电子邮件正文截断为非常短的长度。我的电子邮件总共有1500个字符，因此低于mailto限制。该电子邮件的正文似乎被截断了大约200个...
P粉811349112来自于2023-12-07 19:05:55
0 1 242
未找到通过 Twitter 分享的结果（仅在移动设备上分享）：错误 我有一个简单的Faceb ook、Twitter和Pinterest分享按钮<ahref="<?phpecho"$base_url/share.ph...
P粉486743671来自于2023-12-07 10:54:26
0 1 182
如何在 JavaScript 中将 COCO RLE 二进制掩码解码为图像？ 这是COCORLE掩码的示例-https://pastebin.com/ZhE2en4C这是YOLOv8验证运行的输出，取自生成的Predictions.json文件。我正在尝试在...
P粉709307865来自于2023-12-07 10:08:08
0 1 191
Nuxt-link使用Bootstrap-vue刷新页面的问题 我正在使用nuxt和bootstrap构建自定义悬停下拉菜单以进行导航。我遇到的问题是我的导航子菜单NuxtLinks正在刷新整个页面，而不是平滑地更改Nuxt块中的应用程序内容。...
P粉512729862来自于2023-12-07 08:58:02
0 1 306
为什么 Inertia JS Form 不能与 vue.js 一起使用？当我使用错误时 我目前遇到一个问题。我曾经有一个IndexUserSettings.vue，它显示了IndexUserBillingDetail.vue。在此vue中，检查create:boole...
P粉302160436来自于2023-12-06 21:56:35
0 1 181
如何修复 Vue 应用程序的窗口对象上的这些 Typescript 错误？ 在我的Vue3应用程序的组件中，我需要使用窗口上的一些自定义属性，如下所示：window.ZohoHCAsapSettings={//<--ERRORHEREticketsS...
P粉344355715来自于2023-12-06 20:46:24
0 2 182
React hook 表单字段数组验证不起作用 我有一个字段数组，其中有一个输入字段，我为其设置了一些验证规则，例如required和minLength。我希望在附加新字段时立即验证该字段。但是，这种情况并没有发生，即使我附加空...
P粉665679053来自于2023-12-06 19:41:46
0 1 203
Vue中v-html无法渲染\r\n\t 我有这样的数据：data:{content:"<p><spanstyle=\"font-size:16px\">Berikut...
P粉852114752来自于2023-12-06 17:55:55
0 1 237
Vue 3 composition api中的双向表单数据绑定 我开始在vue中从选项api过渡到组合api。我有以下代码块，我正在尝试实现2路绑定。我正在使用ant-design-vue库进行滑块输入。并尝试将滑块值绑定到输入字段。<t...
P粉982881583来自于2023-12-06 10:55:35
0 1 257
单页应用程序在 AWS Cognito 中遇到自定义登录重定向问题 如果我在Cognito上的应用程序客户端中使用托管UI，则重定向可以正常工作。但是，如果我创建自己的登录页面，它不会重定向到我想要的网站。这是在使用VueJS的单页应用程序中，我也...
P粉323374878来自于2023-12-05 23:47:09
0 1 274
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部