1、先进行简单的页面布局
1.1
我这里是使用了一个div标签包了两个p标签
每个p标签里面又包了四个span标签
构建了一个简单的页面搭建
其余的用css就可以进行下一步操作了
<body>
<div>
<p>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<p>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
</body>2、使用css样式实现效果
2.1
下面的是详细的书写css样式 和解析
篇幅有点长 详细解释了每一步的操作 写完之后建议整体浏览一遍
<style type="text/css">
/* 使用通配符进行所用标签去除默认的margin 和 padding样式 */
* {
margin: 0;
padding: 0;
}
/* 给整个body加了一个黑色的背景颜色（加不加都可） */
body {
background: black;
}
/* 这里给div标签设定了宽高各200px，
给了一个页面 左右居中 上间距给了200px ，
给了一个相对定位*/
div {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
}
/* 这里给所有的p标签都设置了宽高200px ，
给了一个绝对定位
（这里给绝对定位 因为父元素有定位
所以是根据父级元素 也就是div进行定位） */
div p {
width: 200px;
height: 200px;
position: absolute;
}
/* 这里给所有的span标签设置了基础样式 */
p span {
/* 将行内元素span转换成块元素
使span标签支持设定宽高和一些其他css属性 */
display: block;
/* 宽高各40px 背景色为白色 文本居中 行高40px */
width: 40px;
height: 40px;
background: white;
text-align: center;
line-height: 40px;
/* 设定为圆角盒子 */
border-radius: 50%;
/* 这里调用下面的动画（tom） 过度时间为1s 匀速 循环 */
animation: tom 1s linear infinite;
/* 设定盒子阴影 水平方向0 垂直方向0 模糊度为3px 延伸半径为10px 阴影颜色为白色 */
box-shadow: 0 0 3px 10px white;
}
/* 这里使用结构伪类选择器将span分别定位到到盒子p的四个角
（注意：这里的定位也是根据父级p定位的 因为盒子p也给了定位）*/
p span:nth-of-type(2) {
position: absolute;
right: 0;
top: 0;
}
p span:nth-of-type(3) {
position: absolute;
right: 0;
bottom: 0;
}
p span:nth-of-type(4) {
position: absolute;
left: 0;
bottom: 0;
}
/* 这里选择第二个盒子p 使其旋转45度（rotate属性值 默认按照z轴旋转 单位是deg） */
p:nth-of-type(2) {
transform: rotate(45deg);
}
/* 定义动画关键帧 使用关键字@keyframes 名称{} 定义动画的关键帧
这里在开始时为缩小到没有
中间时从没有放大到正常
结束时再次缩小到没有
*/
@keyframes tom {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
/* 这里给每一个span标签 按照顺时针的方向设定了动画开始延迟
由于给正数会在动画开始时影响动画效果
这里给的负数 就不会出现页面刚打开会有个别不动的
*/
/* 第一个p的 第一个span */
p:nth-of-type(1) span:nth-of-type(1) {
animation-delay: -0.12s;
}
/* 第二个p的 第一个span */
p:nth-of-type(2) span:nth-of-type(1) {
animation-delay: -0.23s;
}
/* 第一个p的 第二个span */
p:nth-of-type(1) span:nth-of-type(2) {
animation-delay: -0.34s;
}
/* 第二个p的 第二个span */
p:nth-of-type(2) span:nth-of-type(2) {
animation-delay: -0.45s;
}
/* 第一个p的 第三个span */
p:nth-of-type(1) span:nth-of-type(3) {
animation-delay: -0.56s;
}
/* 第二个p的 第三个span */
p:nth-of-type(2) span:nth-of-type(3) {
animation-delay: -0.67s;
}
/* 第一个p的 第四个span */
p:nth-of-type(1) span:nth-of-type(4) {
animation-delay: -0.78s;
}
/* 第二个p的 第四个span */
p:nth-of-type(2) span:nth-of-type(4) {
animation-delay: -0.89s;
}
</style>-- 展开阅读全文 --
测试[呵呵]