草庐IT

移动web动画

鹏zxp 2023-12-01 原文

移动web动画

动画

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

  1. 定义：

    /* 1. 定义的动画 */
@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

    或者是

     /* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

  2. 调用

    img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

  1. 动画名字参照css类选择器命名
  2. 动画时长和延迟时间别忘了带单位 s
  3. infinate 无限循环动画
  4. alternate 为反向 就是左右来回执行动画（跑马灯）
  5. forwards 动画结束停留在最后一帧状态
  6. linear 让动画匀速执行

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

留在最后一帧状态
6. linear 让动画匀速执行

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;
web移动spanclasstoken前端

有关移动web动画的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  3. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  4. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  5. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

  6. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

  7. 适用于Web开发的Python还是Ruby？ - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。11年前关闭。我是一位精通HTML

  8. ruby-on-rails - Web 应用程序中的 API 版本控制 - 2

    我目前正在为一个新网站设计版本化的API。我了解如何为路由命名空间，但我一直坚持在模型中实现版本化方法的最佳方式。下面的代码示例使用的是rails框架，但是事情的原理在大多数web框架之间应该是一致的。目前的路线看起来像这样:MyApp::Application.routes.drawdonamespace:apidonamespace:v1doresources:products,:only=>[:index,:show]endendend和Controller:classApi::V1::ProductsController很明显，我们只是在此处公开Product上可用的属性，如果

  9. ruby - 在 ruby​​ Selenium 中移动鼠标(move_to) - 2

    我正在尝试使用Ruby中的SeleniumWebDriver2.4模拟鼠标移动如果我运行测试，是否应该看到鼠标在我的屏幕上移动？我很困惑。我试过很多不同的方法示例代码:require'selenium-webdriver'driver=Selenium::WebDriver.for:firefoxdriver.navigate.to'http://www.google.com'element=driver.find_element(:id,'gbqfba')那我试过了driver.action.move_to(element).performdriver.mouse.move_to(e

  10. ruby-on-rails - Ruby/Rails 和 Sharepoint Web 服务 - 2

    我正在尝试使用ruby​​来使用Sharepoint网络服务。我基本上已经放弃尝试使用NTLM进行身份验证，并暂时将Sharepoint服务器更改为使用基本身份验证。我已成功使用soap4r获得WSDL，但在尝试使用实际Web服务调用时仍然无法进行身份验证。有没有人有过让ruby​​和Sharepoint对话的经验？ 最佳答案 我是个新手。但经过很多时间并在更多经验编码人员的帮助下，我能够让ruby​​与Sharepoint2010一起工作。下面的代码需要“ntlm/mechanize”gem。我已经能够使用列表GUID和ListV

随机推荐