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教程(9):设置RGB颜色
Apr 02 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python base64编码解码实例
2015/06/21 Python
Python分析学校四六级过关情况
2017/11/22 Python
python绘制立方体的方法
2018/07/02 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
虚拟机下载python是否需要联网
2020/07/27 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
家长对小学生的评语
2014/01/28 职场文书
优良学风班申请材料
2014/02/13 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
培训研修方案
2014/06/06 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js