CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

background: #1d1f20;

padding-top: 40px;

}

.leaves {

height: 300px;

width: 42em;

margin: 0 auto;

}

.leaf {

position: relative;

width: 8em;

display: inline-block;

bottom: 400px;

}

.leaf .petal {

width: 4.5em;

height: 4.5em;

-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;

border-radius: 80% 0 55% 50% / 55% 0 80% 50%;

-webkit-transform: rotateZ(-45deg);

transform: rotateZ(-45deg);

margin: 0 auto;

position: absolute;

}

.petal:nth-child(1) {

position: static;

}

.petal:nth-child(2) {

top: 30px;

transform: rotateZ(-80deg);

}

.petal:nth-child(3) {

top: 30px;

transform: rotateZ(-10deg);

right: 0;

}

.petal:nth-child(4) {

top: 70px;

transform: rotateZ(-102deg);

left: -5px;

}

.petal:nth-child(5) {

top: 70px;

transform: rotateZ(12deg);

right: -5px;

}

.stem {

height: 120px;

width: 18px;

border-right: 6px solid #460f11;

border-radius: 50%;

bottom: 30px;

position: relative;

content: "";

display: block;

margin: 0 auto;

left: -6px;

}

.stem:before {

height: 10px;

width: 40px;

border-bottom: 3px solid #460f11;

border-radius: 0% 20% 50% 50%;

top: 50px;

position: absolute;

content: "";

left: -25px;

z-index: 99;

transform: rotateZ(15deg);

}

.stem:after {

height: 10px;

width: 45px;

border-bottom: 3px solid #460f11;

border-radius: 0% 20% 50% 50%;

top: 20px;

position: absolute;

content: "";

left: 10px;

transform: rotateZ(-30deg);

}

.leaf:nth-of-type(1) {

animation: falling1 2s ease-in-out 1;

animation-delay: 0.3s;

animation-fill-mode: forwards;

}

.leaf:nth-of-type(1) .petal {

background: #851D21;

}

.leaf:nth-of-type(1) .stem,

.leaf:nth-of-type(1) .stem:before,

.leaf:nth-of-type(1) .stem:after {

border-color: #460f11;

}

.leaf:nth-of-type(2) {

animation: falling2 2s ease-in-out 1;

animation-delay: 0.6s;

animation-fill-mode: forwards;

}

.leaf:nth-of-type(2) .petal {

background: #F3522C;

}

.leaf:nth-of-type(2) .stem,

.leaf:nth-of-type(2) .stem:before,

.leaf:nth-of-type(2) .stem:after {

border-color: #c72f0b;

}

.leaf:nth-of-type(3) {

animation: falling3 2s ease-in-out 1;

animation-delay: 0.9s;

animation-fill-mode: forwards;

}

.leaf:nth-of-type(3) .petal {

background: #EBDF02;

}

.leaf:nth-of-type(3) .stem,

.leaf:nth-of-type(3) .stem:before,

.leaf:nth-of-type(3) .stem:after {

border-color: #9f9701;

}

.leaf:nth-of-type(4) {

animation: falling4 2s ease-in-out 1;

animation-delay: 1.2s;

animation-fill-mode: forwards;

}

.leaf:nth-of-type(4) .petal {

background: #88E014;

}

.leaf:nth-of-type(4) .stem,

.leaf:nth-of-type(4) .stem:before,

.leaf:nth-of-type(4) .stem:after {

border-color: #5d9a0e;

}

.leaf:nth-of-type(5) {

animation: falling5 2s ease-in-out 1;

animation-delay: 1.5s;

animation-fill-mode: forwards;

}

.leaf:nth-of-type(5) .petal {

background: #385E31;

}

.leaf:nth-of-type(5) .stem,

.leaf:nth-of-type(5) .stem:before,

.leaf:nth-of-type(5) .stem:after {

border-color: #1a2c17;

}

@keyframes falling1 {

0% {

bottom: 380px;

left: 0%;

-webkit-transform: scale3d(1, 0.5, 1) rotateZ(30deg);

}

50% {

bottom: 100px;

left: 20%;

-webkit-transform: scale3d(1, 0.75, 1) rotateZ(30deg);

}

100% {

bottom: -80px;

left: 0%;

-webkit-transform: scale3d(1, 1, 1) rotateZ(-30deg);

}

}

@keyframes falling2 {

0% {

bottom: 380px;

left: 30%;

-webkit-transform: scale3d(1, 0.4, 1) rotateZ(30deg);

}

50% {

bottom: 200px;

left: -10%;

-webkit-transform: scale3d(1, 0.6, 1) rotateZ(30deg);

}

100% {

bottom: -65px;

left: 0%;

-webkit-transform: scale3d(1, 1, 1) rotateZ(-15deg);

}

}

