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 相关文章推荐
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
详解CSS3浏览器兼容
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
用PHP制作的意见反馈表源码
2007/03/11 PHP
微信自定义分享php代码分析
2016/11/24 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
javascript连续赋值问题
2015/07/08 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python爬虫开发与项目实战
2020/12/16 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
大学生实习证明范本
2014/09/19 职场文书
志愿者事迹材料
2014/12/26 职场文书
家装电话营销开场白
2015/05/29 职场文书
高三生物教学反思
2016/02/22 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书