内容摘要
伤心啊,写了好几天博客没人看~不过没关系,写博客的主要目的还是为了技术积累。在segmentFault上看到有前端每日专栏,觉得不错,正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果,动画出处:https://segmentfault.com/a/1190000016707813
最终效果预览:
内容学习
这次的内容比较简单,一般都看得懂就不再赘述了。主要用了一个grid布局和js动态产生子格子的数量以及动画的延迟,原作者使用的是3d.js编写的,本人不太熟悉编译了很久没成功,于是改成了熟悉的原生JS去编写,很快也达到目的了,代码也就几行差不多。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>眼冒金星</title>
<style>
body{
margin: 0;
height: 100vh;
/*居中显示*/
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.container{
/*网格式布局*/
display:grid;
/*--columns: 3;*/
/*设置列*/
grid-template-columns: repeat(var(--columns),1fr) ;
}
.container span{
/*color: white;*/
width: 25px;
height: 25px;
color: lime;
border: 1px solid red;
background-color: currentColor;
}
.container span{
/*定义缩放*/
transform: scale(0);
animation: spin 5s linear infinite;
/*设置动画延时*/
animation-delay:calc(var(--delay)*1s);
}
@keyframes spin {
0%{
transform:rotate(0deg) scale(1);
}
5%,15%{
transform: rotate(90deg) scale(0);
background-color: white;
}
17.5%{
transform: rotate(180deg) scale(1);
}
20%,100%{
transform: rotate(90deg) scale(0);
}
}
.container span:nth-child(1){--delay:0.8}
</style>
</head>
<body>
<div class="container" id="container">
</div>
</body>
<script>
(function () {
window.onload = function () {
var COLUMNS = 15;
var ctn = document.getElementById("container");
ctn.style.cssText += '--columns:'+ COLUMNS;
for (var i = 0; i < COLUMNS*COLUMNS; i++) {
var newspan = document.createElement("span");
newspan.style.cssText = '--delay:' + Math.random()*4;
ctn.appendChild(newspan);
}
}
}())
</script>
</html>