笔记：
1. 设置阴影：box-shadow: 0 0 80px red;/*设置阴影效果，其值分别表示水平偏移量，竖直偏移量，阴影大小，颜色*/
2.动画：animation: 动画名 动画时间 是否匀速(linear) 延迟 是否反复(infinte) 是否终点停止;
3.居中：margin:100px auto; 100px表示上下居中像素100px auto表示左右居中
4.变换：transform: rotate(45deg); 表示偏移45度，scale()表示放大倍数 scaley上下放大。
5.优先级：z-index() 当括号里面是>0的数字表示提升优先级，反之降低优先级。
视频效果
跳动爱心
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动爱心</title>
</head>
<style>
body{
background-color: black;
}
.heart{
margin: 100px auto;
position: relative;
width: 185px;
height: 200px;
/* background-color: black; */
animation: change 1s linear infinite alternate;
}
@keyframes change{
100%{
transform: scale(1.5);
}
}
.left{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
box-shadow: 0 0 80px red;/*设置阴影效果，其值分别表示水平偏移量，竖直偏移量，阴影大小，颜色*/
}
.right{
position:absolute ;
left: 85px;
top: 0px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
box-shadow: 0 0 40px red;/*设置阴影效果，其值分别表示水平偏移量，竖直偏移量，阴影大小，颜色*/
}
.bott{
position: absolute;
width: 100px;
height: 100px;
top: 41px;
left:42.5px ;
background-color: red;
transform: rotate(45deg);
border-radius: 10px 0 0;
}
</style>
<body>
<div class="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bott"></div>
</div>
</body>
</html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
