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背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 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/03/06 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Django框架模板的使用方法示例
2019/05/25 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
2014年乡镇植树节活动方案
2014/02/28 职场文书
士力架广告词
2014/03/20 职场文书
中秋节主持词
2014/04/02 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
草房子读书笔记
2015/06/29 职场文书
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS