cubic-bezier()
模仿记_" class="lazyload" src="https://www.mshxw.com/file/upload/202104/24/231130730.png" data-original="//img1.sycdn.imooc.com/5ab382f100015a3c05480545.png" alt="贝塞尔曲线坐标图">
a. 下落的球
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 64px;
height: 64px;
position: relative;
}
.box div {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
bottom: 0;
background-color: purple;
animation: ball 1s linear infinite;
}
@keyframes ball {
0%, 100% {
animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55);
}
0% {
transform: translateY(0);
}
50% {
transform: translateY(70px);
animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
}
100% {
transform: translateY(0);
}
}
b. 旋转缩放的小球
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 64px;
height: 64px;
position: relative;
border: 1px solid lightgrey;
animation: circle 4s linear infinite;
transform-origin: 32px 32px;
-webkit-transform-origin: 32px 32px;
}
.box div {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
.box div:nth-child(1) {
top: -10px;
left: 22px;
background-color: red;
animation: red 1s linear infinite;
}
.box div:nth-child(2) {
top: 22px;
left: -10px;
background-color: purple;
animation: purple 1s linear infinite;
}
.box div:nth-child(3) {
top: 22px;
left: 54px;
background-color: pink;
animation: pink 1s linear infinite;
}
.box div:nth-child(4) {
top: 54px;
left: 22px;
background-color: yellowgreen;
animation: yellowgreen 1s linear infinite;
}
.box div:nth-child(5) {
top: 22px;
left: 22px;
background-color: blue;
}
@keyframes red {
0% {
top: -10px;
background-color: red;
}
50% {
top: -16px;
background-color: purple;
}
100% {
top: -10px;
background-color: red;
}
}
@keyframes pink {
0% {
left: 54px;
background-color: pink;
}
50% {
left: 60px;
background-color: purple;
}
100% {
left: 54px;
background-color: pink;
}
}
@keyframes purple {
0% {
left: -10px;
background-color: yellowgreen;
}
50% {
left: -16px;
background-color: purple;
}
100% {
left: -10px;
background-color: yellowgreen;
}
}
@keyframes yellowgreen {
0% {
top: 54px;
background-color: pink;
}
50% {
top: 60px;
background-color: purple;
}
100% {
top: 54px;
background-color: pink;
}
}
@keyframes blue {
0% {
}
100% {
}
}
@keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
c. 音乐柱状图
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 90px;
height: 90px;
position: relative;
border: 1px solid lightgrey;
}
.box div {
width: 10px;
height: 30px;
position: absolute;
bottom: 0;
animation: rectangle 1s cubic-bezier(0, 0.2, 0.7, 0.2) infinite;
}
.box div:nth-child(1) {
left: 10px;
background-color: red;
animation-delay: -0.2s;
}
.box div:nth-child(2) {
left: 30px;
background-color: purple;
animation-delay: -0.4s;
}
.box div:nth-child(3) {
left: 50px;
background-color: pink;
animation-delay: -0.6s;
}
.box div:nth-child(4) {
left: 70px;
background-color: yellowgreen;
animation-delay: -0.8s;
}
@keyframes rectangle {
0% {
height: 30px;
}
25% {
height: 70px;
}
50% {
height: 90px;
}
75% {
height: 70px;
}
100% {
height: 30px;
}
}
d. 柱状图背景跑马灯
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 90px;
height: 90px;
position: relative;
border: 1px solid lightgrey;
}
.box div {
width: 10px;
height: 50px;
position: absolute;
bottom: 0;
animation: rectangle 1s linear infinite;
}
.box div:nth-child(1) {
left: 10px;
background-color: red;
animation-delay: -0.8s;
}
.box div:nth-child(2) {
left: 30px;
background-color: purple;
animation-delay: -0.6s;
}
.box div:nth-child(3) {
left: 50px;
background-color: pink;
animation-delay: -0.4s;
}
.box div:nth-child(4) {
left: 70px;
background-color: yellowgreen;
animation-delay: -0.2s;
}
@keyframes rectangle {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
e. 九宫格跑马灯
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 51px;
height: 51px;
position: relative;
border: 1px solid lightgrey;
}
.box div {
width: 20px;
height: 20px;
position: absolute;
background-color: yellow;
text-align: center;
animation: rectangle 1s linear infinite;
}
.box div:nth-child(1) {
animation-delay: 0s;
}
.box div:nth-child(2) {
left: 23px;
animation-delay: 0.125s;
}
.box div:nth-child(3) {
left: 46px;
animation-delay: 0.25s;
}
.box div:nth-child(4) {
top: 23px;
animation-delay: 0.875s;
}
.box div:nth-child(5) {
top: 23px;
left: 46px;
animation-delay: 0.375s;
}
.box div:nth-child(6) {
top: 46px;
animation-delay: 0.75s;
}
.box div:nth-child(7) {
top: 46px;
left: 23px;
animation-delay: 0.625s;
}
.box div:nth-child(8) {
top: 46px;
left: 46px;
animation-delay: 0.5s;
}
@keyframes rectangle {
0% {
background-color: purple;
}
100% {
background-color: yellow;
}
}
1
2
3
4
5
6
7
8
f. 四宫格小砖块运动
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 45px;
height: 45px;
position: relative;
border: 1px solid lightgrey;
}
.box div {
width: 20px;
height: 20px;
position: absolute;
text-align: center;
}
.box div:nth-child(1) {
background-color: red;
animation: red 2s linear infinite;
}
@keyframes red {
0% {
top: 0;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
25% {
top: 0;
left: 25px;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
50% {
top: 25px;
left: 25px;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
75% {
top: 25px;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
100% {
top: 0;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
}
.box div:nth-child(2) {
width: 0;
height: 0;
background-color: white;
}
.box div:nth-child(3) {
top: 25px;
left: 25px;
background-color: pink;
animation-delay: 4s;
animation: pink 2s linear infinite;
}
@keyframes pink {
0% {
top: 25px;
left: 25px;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
25% {
top: 25px;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
50% {
top: 0;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
75% {
top: 0;
left: 25px;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
100% {
top: 25px;
left: 25px;
}
}
.box div:nth-child(4) {
top: 25px;
left: 0;
background-color: yellow;
animation-delay: 2s;
animation: yellow 2s linear infinite;
}
@keyframes yellow {
0% {
top: 25px;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
25% {
top: 0;
left: 0;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
50% {
top: 0;
left: 25px;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
75% {
top: 25px;
left: 25px;
animation-timing-function: cubic-bezier(0.17, 1.01, 0.18, 1.06);
}
100% {
top: 25px;
left: 0;
}
}
1
3
4
g. 四宫格心跳
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 45px;
height: 45px;
position: relative;
border: 1px solid lightgrey;
}
.box div {
width: 20px;
height: 20px;
position: absolute;
text-align: center;
animation: bricks 1s cubic-bezier(0.33, 0.01, 0.99, 0.17) infinite;
}
.box div:nth-child(1) {
background-color: red;
animation-delay: 0s;
}
.box div:nth-child(2) {
top: 0;
left: 35px;
background-color: purple;
animation-delay: 0.3s;
}
.box div:nth-child(3) {
top: 35px;
left: 35px;
background-color: pink;
animation-delay: 0.7s;
}
.box div:nth-child(4) {
top: 35px;
left: 0;
background-color: yellow;
animation-delay: 0.3s;
}
@keyframes bricks {
0% {
transform: scale(1.5);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
1
2
3
4
h. 光盘旋转
pureCss
html,
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 250px;
height: 250px;
border: 1px solid lightgray;
margin-top: 20%;
margin-left: 20%;
padding-top: 20%;
padding-left: 20%;
opacity: 0.5;
}
.box {
width: 64px;
height: 64px;
position: relative;
border: 1px solid lightgrey;
}
.box div {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
background-color: red;
text-align: center;
animation: disk 1s linear infinite;
}
.box div::after {
content: "";
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #f3e3e5;
position: absolute;
}
@keyframes disk {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
i.
