纯CSS实现背景渐变、球和阶梯的跳动

作者：马光佳
撰写时间：2019.1.17
开发工具与关键技术：MicrossftVisualStudio、animation与@keyframes的配合使用

背景动画渐变
（1）background-size:100%时的背景图片
先把背景颜色设置为100%，颜色的分布图如下：

代码如下:
把body设置为最大的背景，背景有五种颜色，都设置半透明，还让每一种颜色都有45度的斜度，并且让每一种颜色都有自己的渐散范围（度）；代码已注释

body {height: 100%;display: flex;align-items: center;/*垂直对齐*/justify-content: center;/*内容对齐*//*linear-gradient：线性渐变；设置每一种颜色有一个斜度并且透明*/background: linear-gradient(45deg,rgba(111, 199, 181, 0.82) 0%,rgba(19, 189, 206, 0.82), 20%,rgba(0, 148, 217, 0.82) 40%, rgba(90, 54, 148, 0.82) 60%, rgba(238, 77, 116, 0.82) 80%, rgba(245, 140, 88, 0.82) 100%);            background-size:100%;/* 将背景放大 */           background-position: 0% 100%; /* 设置定位显示背景左下角颜色区域 */position: relative;            animation: gradient 7.5s ease-in-out infinite;/* 设置无限轮播动画 */
}

（2）background-size:400%时的背景图片
把背景颜色设置为400%，颜色的分布图如下：

代码如下：

把body的背景放大为400%，结合animation与@keyframes的使用，使得背景按固定的方向以无限循环的状态展示动画效果，代码已注释

body {height: 100%;display: flex;align-items: center;justify-content: center;/*linear-gradient：线性渐变；设置每一种颜色有一个斜度并且透明*/background: linear-gradient(45deg,rgba(111, 199, 181, 0.82) 0%,rgba(19, 189, 206, 0.82), 20%,rgba(0, 148, 217, 0.82) 40%, rgba(90, 54, 148, 0.82) 60%, rgba(238, 77, 116, 0.82) 80%, rgba(245, 140, 88, 0.82) 100%);            background-size: 400%;/* 将背景放大 */           background-position: 0% 100%; /* 设置定位显示背景左下角颜色区域 */position: relative;            animation: gradient 7.5s ease-in-out infinite;/* 设置加速然后减速的轮播无限动画并且来回的时间为7.5s*/}        /*设置gradient在0%-100%之间的运动状态*/@keyframes gradient {0% {background-position: 0% 100%;}/*线性背景从左下角以匀速往右上角做渐变运动*/50% {background-position: 100% 0%;}/*线性背景从右上角以匀速往左下角做渐变运动*/100% {background-position: 0% 100%;}}

球和阶梯的动画跳动
（1）搭建五根柱子和球
搭建好的图片如下：

柱子和球的结构
代码如下：

<div class="loader"> @*第一条柱子*@<div class="loader_bar"></div>@*第二条柱子*@<div class="loader_bar"></div>@*第三条柱子*@<div class="loader_bar"></div>@*第四条柱子*@<div class="loader_bar"></div>@*第五条柱子*@<div class="loader_bar"></div>   @*球*@    <div class="loader_ball"></div>
</div>

柱子高度的设置：
transform:scale(x,y)改变y轴就是改变高度，原本高度为1，以（0.2,0.4,0.6,0.8,1）分别设置第一条柱子到最后一条柱子的高度，并且要设置每一根柱子以底部对齐（transform-origin:bottom;）形成一个规范的阶梯形状
代码如下：

 /*柱子的样式*/
.loader_bar{width:10px;height:50%;background-color:#fff;position:absolute;bottom:0px;transform-origin:bottom;/*起始点对齐*/box-shadow:1px 1px 0 rgba(0,0,0,0.2);
}
/*球的样式*/
.loader_ball{width:10px;height:10px;border-radius:50%;background:#fff;position:absolute;bottom:10px;left:0px;animation:ball 4s infinite;/*动画*/
}.loader_bar:nth-child(1){/*第一条柱子*/left:0;transform:scale(1,0.2);/*改变y轴的高度*/animation:barUp1 4s infinite;/*让架构（barUp1）在4s无限运动*/}.loader_bar:nth-child(2){/*第二条柱子*/left:15px; transform:scale(1,0.4);animation:barUp2 4s infinite;}.loader_bar:nth-child(3){/*第三条柱子*/left:30px;transform:scale(1,0.6);animation:barUp3 4s infinite;}.loader_bar:nth-child(4){/*第四条柱子*/left:45px;transform:scale(1,0.8);animation:barUp4 4s infinite;}.loader_bar:nth-child(5){/*第五条柱子*/left:60px;transform:scale(1,1);animation:barUp5 4s infinite;/*无限动画*/}

球以匀速无限循环的状态代码如下
上面设置球（animation:ball 4s infinite;）以变量ball在4s做无限循环运动，然而用（@keyframes ball）的配合，让球做固定线路无限运动
代码如下：

