当前位置: 首页 > news >正文

CSS3动画基本使用——页面一打开盒子就从左边走向右边

分两步实现:第一步:先定义动画;第二部:再使用(调用)动画

我们实现一个这样的效果,页面一打开,一个盒子就从左边走向右边。

1、定义动画。使用@keyframes,0%代表动画开始的位置,100%代表动画结束的位置

2、调用动画。使用animation-name后面跟动画名称,并且要给这个动画一个持续的时间,即从左边到右边一共使用了多长时间,单位是秒。animation-duration。

3、这样就会实现一个div从左向右,从0像素走到1000像素,共计用时10秒钟。

http://www.dtcms.com/a/282862.html

相关文章:

  • WIndows服务器中使用nssm启动多个Springboot服务
  • 外网访问禅道软件项目管理系统,简单几步将本地内网IP端口设置互联网在线用
  • Three.js 实战:使用 PBR 贴图打造真实地面材质
  • 面试150——数组字符串
  • 定位慢查询
  • PHP面向对象进阶:魔术方法与对象交互技术
  • 【论文阅读 | CVPR 2023 |CDDFuse:基于相关性驱动的双分支特征分解的多模态图像融合】
  • DAP-seq技术服务常见问题解答:从样本准备到数据分析
  • 卷积神经网路--训练可视化
  • 开源一体化协作平台Colanode
  • 深度剖析C++生态系统:一门老牌语言如何在开源浪潮中焕发新生?
  • LeetCode 3201.找出有效子序列的最大长度 I:分类统计+贪心(一次遍历)
  • 开源基金/股票量化平台调研报告
  • 建筑项目如何管理多方协作风险
  • 数据库——转录组数据库大全
  • LangChain-6-消息持久化
  • Spring Boot 项目中数据同步之binlog和MQ
  • 消息队列的秘密 第二章:拜师学艺
  • ES组合使用must与should时的注意事项
  • 【Springer出版 EI检索】第十三届信息系统与计算技术国际会议诚邀请您参与 8.15-17日 上海举办
  • Spring之核心容器(IoC,DI,基本操作)详解
  • iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
  • Towards Low Light Enhancement with RAW Images 论文阅读
  • 玩转Docker | 使用Docker部署bender个人导航页工具
  • 力扣-146.LRU缓存机制
  • 主机安全---开源wazuh使用
  • 在 Ubuntu 上安装 GBase 8s 的完整实战指南
  • 立创EDA操作记录
  • Linux网卡与软件仓库快捷配置脚本
  • 基于Hadoop与LightFM的美妆推荐系统设计与实现