弹性果冻动画

最新推荐文章于 2021-05-25 16:20:22 发布
最新推荐文章于 2021-05-25 16:20:22 发布
阅读量431 收藏 1
点赞数
原文链接：https://yq.aliyun.com/articles/637497
版权

2018年3月6日

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性果冻动画</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                display: flex;
                font-size: 2rem;
                overflow: hidden;
            }
            .box {
                position: absolute;
                width: 100vw;
                height: 100vh;
                background-color: #fff;
                filter: blur(4vmin) contrast(100);
            }
            .main,
            .secondary {
                position: absolute;
                top: 50%;
                left: 50%;
                background-color: #000;
            }
            .main {
                width: 30vmin;
                height: 30vmin;
                margin: -15vmin;
                border-radius: 50%;
            }
            .secondary {
                width: 15vmin;
                height: 15vmin;
                margin: -7.5vmin;
                background-color: #000;
                border-radius: 50%;
                animation: move 1.5s infinite alternate cubic-bezier(0.18, 0, 0.26, 1);
            }
            .secondary:nth-child(1) {
                --degree: 0deg;
                animation-delay: 0s;
                background-color: red;
            }
            .secondary:nth-child(2) {
                --degree: 45deg;
                animation-delay: -0.375s;
                background-color: #ffbf00;
            }
            .secondary:nth-child(3) {
                --degree: 90deg;
                animation-delay: -0.75s;
                background-color: #80ff00;
            }
            .secondary:nth-child(4) {
                --degree: 135deg;
                animation-delay: -1.125s;
                background-color: #00ff40;
            }
            .secondary:nth-child(5) {
                --degree: 180deg;
                animation-delay: -1.5s;
                background-color: cyan;
            }
            .secondary:nth-child(6) {
                --degree: 225deg;
                animation-delay: -1.875s;
                background-color: #0040ff;
            }
            .secondary:nth-child(7) {
                --degree: 270deg;
                animation-delay: -2.25s;
                background-color: #8000ff;
            }
            .secondary:nth-child(8) {
                --degree: 315deg;
                animation-delay: -2.625s;
                background-color: #ff00bf;
            }
            .secondary:nth-child(9) {
                --degree: 360deg;
                animation-delay: -3s;
                background-color: red;
            }
            @keyframes move {
                0% {
                    transform: rotate(var(--degree)) translateY(0);
                }
                70%,
                100% {
                    transform: rotate(var(--degree)) translateY(-30vmin);
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="main"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
            <div class="secondary"></div>
        </div>

    </body>

</html>
ducode
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯CSS3弹性果冻动画特效.zip
07-11
纯CSS3弹性果冻动画特效是一款通过圆周运动不断变换的弹性动画特效。
android 实现果冻动画效果,Android果冻效果（阻尼动画）
weixin_42394054的博客
05-25 464
导语之前发了一个Drawable实现动画效果的帖子，有人找我要过相应圆弧绘制算法，仔细想想那个项目中有些地方还是值得分享出来的，趁现在项目不忙，就准备分享出来。只有一些算法的东西，代码不涉及具体业务效果如下(即Activity-A 进入 到Activity-B时会出现的动画效果如上)： 实现思路：主要由两个动画组成，背景动画和按钮动画背景动画背景动画可分解为位移上移和圆弧的改变位移上移可以交给Tr...
android 实现果冻动画效果,手把手教你绘制Android粘性果冻动画组件
weixin_36040444的博客
05-25 521
从事移动互联网开发已经快两年了，回想当初是Android带我走进了移动端的世界，后来由于自身对用户体验比较感兴趣，发现iOS更注重对图形渲染以及动画处理，所以转身自学iOS开发，之后也发布了几个iOS的组件库。但是Android进两年发展趋势猛增，在动画处理上也比以前有所改进，Android3.0之后开启了GPU硬件加速让图形渲染没以前那么卡顿，特别是5.0之后的material design更是...
Android果冻效果滑动控件
weixin_34050519的博客
12-14 128
类似于iOS有阻尼效果的滑动控件，一般我们比较亲切地称之为果冻控件 比较常见的地方，如微信里[我]的那个面板模块，即使没有再多的选项，也不会很生硬的不允许用户滑动。 微信是的处理方法是让用户滑动，但最终还是回滚到最初的地方，这样的效果很生动（毕竟成功还是取决于细节）。那么在安卓我们要怎么弄呢。下面为大家介绍一下JellyScrollView，是我继承ScrollView的一个有阻尼的效果的果冻滑动...
纯CSS3弹性果冻动画特效
06-24
在本文中，我们将深入探讨如何使用纯CSS3实现弹性果冻动画特效，这是一种极具吸引力的视觉效果，可以为网页设计增添动态与趣味性。CSS3是层叠样式表的第三个版本，它引入了许多新的功能，其中包括动画和过渡，使得...
纯CSS3弹性果冻动画特效特效代码
03-20
【CSS3弹性果冻动画特效】是一种利用现代浏览器支持的CSS3特性实现的创新视觉效果。这个特效通过结合CSS3的动画（Animations）和变换（Transforms）属性，创造出一种仿佛果冻般的动态效果，物体在屏幕上进行圆周运动...
css3弹性果冻按钮动画特效特效代码
03-20
"css3弹性果冻按钮动画特效特效代码"是利用CSS3的强大功能来实现的一种创新交互设计。这种特效使得按钮在用户鼠标悬停时呈现出如同果冻般的弹性动效，既增加了用户的互动体验，也提升了网站的视觉吸引力。 首先，...
Android实现果冻滑动效果的控件
09-01
给大家主要介绍了利用Android如何实现果冻效果滑动效果的控件，实现的效果类似于iOS有阻尼效果的滑动控件，一般我们比较亲切地称之为果冻控件，常见的如微信里[我]的那个面板模块，即使没有再多的选项，也不会很生硬的不允许用户滑动。下面来一起看看吧。
Android果冻效果（阻尼动画）
RD哥哥的博客
12-19 6646
导语 之前发了一个Drawable实现动画效果的帖子，有人找我要过相应圆弧绘制算法，仔细想想那个项目中有些地方还是值得分享出来的，趁现在项目不忙，就准备分享出来。 效果如下（即Activity-A 进入 到Activity-B时会出现的动画效果如上）：实现思路：主要由两个动画组成，背景动画和按钮动画 背景动画背景动画可分解为位移上移和圆弧的改变 位移上移可以交给TranslateAnimatio
jq实现果冻抖动效果
04-17
NULL 博文链接：https://zhibin07.iteye.com/blog/1832402
Jello-Physics unity 模拟柔体 果冻效果插件
11-06
可以模拟可拖拽，可点击，可挤压的果冻之类的柔体效果的插件。unity package使用时拖入unity工程即可。
android 实现果冻动画效果,Android高仿path小球刷新效果，类似IOS果冻效果
weixin_31433527的博客
05-25 372
前方高能，老司机~一.概述相信用过path app的人都会被其精美的效果给吸引到，作为一名用户，我首先被其吸引都的就是其时间轴下拉刷新后类似于ios的果冻效果。同时作为一名coder，我们更应该好奇它是怎么实现的。于是乎，在百度的指引下，并没有什么斩获，既然如此，那就由我们自己撸出来吧！下面看看我们自己撸出来的效果和path原装效果的区别吧。(注意重点在小球的果冻效果哦O(∩_∩)O)这里写图片描...
android 实现果冻动画效果,谈谈iOS中粘性动画以及果冻效果的实现
weixin_32860759的博客
05-25 304
在最近做个一个自定义PageControl——KYAnimatedPageControl中，我实现了CALayer的形变动画以及CALayer的弹性动画，效果先过目：先做个提纲：第一个分享的主题是“如何让CALayer发生形变”，这个技术在我之前一个项目 ———— KYCuteView 中有涉及，也写了篇简短的实现原理博文。今天再举一个例子。之前我也做过类似果冻效果的弹性动画，比如这个项目—— K...
android 实现果冻动画效果,Android实现果冻滑动效果的控件
weixin_39601194的博客
05-25 231
不管是安卓系统还是IOS系统都会有果冻滑动效果给用户展现，但是在Android中程序员要怎么实现呢？大家了解操作方法吗？别着急，本文是爱站技术频道小编为大家带来最专业的介绍，可别错过了哦！在微信是的处理方法是让用户滑动，但最终还是回滚到最初的地方，这样的效果很生动(毕竟成功还是取决于细节)。那么在安卓我们要怎么弄呢。下面为大家介绍一下JellyScrollView，是我继承ScrollView的一...
Android类似IOS的果冻效果
烈火苍穹的博客
12-29 696
SlidingLayout是一种Android平台的View控件，可以帮助你实现类似微信网页浏览的下拉功能，也可以帮助你实现类似iOS中UITableView的下拉上拉弹跳的果冻效果。SlidingLayout完美兼容Android自带库和兼容库的所有View组件，包括RecyclerView、ListView、ScrollView以及WebView等等。SlidingLayout简单易用，最低支持
需求：实现果冻一样的动画效果
Coding_Physical的专栏
11-03 273
需求展现： 下面的红色区域是随着蓝色点移动进行画线，需要增加手势，监听蓝色点的移动frame @property (nonatomic, strong) UIView *pointView; @property (nonatomic, strong) CAShapeLayer *shapeLayer; @property (nonatomic, strong) CADisplayLink *displayLink; CADisplayLink 是用来监听监听蓝色点的移动f...
果冻弹簧效果动画
fuweihan00的博客
09-11 977
//在点击button时加入这句话就行 // 果冻弹簧效果动画     CABasicAnimation *scaleAnimation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];     scaleAnimation1.fromValue = [NSNumber numberWithFloat:1.0];
Unity 动画模拟果冻抖动效果
我想养只猫
11-11 5619
最近游戏中要实现果冻动画,网上看了一大推资料,好几个都是用shader做的(本人不懂shader),把他们的shader捞下来结果完全不是那么回事(感觉送到了欺骗).自己又尝试修改他们的shader(后来发现是赶鸭子上架,就放弃了);最后转过头一想,不就是动画么,直接用dotween做不就行了,也许没有shader做出的那么完美,不过能实现需求不就行了(安慰自己),废话不多说,直接上代码(包括一个...
打造生动Android体验：JellyScrollView实现果冻滑动效果
本文档介绍了如何在Android中实现类似于微信中果冻滑动效果的控件，即一种具有阻尼效果的滚动行为。作者提到的是一个名为JellyScrollView的自定义控件，它基于ScrollView进行扩展，提供了一种生动的交互体验。主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值