html代码:
Document
css代码:
.background-img {
height: 32vw;
width: 60%;
margin-top: 1vw;
text-align: center;
}
.area {
width: 100%;
height: 100%;
position: relative;
}
.area:hover>.ball {
animation-play-state: paused;
}
.area>.ball {
width: 7.0313vw;
height: 7.0313vw;
position: absolute;
border-radius: 7.0313vw;
background-image: linear-gradient(to top, #051F56, #1B8EF8);
color: #E1EAFE;
}
.area>.ball1 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate;
}
.area>.ball2 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.5s infinite alternate;
}
.area>.ball3 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5s infinite alternate;
}
.area>.ball4 {
animation: an服务器托管网miteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -7.5s infinite alternate;
}
.area>.ball5 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -10s infinite alternate;
}
.area>.ball6 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,服务器托管网
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -12.5s infinite alternate;
}
.area>.ball7 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -20s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -15s infinite alternate;
}
.area>.ball8 {
animation: anmiteX 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -22.5s infinite alternate,
anmiteY 10s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate,
scale 20s cubic-bezier(0.6, 0.3, 0.3, 0.6) -17.5s infinite alternate;
}
/* 动画 */
/* 在X轴上的移动 */
@keyframes anmiteX {
from {
left: 56vw;
}
to {
left: -1vw;
}
}
/* 在轴上Y的移动 */
@keyframes anmiteY {
from {
top: 7vw;
}
to {
top: 28vw;
}
}
/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale {
0% {
transform: scale(0.8, 0.8);
opacity: 0.5;
}
50% {
transform: scale(1.3, 1.3);
opacity: 1;
}
100% {
transform: scale(0.8, 0.8);
opacity: 0.5;
}
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 耗时3个月,线下访谈30+ csdn大佬,规划出了我的云原生学习路线
前言
一. 运维技术栈
二.常用工具汇总
一. 常用工具
三. 书籍推荐
四. 文末送书活动
总结前言 大家好,我是沐风晓月,最近线下拜访不少云原生方向的大佬和csdn其他方向的大佬,受益匪浅。 于是在 5月23日,我定下来自己的目标: 我的目标: 可以说,这个世代给予的机遇,让我们每一个人,即便是草莽出生,也可以通过技术,通过努力获得一些关注和成就。 随…