用css动画画一个不规则的渐变动态圆

这是一个gif动图，加载时间有点长，请耐心等待

如何用div画一个圆

div原本是一个方的，如果要把它变成圆形就需用border-radius这个属性让元素变成圆角，设置的不同的值，会有不同的圆角。

让4个角都变成大小不一的圆角：需要一个公式

相同的颜色加起来的和等于100，角与角之间的过渡就会变得比较顺滑

代码展示

.box {width: 300px;height: 300px;background: pink;/* color: aquamarine; *//* 创建一个表示两种或多种颜色线性渐变的图片 基于0度逆时针旋转100deg，逆时针旋转pink从右边开始过渡起始位置0%开始让pink和aquamarine之间产生颜色渐变效果过渡起始位置50%开始让yellowgreen和yellowgreen之间产生颜色渐变效果*/background-image: linear-gradient(-100deg, pink 0%, yellowgreen 50%, aquamarine 100%);/* 圆的border-radius恒速过渡 */transition: border-radius 3s linear;/* 让4个角都变成大小不一的圆角相同的颜色加起来的和等于100*/border-radius: 60% 40% 50% 50% / 35% 45% 55% 65%;/* 50s一次无限次循环 */animation: go 50s infinite;/* border-radius:左上，右上，右下，左下border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius*/}
@keyframes go {0% {border-radius: 60% 40%50% 50% / 35% 45% 55% 65%;}25% {border-radius: 45% 55% 37% 63% / 56% 36% 54% 44%;}50% {border-radius: 59% 41% 68% 32% / 48% 52% 48% 62%;}75% {border-radius: 50% 50% 39% 61% / 61% 69% 31% 39%;}}

用css动画画一个不规则的渐变动态圆相关推荐

html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
animate.css 兼容ie,animate.css一个跨浏览器的CSS动画库
animate.css一个跨浏览器的CSS动画库.简单易用.虽然已Star,但每次使用使用时都要在stars里查找...当然啦,更多动画库可以参考这里. 如何使用要在网站中使用animate.css ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
vue2的css 动画库的基本使用方式
初级css动画库的使用一.前言二.本次使用的CSS动画库三.Vue2的基础应用知识 1. 一个组件和六个类名 (1)一个组件 (2)六个类名四.CSS动画库的基础应用 1.animate.cs ...
【CSS】绘制一个任意角度的扇形
现在有这样一个需求,我们要用html 和 css绘制这样一个图形(sry,这水印不知道咋去掉,o(╯□╰)o): 我们首先可能想到的就是先画三角形,然后使用border-radius,是的我也是这样想 ...
能解决 80% 需求的 10个 CSS动画库
作者:Patrik Kiss 译者:前端小智来源:dev 点赞再看,养成习惯本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,更多往期高 ...

用css动画画一个不规则的渐变动态圆

这是一个gif动图，加载时间有点长，请耐心等待

如何用div画一个圆

让4个角都变成大小不一的圆角：需要一个公式

代码展示

用css动画画一个不规则的渐变动态圆相关推荐

最新文章

热门文章