android作风扇旋转动画,CSS3 彩色风扇片旋转动画

最新推荐文章于 2022-10-23 14:02:13 发布
最新推荐文章于 2022-10-23 14:02:13 发布
阅读量442 收藏
点赞数
文章标签： android作风扇旋转动画
这段CSS代码展示了如何使用关键帧动画创建一个由四个不同颜色的方块组成的旋转效果。每个方块在不同的时间点从无到有，逐渐展现，然后消失，形成一种动态的视觉体验。通过调整动画时间和延迟，可以实现平滑连续的循环播放。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

/*just code for fun*/

#circle_1 {

position: absolute;

background-color: #de1a00;

top: 50%;

-webkit-animation: circle1A 6.54s infinite linear;

}

@-webkit-keyframes circle1A {

border-radius: 100% 100% 100% 100%;

0% {

left: 0%;

height: 0px;

width: 0px;

-webkit-transform: rotate(45deg);

border-radius: 100% 100% 100% 100%;

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

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

}

26% {

height: 50px;

width: 50px;

left: 50%;

border-radius: 100% 0% 100% 100%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(45deg);

}

41% {

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(495deg);

border-radius: 100% 0% 100% 100%;

}

56% {

height: 50px;

width: 50px;

left: 50%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(945deg);

border-radius: 100% 0% 100% 100%;

}

91% {

left: 100%;

height: 0px;

width: 0px;

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

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

-webkit-transform: rotate(945deg);

}

}

#circle_2 {

position: absolute;

background-color: #194dc5;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-webkit-animation: circle2A 6.54s infinite linear;

}

@-webkit-keyframes circle2A {

border-radius: 100% 100% 100% 100%;

0%, 3% {

left: 0%;

height: 0px;

width: 0px;

-webkit-transform: rotate(45deg);

border-radius: 100% 100% 100% 100%;

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

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

}

29% {

height: 50px;

width: 50px;

left: 50%;

border-radius: 100% 0% 100% 100%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(45deg);

}

44% {

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(495deg);

border-radius: 100% 0% 100% 100%;

}

59% {

height: 50px;

width: 50px;

left: 50%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(945deg);

border-radius: 100% 0% 100% 100%;

}

94% {

left: 100%;

height: 0px;

width: 0px;

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

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

-webkit-transform: rotate(945deg);

}

}

#circle_3 {

position: absolute;

background-color: #33a93b;

top: 50%;

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

-webkit-animation: circle3A 6.54s infinite linear;

}

@-webkit-keyframes circle3A {

border-radius: 100% 100% 100% 100%;

0%, 6% {

left: 0%;

height: 0px;

width: 0px;

-webkit-transform: rotate(45deg);

border-radius: 100% 100% 100% 100%;

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

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

}

32% {

height: 50px;

width: 50px;

left: 50%;

border-radius: 100% 0% 100% 100%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(45deg);

}

47% {

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(495deg);

border-radius: 100% 0% 100% 100%;

}

62% {

height: 50px;

width: 50px;

left: 50%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(945deg);

border-radius: 100% 0% 100% 100%;

}

97% {

left: 100%;

height: 0px;

width: 0px;

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

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

-webkit-transform: rotate(945deg);

}

}

#circle_4 {

position: absolute;

background-color: #ffcf00;

top: 50%;

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

-webkit-animation: circle4A 6.54s infinite linear;

}

@-webkit-keyframes circle4A {

border-radius: 100% 100% 100% 100%;

0%, 9% {

left: 0%;

height: 0px;

width: 0px;

-webkit-transform: rotate(45deg);

border-radius: 100% 100% 100% 100%;

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

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

}

35% {

height: 50px;

width: 50px;

left: 50%;

border-radius: 100% 0% 100% 100%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(45deg);

}

50% {

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(495deg);

border-radius: 100% 0% 100% 100%;

}

65% {

height: 50px;

width: 50px;

left: 50%;

-webkit-transform-origin-x: 105%;

-webkit-transform-origin-y: -5%;

-webkit-transform: rotate(945deg);

border-radius: 100% 0% 100% 100%;

}

100% {

left: 100%;

height: 0px;

width: 0px;

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

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

-webkit-transform: rotate(945deg);

}

}

