回顾
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 可用于将在一个元素放置于另一元素之后。
动画
动画使元素逐渐从一种样式变为另一种样式。
可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画,必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。
@keyframes 规则
如果在 @keyframes 规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效,必须将动画绑定到某个元素。
下面的例子将动画绑定到 元素。动画将持续0.2秒钟,同时进行循环。
示例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小试牛刀</title><style>
.c1,
.c2,
.c3{
width:100px;
height: 100px;
background:rgb(255,0,0); /*颜色单词,16进制编码 rgb值*/
border-radius:50%; /*边框半径:设置圆角 css3*/
box-shadow:0 0 50px rgb(255,0,0); /*盒子阴影 css3*/
}
.c3{
margin-top:-100px;
border-radius: 0; /*去掉选中元素的圆角边框*/
}
.c2{
margin-top:-50px;
margin-left:-50px
}
#love{
position:absolute;
left:20%;
top:10%;
transform: rotate(45deg); /*顺时针旋转45度 css3*/
animation:jump .3s linear infinite;
}
/* 自定义动画创建 css3*/
@keyframes jump{
30%{
transform: scale(1.1) rotate(45deg);
}
40%{
transform: scale(1.2) rotate(45deg);
}
50%{
transform: scale(1.1) rotate(45deg);
}
}
</style>
</head>
</head>
<body>
<div id="love">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>
效果
跳动的心