CSS3 实现图形下落动画效果


Posted in HTML / CSS onNovember 13, 2020

先看效果

CSS3 实现图形下落动画效果

实现代码

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: auto;
  background: #f90;
  overflow: hidden;
}
.box {
  width: 50px;
  height: 50px;
  background: #f70;
  transform: rotate(45deg);
  position: absolute;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.box1 {
  left: calc(50% - 25px);
  top: calc(100% - 75px);
  animation: box1 cubic-bezier(1, 0, 0.45, 1.4) 2s 1;
}
.box2 {
  left: calc(50% - 65px);
  top: calc(100% - 115px);
  animation: box2 cubic-bezier(1, 0, 0.45, 1.4) 2.5s 1;
}
.box3 {
  left: calc(50% + 15px);
  top: calc(100% - 115px);
  animation: box3 cubic-bezier(1, 0, 0.45, 1.4) 3s 1;
}
.box4 {
  left: calc(50% + 55px);
  top: calc(100% - 155px);
  animation: box4 cubic-bezier(1, 0, 0.45, 1.4) 3.5s 1;
}
.box5 {
  left: calc(50% - 105px);
  top: calc(100% - 155px);
  animation: box5 cubic-bezier(1, 0, 0.45, 1.4) 4s 1;
}
.box6 {
  left: calc(50% - 25px);
  top: calc(100% - 155px);
  animation: box6 cubic-bezier(1, 0, 0.45, 1.4) 4.5s 1;
}
@keyframes box1 {
  from {
    top: -100px;
  }
  to {
    top: calc(100% - 75px);
  }
}
@keyframes box2 {
  from {
    top: -100px;
  }
  to {
    top: calc(100% - 115px);
  }
}
@keyframes box3 {
  from {
    top: -100px;
  }
  to {
    top: calc(100% - 115px);
  }
}
@keyframes box4 {
  from {
    top: -100px;
  }
  to {
    top: calc(100% - 155px);
  }
}
@keyframes box5 {
  from {
    top: -100px;
  }
  to {
    top: calc(100% - 155px);
  }
}
@keyframes box6 {
  from {
    top: -100px;
  }
  to {
    top: calc(100% - 155px);
  }
}

以上就是CSS3 实现图形下落动画效果的详细内容,更多关于CSS3 图形下落的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 #HTML / CSS
CSS3 文字动画效果
Nov 12 #HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 #HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 #HTML / CSS
CSS3 实现发光边框特效
Nov 11 #HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 #HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 #HTML / CSS
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php开发文档 会员收费1期
2012/08/14 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
laravel model 两表联查示例
2019/10/24 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
Python使用django搭建web开发环境
2017/06/09 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
神路信息Java面试题目
2013/03/31 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
智能电子应届生求职信
2013/11/10 职场文书
八年级历史教学反思
2014/01/10 职场文书
老师给学生的表扬信
2014/01/17 职场文书
团队会宣传标语
2014/10/09 职场文书
药店收银员岗位职责
2015/04/07 职场文书
公司表扬稿范文
2015/05/05 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
机关工会工作总结2015
2015/05/26 职场文书
2016年学校招生广告语
2016/01/28 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS