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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
php7性能提升的原因详解
2019/10/13 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python进行特征提取的示例代码
2020/10/15 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
车贷收入证明范本
2014/09/14 职场文书
表扬稿格式范文
2015/01/16 职场文书
会议欢迎词范文
2015/01/27 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
培训感想范文
2015/08/07 职场文书