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来实现社交分享按钮
Nov 11 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
json的使用小结
2016/06/08 Javascript
基本DOM节点操作
2017/01/17 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
Vue动态实现评分效果
2017/05/24 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
JS实现的RC4加密算法示例
2018/08/16 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
python实现多张图片拼接成大图
2019/01/15 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
餐饮营销方案
2014/02/23 职场文书
爱情保证书
2015/01/17 职场文书
应届毕业生自荐信
2015/03/04 职场文书
小学教师自我评价
2015/03/04 职场文书
党支部季度考核意见
2015/06/02 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers