CSS

语言：

CSSSCSS

确定

html {

font-size: 1.2vh;

}

body {

margin: 0;

height: 100vh;

width: 100vw;

background: -webkit-linear-gradient(white, #e0d1d1);

background: linear-gradient(white, #e0d1d1);

box-shadow: inset 0 5vh 30vh 5vh #d6c2c2;

font-family: "Share Tech Mono", monospace;

color: white;

font-size: 2rem;

}

body:after {

z-index: 1;

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: -webkit-radial-gradient(circle, #ffffff 40%, #e0d1d1);

background-image: radial-gradient(circle, #ffffff 40%, #e0d1d1);

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-transform: scaleY(1.5) scaleX(1);

transform: scaleY(1.5) scaleX(1);

opacity: 0.5;

}

.center {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

text-align: center;

line-height: 0.9;

z-index: 3;

}

h1 {

font-size: 15rem;

margin: 0;

padding: 0;

color: #ff6666;

}

h2 {

font-size: 9rem;

margin: 0;

padding: 0;

color: #ff6666;

}

h1,

h2 {

text-shadow: 0rem 4rem 2rem rgba(140, 115, 115, 0.2);

}

.balloon {

top: 100vh;

opacity: 0.95;

position: absolute;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

width: 10rem;

height: 10rem;

background: #faf9f9;

border-radius: 10rem 10rem 4rem 10rem;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2);

-webkit-animation: float1 10s infinite ease-out;

animation: float1 10s infinite ease-out;

}

@-webkit-keyframes float1 {

0% {

-webkit-transform: rotate(40deg) translateY(0) translateX(0);

transform: rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

}

}

@keyframes float1 {

0% {

-webkit-transform: rotate(40deg) translateY(0) translateX(0);

transform: rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

transform: rotate(50deg) translateY(-85vh) translateX(-85vh);

}

}

@-webkit-keyframes float2 {

0% {

-webkit-transform: rotate(55deg) translateY(0) translateX(0);

transform: rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

}

}

@keyframes float2 {

0% {

-webkit-transform: rotate(55deg) translateY(0) translateX(0);

transform: rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

transform: rotate(45deg) translateY(-85vh) translateX(-85vh);

}

}

@-webkit-keyframes float3 {

0% {

-webkit-transform: rotate(45deg) translateY(0) translateX(0);

transform: rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

}

}

@keyframes float3 {

0% {

-webkit-transform: rotate(45deg) translateY(0) translateX(0);

transform: rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

transform: rotate(35deg) translateY(-85vh) translateX(-85vh);

}

}

@-webkit-keyframes floatfront1 {

0% {

-webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

}

}

@keyframes floatfront1 {

0% {

-webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(40deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh);

}

}

@-webkit-keyframes floatfront2 {

0% {

-webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

}

}

@keyframes floatfront2 {

0% {

-webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(55deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh);

}

}

@-webkit-keyframes floatfront3 {

0% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

}

}

@keyframes floatfront3 {

0% {

-webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

transform: scale(1.3) rotate(45deg) translateY(0) translateX(0);

}

100% {

-webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh);

}

}

.balloon:after {

content: '';

position: absolute;

bottom: -.05rem;

right: -.05rem;

border-top: 0.5rem solid transparent;

border-bottom: 0.5rem solid transparent;

border-right: 0.9rem solid #dbbdbd;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

border-radius: 1rem;

}

.holder.back {

position: relative;

z-index: 2;

}

.holder.back .balloon:nth-child(1) {

left: 50%;

-webkit-animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

.holder.back .balloon:nth-child(2) {

left: 20%;

-webkit-animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 3.2s;

animation-delay: 3.2s;

}

.holder.back .balloon:nth-child(3) {

left: 90%;

-webkit-animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 7.7s;

animation-delay: 7.7s;

}

.holder.back .balloon:nth-child(4) {

left: 70%;

-webkit-animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 1.3s;

animation-delay: 1.3s;

}

.holder.back .balloon:nth-child(5) {

left: 35%;

-webkit-animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 5.6s;

animation-delay: 5.6s;

}

.holder.front {

position: relative;

z-index: 4;

}

.holder.front .balloon {

box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 8rem 8rem 4rem rgba(153, 102, 102, 0.2);

}

.holder.front .balloon:nth-child(1) {

left: 80%;

-webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 2.8s;

animation-delay: 2.8s;

}

.holder.front .balloon:nth-child(2) {

left: 35%;

-webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 1.4s;

animation-delay: 1.4s;

}

.holder.front .balloon:nth-child(3) {

left: 7%;

-webkit-animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 7.7s;

animation-delay: 7.7s;

}

.holder.front .balloon:nth-child(4) {

left: 46%;

-webkit-animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 6.3s;

animation-delay: 6.3s;

}

.holder.front .balloon:nth-child(5) {

left: 75%;

-webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);

-webkit-animation-delay: 8.9s;

animation-delay: 8.9s;

}

.sig {

position: fixed;

bottom: 8px;

right: 8px;

text-decoration: none;

font-size: 12px;

font-weight: 100;

font-family: sans-serif;

color: rgba(255, 255, 255, 0.4);

letter-spacing: 2px;

}

android气球上升的属性动画,CSS3 不断有气球上升的动画背景效果相关推荐

  1. html中如何实现放大动画,CSS3实现点击放大的动画实例

    这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...

  2. android圆形变方形动画,CSS3 简单的圆形/方形变形动画

    CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; background-color: #221e40; } *, *:after, ...

  3. html 人物行走动画,CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复.大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势. 当我们需要用计算机来模拟人类这个最简单的动作时,通 ...

  4. css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画

    CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...

  5. CSS3打造的10种创意动画菜单效果

    CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...

  6. Android属性动画赏析,Android源码分析—属性动画的工作原理

    前言 本文为Android动画系列的最后一篇文章,通过对源码的分析,能够让大家更深刻地理解属性动画的工作原理,这有助于我们更好地使用属性动画.但是,由于动画的底层实现已经深入到jni层,并且涉及到显示 ...

  7. Android Studio属性动画,Android开发-RecyclerView-AndroidStudio(六)属性动画(3)AddDuration

    RecyclerView增加数据: MyAdapter.java: package com.iwanghang.recyclerviewdemo; import android.content.Con ...

  8. CSS3动画的常见属性（CSS3）

    CSS3动画的常见属性(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset ...

  9. css情景动画,css3中的动画属性animation应用场景及编写代码教程

    讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...

最新文章

  1. EBS-使用 fnd_user_pkg API 创建用户，添加职责，修改用户
  2. RubyMotion 指南：API 驱动开发示例
  3. 用SQL语言建表，课1
  4. IIS -2147467259 (0x80004005)
  5. loj10200. 「一本通 6.2 练习 3」Goldbach's Conjecture
  6. java金额类型_Java中存储金额用什么数据类型？
  7. vue 条件渲染 v-if | v-show
  8. stateflow被激活问题探究
  9. 鸿蒙报名什么时候推送,鸿蒙系统手机版什么时候推送？鸿蒙系统手机版推送时间详解...
  10. 【算法大赛直播周】大赛评委分享广告技术干货，精彩不容错过！
  11. 使用GDAL进行RPC坐标转换
  12. python是什么课程-python是什么(python是什么课程)
  13. ODAC （V9.5.15) 学习笔记（二十一）数据复制
  14. 【对讲机的那点事】玩无线电，你知道无线电信号是怎样发送和接收的?
  15. apdu 移动sim_SIM卡APDU指令【转】
  16. 【C++】重定义，重载，重写
  17. Winmail + Foxmail搭建企业内部邮件系统
  18. sever企业版密钥 sql_SQL Server2016企业版 附全版本key(转载)
  19. 控制WINDOWS，使电脑说话的小玩意
  20. linux eclipse glib.h,eclipse Glib

热门文章

  1. 百度刷相关wf5搜_引流一哥：微信搜一搜seo排名优化
  2. 我居然不知道Vue3可以使用hooks函数实现代码复用？
  3. 计算机视觉小白的心声
  4. 直播 | 基于 GitLab 的 CI 实践
  5. vs编译freeswitch 的mod_sofia库。
  6. java神雕侠侣1古墓情缘游戏攻略_新神雕侠侣完全攻略
  7. R ggplot2 | 用geom_sf()绘制地图
  8. Python+OpenCV的基础图像处理操作汇总
  9. HTB-Forest
  10. QML QZXing 二维码扫描