CSS定位和过度动画

2024-07-02 18:00| 来源: 网络整理| 查看: 265

CSS定位前言CCS定位css定位分类相对定位 position：relative绝对定位 position：absolute子绝父相布局固定定位 css新增的选择器功能过度动画transition结合案例案例内容案例实现思路实现步骤实现代码 end

前言

在我们设计网页的时候，我们在给页面布局的时候想要移动元素可以使用浮动布局。但是当我们需要移动到指定位置的时候，使用浮动布局就无法达到效果，那么我们该怎么办呢？我们今天学习的知识就可以解决这个问题。不仅如此我们还可以做出一个小小的表白神器。

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

盒子布局

长按这里 ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ end

今天的学习就到这了，对案例感兴趣的小伙伴可以直接复制粘贴自己运行试试，个人觉得还挺有意思的。

【本文地址】

公司简介

联系我们