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

最新推荐文章于 2023-06-14 20:54:09 发布
最新推荐文章于 2023-06-14 20:54:09 发布
阅读量207 收藏
点赞数
文章标签： android气球上升的属性动画

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;

}

weixin_39862097
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
animation属性介绍及纯css实现轮播图和动态流程
weixin_44218559的博客
11-18 755
简介 animation是css3的新属性，不兼容ie9及之前版本，这是一个简写属性，用于设置六个动画属性 div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ } 1.animation-name： 规定需要绑定要选择器的keyframe名称 2.anima...
Android 属性动画：实现小球坠落
happy_horse的博客
03-21 4675
一、要做什么项目需要实现的效果：小球坠落 1. 首先绘制小球--自定义View 绘制圆； 2. 模拟小球坠落--属性动画，重绘小球轨迹； 3. 修改小球颜色--实现自定义TypeEvaluator； 实现的简单效果如下：二、思考怎么做实现步骤如下：1、自定义 AnimPointView:/** * Created by Troy on 2017/3/20. * * 通过对对象进行值操作来
android弹球动画,Android 动画片（anim）详解
weixin_28846179的博客
05-25 634
最后一点是SDK中提到的，不要在onCreate中调用start，因为AnimationDrawable还没有完全跟Window相关联，如果想要界面显示时就开始动画的话，可以在onWindowFoucsChanged()中调用start()。3. Property Animation属性动画，这个是在Android 3.0中才引进的，它更改的是对象的实际属性，在View Animation(Twe...
translate()进行水平垂直居中
前端博客
09-10 2257
html <div class="load_box"> <div class="load_cont"> <div class="load_img"></div> 加载失败，稍后再试 </div> </div> css
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 5470
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
庆祝新年多彩气球上升CSS特效动画.zip
07-11
在这个案例中，我们将利用CSS3的新特性，如关键帧动画（@keyframes）和过渡效果（transition），来创建气球上升的动态效果。 1. **创建气球的基本形状**： 我们可以使用`border-radius`属性来创建圆形或椭圆形的...
纯CSS3热气球云朵动画特效
06-24
这个特效展示了如何利用CSS3的特性，如选择器、过渡、变换和关键帧动画，来实现卡通热气球在天空中漂浮以及云朵自然飘动的效果。 首先，我们需要理解CSS3中的基本元素。CSS3是层叠样式表的第三版，它引入了许多新的...
css3卡通皮卡丘气球动画特效.zip
07-11
在"css3卡通皮卡丘气球动画特效"中，皮卡丘和气球的动画效果主要依赖于以下CSS3技术： 1. **变换（Transforms）**：变换属性允许我们对元素进行旋转（rotate）、缩放（scale）、平移（translate）等操作。在这个...
气球向上漂CSS3特效
04-06
【气球向上漂CSS3特效】是一种利用CSS3技术实现的网页动态效果，它通过精巧的CSS3属性和选择器，将五颜六色的气球设计成漂浮上升的状态，为网页增添生动和趣味性，尤其适用于喜庆、节日等场合的网页背景装饰。...
android+水位动画,72.android 简单的可以显示水位上升下降的TextView，效果炫酷（两种方式）...
weixin_30390951的博客
05-27 467
//第一种方式： //就是上图这种效果。//第一步 写个自定义类TitanicTextView 继承TextViewpublic class TitanicTextView extends TextView {public interface AnimationSetupCallback {public void onSetupAnimation(TitanicTextView tita...
android自定义View之气球碰撞效果
07-14
算法步骤： 1、小球数量ballCount，可以设个最大值，在这个阈值内去随机数 2、小球圆心随机坐标（mX，mY）以及半径radius 3、小球在x方向和y方向的随机速度mSpeedX，mSpeedY 4、本次效果小球默认白色，通过alpha设置透明度，实际你们也可以通过随机颜色值达到五彩频繁的小球效果。 5、初始时给每个小球一个初始随机位置（不能超出屏幕）以及初始随机速度。 6、每个一段时间计算一下小球位置并刷新一下界面，当小球到达屏幕边沿则速度设为当前相反数达到反弹的效果。
Android实现气泡布局/弹窗效果 气泡尖角方向及偏移量可控
09-01
主要为大家详细介绍了Android实现气泡布局/弹窗效果，可控制气泡尖角方向及偏移量，感兴趣的小伙伴们可以参考一下
android气泡动画实现
01-04
程序的效果：点中屏幕中任意地方，就在点击地方显示爆炸效果。
爱心的不规则上升动画效果
11-16
爱心的不规则上升动画效果!!亲测！然后不是从底部上升，是从手指触屏到的位置。
android JBOX2D实现粒子碰撞特效实例
08-17
android JBOX2D实现粒子碰撞特效实例，亲自测试过，是可以用的，谢谢！
Android实现气泡漂浮动画，类似IOS Game Center中气泡动画
01-07 907
网上没找到，于是自己写了一个，简单的算法，利用 PropertyValuesHolder实现多个动画的集合，不多说，直接上代码吧，非常好理解： /** *气泡漂浮动画 *@paramview *@paramduration动画运行时间 *...
Android 绘制气泡
你全家都是博客
05-18 681
效果图 思想 1.绘制气泡 随机xy轴，r半径，速度，随机xy方向(方向就是x和y加减同一个随机偏移量)，随机透明度 2.气泡移动和复用气泡 在原来的xy+=或者-=偏移量，每一次便宜判断xy是否超过屏幕宽度和高度，超过就重新随机生成 3.代码实现 制气泡效果 public class QiPao extends View { public Paint paint; public DisplayMetrics displayMetrics; public Q.
android 气泡消失动画,Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果...
weixin_39973492的博客
05-27 243
上一节初步了解了Android端的贝塞尔曲线，这一节就举个栗子练习一下，仿QQ未读消息气泡，是最经典的练习贝塞尔曲线的东东，效果如下欢迎star~大体思路就是画两个圆，一个黏连小球固定在一个点上，一个气泡小球跟随手指的滑动改变坐标。随着两个圆间距越来越大，黏连小球半径越来越小。当间距小于一定值，松开手指气泡小球会恢复原来位置；当间距超过一定值之后，黏连小球消失，气泡小球继续跟随手指移动，此时手指松...
自定义气泡效果（BubbleView）
分享技术与经验的博客
04-15 825
代码如下： package com.example.myapplication; import android.content.Context; import android.graphics.BlurMaskFilter; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.ut
CSS3 热气球动画
最新发布
12-15
以下是一个使用CSS3实现的热气球动画的示例代码： ```html <!DOCTYPE html> <title>CSS3 Hot Air Balloon Animation <style type="text/css"> .hot-air-balloon { position: relative; width: 200px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值