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的新特性
Sep 05 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
box-shadow单边阴影的实现
May 21 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+xslt在windows平台上
2006/10/09 PHP
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
layui分页效果实现代码
2017/05/19 Javascript
详解vue 组件
2020/06/11 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python类定义和类继承详解
2015/05/08 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
考核工作实施方案
2014/03/30 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
酒店厨房管理制度
2015/08/06 职场文书
数学复习课教学反思
2016/02/18 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS