css矩形凹陷效果_css基础⼩练习
1.CSS中的定位position
Position有三个，absolute绝对定位，定位会释放原来的位置，并且是基于外层⽗级标签来说的
relative是相对定位，定位离开原来的位置没有释放，相对于原来的位置来说的。
fixed是固定的对位，始终是基于浏览器的左上⾓来定位的适合⽤来做⼴告
2. Css3新增选择器
.
div_1>p:last-child是获得最后⼀个⼦元素
.div_1>p:first-child获得第⼀个⼦元素
.div_1>p:nth-child(n)获得指定的⼦元素，括号中为odd为偶数⾏，even为基数⾏
.div_1>p:empty获取为空的⼦元素标签
inpue：focus获取焦点
befor在指定对象之前插⼊属性
属性选择器input[type=text]
3.css3的新增属性
/*倒圆⾓指令*/
border-radius: 100px; 0-100px当为0时是⼀个矩形，当为100px为圆
/*旋转⾓度*/
transform: rotate(45deg); 0-360deg旋转的度数
/*放⼤的倍数*/
transform: scale(1.3); 放⼤与缩⼩的倍数，1以上为⽅法，1以下到0为缩⼩
transform: translate(0px,-5px); X:⽔平的位移 Y ：垂直的位移 负数：上
box-shadow: 0px 0px 70px #D5093C; 阴影 ⽔平⽅向的偏移 垂直⽅向的偏移 模糊度 阴影的颜⾊@keyframes name动画标签，from{}to{}从。。到。。的动作
4.⽤css做出⼀个会跳动的⼼效果如下
主要是对两个圆以及⼀个矩形旋转之后拼接成的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cen{
width: 200px;
height: 200px;
background-color: #FF00FF;
box-shadow: 0px 0px 50px #FF00FF;
animation: 1s aj infinite;
}
/*倒圆⾓指令*/
.lef{
border-radius: 100px;
position: absolute;
top: 200px;
left: 150px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 300px;
}
.c{
transform: rotate(45deg);
position: absolute;
top: 275px;
css固定定位
left: 225px;
}
div:hover{
transform: scale(1.3);
}
/*动画'*/
@keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.1) rotate(45deg);}    100%{transform: scale(1) rotate(45deg);}  }
</style>
</head>
<body>
<!--圆-->
<div class="cen lef">
</div>
<!--矩形-->
<div class="cen c">
</div>
<!--圆-->
<div class="cen rig">
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。