wordpress搭建个人网站费用,模板网站建设服务商,旅游网站怎么自己做,旅游营销型网站建设欢迎来到前端设计专栏#xff0c;本专栏收藏了一些好看且实用的前端作品#xff0c;使用简单的html、css语法打造创意有趣的作品#xff0c;为网站加入更多高级创意的元素。 html
!DOCTYPE html
html langen
headmeta charset本专栏收藏了一些好看且实用的前端作品使用简单的html、css语法打造创意有趣的作品为网站加入更多高级创意的元素。 html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href小球loading.css
/head
bodydiv classloaderspan classball style--i:1/spanspan classshadow style--i:1/spanspan classball style--i:2/spanspan classshadow style--i:2/spanspan classball style--i:3/spanspan classshadow style--i:3/spanspan classball style--i:4/spanspan classshadow style--i:4/spanspan classball style--i:5/spanspan classshadow style--i:5/span/div
/body
/htmlcss
* {margin: 0;padding: 0;
}
html {height: 100%;
}
body {height: 100%;display: flex;justify-content: center;align-items: center;color: #333;
}
.loader {width: 650px;height: 200px;position: relative;
}
.loader .ball {position: absolute;width: 50px;height: 50px;border-radius: 50%;background-color: lightseagreen;left: calc(var(--i) * 100px);animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}
.loader .shadow {position: absolute;bottom: -12.5px;z-index: -1;width: 50px;height: 25px;background-color: #000;border-radius: 50%;left: calc(var(--i) * 100px);animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
}
keyframes jump {0%,100% {bottom: 150px;}40%,60% {bottom: 0;height: 50px;}50% {height: 25px;filter: hue-rotate(180deg);}
}
keyframes shadow {0%,100% {transform: scale(2);opacity: 0.1;filter: blur(5px);}40%,60% {transform: scale(1);opacity: 1;filter: blur(2px);}
}
使用了css 变量 style“–i:1”
作品回顾
文字聚光灯
