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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
深入浅析python继承问题
2016/05/29 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python绘制动态曲线教程
2020/02/24 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
python中time、datetime模块的使用
2020/12/14 Python
Python操作Excel的学习笔记
2021/02/18 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
学术会议邀请函范文
2014/01/22 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
员工自我评价范文
2015/03/11 职场文书
公司出差管理制度范本
2015/08/05 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js