@keyframes ball{/*球跳的去程*/0%{transform:translate(0,0);}         5%{transform:translate(8px,-14px);}10%{/*实现踩下的效果*/transform:translate(15px,-10px);}15%{transform:translate(23px,-24px);              }20%{/*实现踩下的效果*/transform:translate(30px,-20px);}25%{transform:translate(38px,-34px);}30%{/*实现踩下的效果*/transform:translate(45px,-30px);}35%{transform:translate(53px,-44px);}40%{/*实现踩下的效果*/transform:translate(60px,-40px);}         50%{transform:translate(60px,0px);}/*球跳的回程*/55%{transform:translate(53px,-14px)}60%{/*实现踩下的效果*/transform:translate(45px,-10px)}65%{transform:translate(37px,-24px)}70%{/*实现踩下的效果*/transform:translate(30px,-20px)}75%{transform:translate(22px,-34px)}80%{/*实现踩下的效果*/transform:translate(15px,-30px)}85%{transform:translate(7px,-44px)}90%{/*实现踩下的效果*/transform:translate(0px,-40px)}100%{transform:translate(0,0)}}

1. 实现踩下效果的一个思路图

2. 无踩下效果的思路图

柱子高度在4s后的高度变化代码如下：
上面已设置每一个柱子都有一个变量（animation:barUp1 4s infinite;）去结合（@keyframes）的使用，设置百分百来改变柱子在那一刻的高度，并且用代码设置：（transform:scale(x,y)
代码如下：

@keyframes barUp1{/*第一条柱子*/0%{/*从左开始运动*/transform:scale(1,0.2);/*当球运动4s内时柱子高度为原来的0.2倍*/}40%{transform:scale(1,0.2);/*当球运动4s内时柱子高度为原来的0.2倍*/}50%{/*4s后结束，球将从右以0s开始运动*/transform:scale(1,1)/*当球运动4s时柱子高度变成原来的高度*/}90%{transform:scale(1,1);/*当球运动4s内时柱子高度为原来的高度*/}100%{transform:scale(1,0.2);/*当球运动4s时柱子高度变成原来的0.2倍*/}
}@keyframes barUp2{/*第二条柱子*/0%{/*从左开始运动*/transform:scale(1,0.4);/*当球运动4s内时柱子高度为原来的0.4倍*/}40%{transform:scale(1,0.4);}50%{/*4s后结束，球将从右以0s开始运动*/transform:scale(1,0.8);/*当球运动4s时柱子高度变成原来的0.8倍*/}90%{transform:scale(1,0.8);}100%{transform:scale(1,0.4);}
}@keyframes barUp3{/*第三条柱子*/0%{/*从左开始运动*/transform:scale(1,0.6);/*当球运动4s内时柱子高度为原来的0.6倍*/}             100%{transform:scale(1,0.6);}
}@keyframes barUp4{/*第四条柱子*/0%{/*从左开始运动*/transform:scale(1,0.8);/*当球运动4s内时柱子高度为原来的0.8倍*/}40%{transform:scale(1,0.8);}50%{/*4s后结束，球将从右以0s开始运动*/transform:scale(1,0.4);/*当球运动4s时柱子高度变成原来的0.4倍*/}90%{transform:scale(1,0.4);}100%{transform:scale(1,0.8);/*当球运动4s时柱子高度为原来的0.8倍*/}
}@keyframes barUp5{/*第五条柱子*/0%{/*从左开始运动*/transform:scale(1,1);/*当球运动4s内时柱子高度为原来的高度*/}40%{transform:scale(1,1);}50%{/*4s后结束，球将从右以0s开始运动*/transform:scale(1,0.2);/*当球运动4s时柱子高度变成原来的0.2倍*/}90%{transform:scale(1,0.2);}100%{transform:scale(1,1);/*当球运动4s时柱子高度为原来的高度*/}
}

效果图

纯CSS实现背景渐变、球和阶梯的跳动相关推荐

纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色 ...
纯CSS 红砖背景墙
theme: smartblue 持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情本文简介点赞 + 收藏 + 关注 = 学会了先上图看看效果再介绍我 ...
CSS 实现背景渐变透明
背景透明渐变 /* 第一个参数是渐变开始的位置 top 就是从上往下开始渐变,当然还有其他参数, eg: bottom第二个参数是rgba(0,0,0,1)0% 黑色, 透明度为1, 0% 表示渐变开 ...
css样式,背景渐变+图片,三角-实心-空心
渐变背景+背景图片 background: url("../../assets/images/index/arrowLeft.png") repeatno-repeat,linea ...
css两张图片怎么合在一起_web前端入门到实战：纯CSS实现两个球相交的粘粘效果...
这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了). 从 ...
例子---纯CSS实现加载球
小伙伴们看到那些页面上炫酷的加载球,是不是都觉得美美的很精致,很想自己动手写一个属于自己的加载球,但是又学业繁忙而找不到时间去实现呢,哈哈,那今天我就为大家写一个,哒哒哒,废话不多说,开始上代码~ 额 ...
纯css实现背景图片半透明，内容不透明
前言最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示半透明不透明常见的失败做法最常见的做法事设置元素的opacity,这种设置出 ...
如何用纯 CSS 创作背景色块变换的按钮特效
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XYKdwg 可交互视频教 ...

纯CSS实现背景渐变、球和阶梯的跳动

纯CSS实现背景渐变、球和阶梯的跳动

效果图

纯CSS实现背景渐变、球和阶梯的跳动相关推荐

最新文章

热门文章