@keyframes falling3 {

0% {

bottom: 280px;

left: -20%;

-webkit-transform: scale3d(1, 0.5, 1) rotateZ(30deg);

}

50% {

bottom: 100px;

left: 20%;

-webkit-transform: scale3d(1, 0.75, 1) rotateZ(30deg);

}

100% {

bottom: -50px;

left: 0%;

-webkit-transform: scale3d(1, 1, 1) rotateZ(0deg);

}

}

@keyframes falling4 {

0% {

bottom: 280px;

left: -40%;

-webkit-transform: scale3d(1, 0.5, 1) rotateZ(30deg);

}

50% {

bottom: 100px;

left: 30%;

-webkit-transform: scale3d(1, 0.75, 1) rotateZ(30deg);

}

100% {

bottom: -65px;

left: 0%;

-webkit-transform: scale3d(1, 1, 1) rotateZ(15deg);

}

}

@keyframes falling5 {

0% {

bottom: 280px;

left: -10%;

-webkit-transform: scale3d(1, 0.4, 1) rotateZ(45deg);

}

35% {

bottom: 100px;

left: 10%;

-webkit-transform: scale3d(1, 0.6, 1) rotateZ(40deg);

}

75% {

bottom: 100px;

left: -25%;

-webkit-transform: scale3d(1, 0.75, 1) rotateZ(35deg);

}

100% {

bottom: -80px;

left: 0%;

-webkit-transform: scale3d(1, 1, 1) rotateZ(15deg);

}

}

css3风吹树叶,纯CSS3实现的树叶形状和飘落动画相关推荐

  1. css3怎么设置logo,纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo

    纯CSS3实现的LOGO标志 ABN AMRO CSS3 logo demo by js.alixixi.com #abnamro .canvas { background-color: #f2f2f ...

  2. css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效

    插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...

  3. CSS3 使用技巧：纯 CSS3 实现黑白图像效果

    您可能感兴趣的相关文章 2012年最酷的25个 CSS3 学习教程 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3 按钮实现方案 20个非常绚丽的 CSS3 特性应用演示 24款 ...

  4. CSS3萌宠系列，纯CSS3诞生的可爱狗狗

    好可爱一只小狗狗!睡觉憨憨的样子,听到细微的声音,立马竖起他的耳朵,看向远方.你是不是想拥有这样一只忠实而又可爱的狗狗呢? 可爱的你值得拥有! 上图是用什么软件制作的呢?用纯CSS+HTML你信吗? ...

  5. 18个强大的纯CSS3动画案例分享

    编辑整理 | web前端开发 在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...

  6. 纯CSS3制作的圆角效果按钮菜单

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 （4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...

    使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...

  8. 纯css3鼠标经过出现文字或图片鼠标移走消失

    2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...

  9. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

最新文章

  1. linux驱动模块编译入内核,Linux内核驱动模块编译
  2. 你熟悉Git常用的命令吗？(点赞+收藏）
  3. 计算机视觉专业术语总结：构建计算机视觉的知识体系
  4. P3979 遥远的国度
  5. 和我一起学《HTTP权威指南》——安全HTTP与HTTPS
  6. ismm rejection from cambridge
  7. MyCat分布式数据库集群架构工作笔记0016---高可用_单表存储千万级_海量存储_垂直分库划分原则
  8. 定期定量采购_采购的四种方法
  9. linux与s7-300,Siemens SIMATIC S7-300硬编码凭证安全限制绕过漏洞
  10. 破解电信光猫RG2010-CA超级管理员账号
  11. WPF 最简方法使用自己定制的 WPF 框架
  12. [渝粤教育] 内蒙古大学 微生物学 参考 资料
  13. 使用pip出现报错:Could not find a version that satisfies the...No matching distribution distributio...
  14. Kroll任命Richard Davies担任网络风险业务副董事总经理，常驻香港
  15. 运营经验|怎么把app运营好
  16. Modelarts培训第一次
  17. navigationBar 标题字体颜色设置
  18. c语言常见warning的消除方法及重要性
  19. 全面mysql初始化TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defau
  20. 星球专享 | 播放器 FFmpeg 依赖库的配置

热门文章

  1. Keras少量样本训练强大图像分类模型
  2. 入坑esp-01s 1.3寸OLED带农历时钟及天气显示（四）
  3. 工厂自动化的生产线属于计算机应用,计算机试题
  4. 新风医疗集团就私有化交易达成最终合并协议；​康泰生物成功分离新冠德尔塔变异株 | 医药健闻...
  5. 面向机密计算的Enclave容器技术栈
  6. ubuntu系统安装TIM，QQ，微信，迅雷，百度网盘
  7. Python图像库PIL的类Image的paste写法
  8. 《教妹学数据库系统》（五）逻辑数据库设计（上）
  9. 洛谷 P5594 【XR-4】模拟赛 记录
  10. es 聚合查询 java api_javaAPI操作ES分组聚合