馒猫子
关注
css3 y轴旋转 动画,CSS3过渡旋转透视2d3d动画等效果的实例代码
weixin_33116629的博客
08-03 1167
才发现原来CSS3这么好用…CSS3盒子模型CSS3中可以通过 box-sizing 来指定盒模型，有2个值，即可指定为 content-box、border-box，这样计算盒子大小的方式就发生了改变。box-sizing: content-box 盒子大小为 width+padding+border(默认)box-sizing: border-box 盒子大小为 width (前提paddin...
Android风扇开发
01-14
Android风扇开发。
Android实现风扇旋转
m0_58601997的博客
10-23 922
Android实现风扇旋转
Android实现风扇叶片移动效果水平列表.zip
07-10
Android实现风扇叶片移动效果水平列表使用风扇布局管理器，您可以实现水平列表，其项目像风扇叶片一样移动（以您选择的半径圆形方式）。为了对运动产生轻微的混乱效果，可以为列表项设置角度。
android作业画一个简单风扇,太热了！程序猿给女朋友做了个智能小风扇
weixin_39924779的博客
06-04 152
private InitListener mInitListener = new InitListener() {@Overridepublic void onInit(int code) {Log.d(TAG, “SpeechRecognizer init() code = ” + code);if (code == ErrorCode.SUCCESS) {findViewById(R.id.i...
安卓线程、Handler应用实现风扇动图。
qq_33829353的博客
10-25 1347
需求：点击“打开风扇”按钮，风扇图片会转起来，再点击“关闭风扇”，风扇会停止转动。 布局代码如下： <ImageView android:id="@+id/fanImg" android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/fan1" /> <Button android:i
纯CSS3风扇旋转动画特效
06-24
【纯CSS3风扇旋转动画特效】是一种利用现代浏览器支持的CSS3特性来实现的动态视觉效果，主要用于模拟卡通台式电风扇的旋转动作。在网页设计中，这种动画可以增加用户体验，使页面更加生动有趣。下面我们将深入探讨...
纯CSS3实现的3D风扇旋转动画效果源码.zip
10-31
本资源“纯CSS3实现的3D风扇旋转动画效果源码.zip”提供了使用CSS3实现3D风扇旋转动画的示例代码，这对于前端开发者来说是一个极具价值的学习和参考材料。 首先，我们要了解CSS3中的3D转换。3D转换是CSS3的一个关键...
CSS3风水罗盘旋转动画特效.rar
最新发布
06-23
CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效....
纯CSS3彩色旋转加载动画特效特效代码
03-20
【标题】纯CSS3彩色旋转加载动画特效特效代码 在网页设计中，加载动画是提升用户体验的重要元素之一，它能够给用户带来视觉上的反馈，告知他们网页正在加载中。"纯CSS3彩色旋转加载动画特效"就是一种利用现代浏览器...
安卓自定义view练习之风扇进度条
zlwnew的博客
04-12 301
效果图如下： 加载中。。。 FansLoadingView主体代码： public class FansLoadingView extends View { private Paint progressPaint; private Paint progressRectPaint; private Paint progressStrokePaint; private Paint progressShaderPaint; private RectF progress
Android 伪边框渐变色旋转特效
weixin_38622593的博客
08-21 696
原理： 使用渐变色画个圆加动画 效果： public class RunView extends View { private int maxHeight = 0; private int maxWidth = 0; private int animatedValue; private int aimHeight = 0; float width, height; private int num = 20; private int sta
风扇空调照明灯动画的创建
qq_57095336的博客
04-15 2252
1.风扇动画的创建 具体都见图片注释文字 方法一：通过xml文件来实现 （白底的为老师的 黑底的为我自己的代码） 方法二：通过代码来实现 2.空调动画的创建 3.照明灯动画的实现 方法一：通过xml来实现 方法二：通过代码来实现 实实在在的界面动画显示如下： ...
android扇形动画弹出icon的功能
jc3798552的博客
03-03 2403
1，设置布局 <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:layout_marginRight="12dp" > <RelativeLay
Android 自定义View练习：风扇吹花瓣加载中loading进度条绘制
Keep Learning , Keep Improving !
10-23 2345
package com.louisgeek.louiscustomviewstudy;import android.animation.ValueAnimator; import android.content.Context; import android.content.res.Resources; import android.content.res.TypedArray; import an
android控件旋转一圈动画封装
让创意的火花散落到屏幕的每一个dp
07-25 3758
简单的封装，从fromDegrees 转toDegrees 延续时间durationMillismIv_logo.startAnimation(getRotateAnimation(0, 360, 500)); public static Animation getRotateAnimation(float fromDegrees, float toDegrees, int duratio
android 风吹的动画,最炫Material Design风过渡动画
weixin_29164843的博客
05-27 536
在Activity的跳转过程中，需要用动画，普遍都是用overridePendingTransition。而Android有Material Design风格的动画，效果更生动，毕竟最炫MD风。通过Activity的过度动画ActivityOptions，以及兼容包ActivityOptionsCompat实现。动画效果之一：giphy.gifActivityOptionsCompat带有5种类型...
Android-25种开源炫酷动画框架
u011897782的博客
12-25 1801
动画 侧滑菜单
CSS3 3D风扇旋转动画效果源码实现
资源摘要信息:"纯CSS3实现的3D风扇旋转动画效果源码.zip" CSS3（层叠样式表第三版）是一种用于描述网页展示的样式表语言，它引入了许多新的功能，比如对图形的渲染、动画和变换的支持。这些功能允许前端开发者在不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值