CSS定位和过度动画

阅读量：3960 次

发布时间：2019-05-24

本文共 3604 字，大约阅读时间需要 12 分钟。

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;	}

盒子布局