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

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

background-color: #221e40;

}

*:after,

*::before {

box-sizing: border-box;

}

.centered {

width: 100%;

height: 100px;

position: absolute;

top: 50%;

margin-top: -50px;

}

.morph {

width: 100%;

height: 100px;

position: relative;

}

.morph span {

position: absolute;

display: block;

margin-left: 0;

width: 100px;

height: 100px;

opacity: 0.7;

animation: 4s morph cubic-bezier(0.5, 1, 0.5, 0) infinite;

border: 6px solid;

mix-blend-mode: screen;

}

.morph span:nth-child(1) {

border-color: #ff2074;

background-color: rgba(255, 32, 116, 0.4);

}

.morph span:nth-child(2) {

border-color: #20ffb3;

background-color: rgba(32, 255, 179, 0.4);

animation-delay: 0.1s;

}

.morph span:nth-child(3) {

border-color: #ffd820;

background-color: rgba(255, 216, 32, 0.4);

animation-delay: 0.2s;

}

/*Animation*/

@keyframes morph {

0% {

left: 0;

border-radius: 50%;

transform: rotate(0deg);

}

50% {

left: 100%;

margin-left: -100px;

border-radius: 0%;

transform: rotate(360deg);

}

100% {

left: 0;

border-radius: 50%;

transform: rotate(0deg);

}

android圆形变方形动画,CSS3 简单的圆形/方形变形动画相关推荐

css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
html中如何实现放大动画,CSS3实现点击放大的动画实例
这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...
html实现圆圈逐渐放大,CSS3 简单的圆形放大旋转变换
CSS 语言: CSSSCSS 确定 html, body { height: 100%; } body { background: #fefefe; display: -webkit-box; di ...
html中怎么制作太阳月亮交替,CSS3 简单的地球/太阳/月亮动画
CSS 语言: CSSSCSS 确定 body { background-color: MidnightBlue; } .sun { position: absolute; left: 30%; to ...
android气球上升的属性动画,CSS3 不断有气球上升的动画背景效果
CSS 语言: CSSSCSS 确定 html { font-size: 1.2vh; } body { margin: 0; height: 100vh; width: 100vw; backgro ...
html 人物行走动画,CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复.大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势. 当我们需要用计算机来模拟人类这个最简单的动作时,通 ...
css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画
CSS 语言: CSSSCSS 确定 body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; backgr ...
html 动画过度转换的用法,css（动画，过渡，转换）
@keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性以百分比来规定改变发生的时间,或者通过关键词"from"和"to" ...
js svg语音波动动画_整理一些有趣的svg动画
原因原因很简单,我不想成为一个api前端工程师,想能够多学一点.偶尔的喜欢做一些html可能难以完成的效果,去年用canvas写了一份简单的gant图,感觉还不错.后来画流程图的时候搜索各大网站发现 ...

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

android圆形变方形动画,CSS3 简单的圆形/方形变形动画相关推荐

最新文章

热门文章