CSS定位
前言
在我们设计网页的时候，我们在给页面布局的时候想要移动元素可以使用浮动布局。但是当我们需要移动到指定位置的时候，使用浮动布局就无法达到效果，那么我们该怎么办呢？我们今天学习的知识就可以解决这个问题。不仅如此我们还可以做出一个小小的表白神器。
CCS定位
根据所给X,Y位置对元素进行精准定位和移动。
css定位分类
css定位主要分为相对定位、绝对定位、固定定位。
偏移量：
top 上 left 左 right 右 bottm 下
相对定位 position：relative
- 如果一个元素设置相对定位，则页面上没有任何反应。
- 相对定位是占据之前位置的
- 跟随着自己原来位置的左顶点进行移动。
绝对定位 position：absolute
- 如果只给一个元素设置了绝对定位，则该元素脱离文档流
- 以body的左顶点进行移动，或以定义了相对定位的父级元素的左顶点进行移动。
子绝父相布局
给父级元素设置相对定位，给子级元素设置绝对定位。
固定定位
- 如果只给一个元素设置了固定定位，该元素脱离文档流
- 定在屏幕的某一个位置，不受滚动条的影响。
- 无论父级有没有相对定位它都会随着body的左顶点进行位置偏移。
css新增的选择器功能
关系型选择器
语法：
E+A
下一个瞒足条件的“兄弟”元素节点
如：.div2:active+.xin2
此处意为：选择类名为div2的盒子点击时，div2后第一个.xin2的元素
E~A
瞒住条件的后面的所有兄弟元素
如：.div2:active~.xin2
此处意为：选择类名为div2的盒子点击时，div2后面所有类名为xin2的元素
过度动画transition
transition-property：属性;(多个属性用“,”隔开）监听过渡状态的改变，我们要让哪个属性过渡被监听。
transition-duration：时间;过渡所用时间
transition-timing-function：linear; 运动状态;(此处为匀速）;
transition-delay: 时间 ; 过渡效果开始前等待时间;
结合案例
结合以上知识，我们以一个简单案例来加强知识的巩固，以下是设计思路和步骤。
案例内容
点击盒子A ，后面所有的“兄弟元素”开始过渡到一定位置，从而组成一个“心”
案例实现思路
“点击盒子A，后面的所有“兄弟元素”开始过渡”
即需要做到点击前面的一个元素，后面的元素所产生的样式
此处就可以运用：
- ： “：active” 链接伪类，点击后激活产生的样式（点中不松开的状态）
- ：“E~A”关系型选择器，以达到触发后面“兄弟”元素过渡
“开始过渡”
即使用transition过渡动画
到一定位置
即提前设置好的位置，使用子绝父相给每个“兄弟”元素提前定位。
实现步骤
1.创建一个父级盒子，包裹divA和原来组成“心”的span
2.提前给span定义好组成“心”的定位。
3.设置一个初始位置，即组成“心”之前所有span堆放的位置。
4.将提前定义好的span组成“心”的定位写入点击盒子A触发后的样式中。
5.给各个span加上过渡动画监听。
实现代码
设置一个好看的背景，定义一个父级盒子，设置span开始位置
body {
background-color: cornflowerblue;
}
.div1 {
margin: 0px auto;
width: 800px;
height: 600px;
position: relative;
}
.div1 span {
width: 82px;
height: 80px;
padding: 10px;
font-size: 100px;
text-align: center;
line-height: 80px;
position: absolute;
color:#F03D10;
left: 153px;
right: 245px;
top: 300px;
bottom: 100px;
}
4.将提前定义好的span组成“心”的定位写入点击盒子A触发后的样式中。
.div2:active~.xin2 {
left: 52px;
right: 245px;
top: 200px;
bottom: 100px;
}
.div2:active~.xin3 {
left: 159px;
right: 245px;
top: 200px;
bottom: 100px;
}
.div2:active~.xin4 {
left: 266px;
right: 245px;
top: 200px;
bottom: 100px;
}
.div2:active~.xin5 {
left: 0px;
right: 245px;
top: 100px;
bottom: 100px;
}
.div2:active~.xin6 {
left: 107px;
right: 245px;
top: 100px;
bottom: 100px;
}
.div2:active~.xin7 {
left: 213px;
right: 245px;
top: 100px;
bottom: 100px;
}
.div2:active~.xin8 {
left: 320px;
right: 245px;
top: 100px;
bottom: 100px;
}
.div2:active~.xin9 {
left: 51px;
right: 245px;
top: 0px;
bottom: 100px;
}
.div2:active~.xin10 {
left: 260px;
right: 245px;
top: 0px;
bottom: 100px;
}
.div2 {
float: right;
width: 80px;
min-height: 80px;
background-color: pink;
margin-top:400px ;
border-radius: 50%;
text-align: center;
line-height: 80px;
color: #ffff;
}
给各个span加上过渡动画监听。
.xin2 {
transition: all 2s linear;
}
.xin3 {
transition: all 3s linear;
}
.xin4 {
transition: all 4s linear;
}
.xin5 {
transition: all 5s linear;
}
.xin6 {
transition: all 6s linear;
}
.xin7 {
transition: all 7s linear;
}
.xin8 {
transition: all 8s linear;
}
.xin9 {
transition: all 9s linear;
}
.xin10 {
transition: all 10s linear;
}
盒子布局
<body>
<div class="div1">
<div class="div2">
长按这里
</div>
<span class="xin1">♥</span>
<span class="xin2">♥</span>
<span class="xin3">♥</span>
<span class="xin4">♥</span>
<span class="xin5">♥</span>
<span class="xin6">♥</span>
<span class="xin7">♥</span>
<span class="xin8">♥</span>
<span class="xin9">♥</span>
<span class="xin10">♥</span>
</div>
</body>
end
今天的学习就到这了，对案例感兴趣的小伙伴可以直接复制粘贴自己运行试试，个人觉得还挺有意思的。
3637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
