CSS中动画、过渡、定位、浮动的作用

简介: CSS中动画、过渡、定位、浮动的作用

css是层叠样式表,它是表现在html或xml中文件的计算机语言,使内容和表现分离开来,使其更具有页面控制和灵活性,css不仅可以装饰静态网页,还可以配合各种脚本使各元素格式化。


我们可以经过一些css属性,来把这页面变得更加美观。


接下来开始正题,给大家介绍一下今天的四个主人公:


动画:

动画就是·在你的页面中添加一个元素,给这个元素加上动画效果,他就可以自行进行改变样式,

优点:

能够非常容易地创建简单动画,你甚至不需要了解 JavaScript 就能创建动画。

动画运行效果良好,甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳(除非经过很好的设计)。

让浏览器控制动画序列,允许浏览器优化性能和效果,如降低位于隐藏选项卡中的动画更新频率。

如何创建:

创建动画序列,需要使用 animation 属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes 规则实现。


关键帧使用 <percentage> 来指定动画发生的时间点。0% 表示动画的第一时刻,100% 表示动画的最终时刻。因为这两个时间点十分重要,所以还有特殊的别名:from 和 to。这两个都是可选的,若 from/0% 或 to/100% 未指定,则浏览器使用计算值开始或结束动画。

     @keyframes 自己定义的名字
   {
       初始值 {初始值的属性}
      结尾值 {结尾值得属性}
  }

一个完整的动画:

把一个红色的块变成一个黄色的块

div
{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
}
 
@keyframes myfirst
{
  from {background:red;}
  to {background:yellow;}
}

过渡:


过渡就是·在你的页面中添加一个元素,给这个元素加上过渡效果,他就可以进行改变样式,他和动画不一样的是,过渡需要通过鼠标放在需要改变的样式上时,他才会发生改变。


优点:


CSS 过渡可以决定哪些属性发生动画效果(通过明确地列出这些属性),何时开始(通过设置延时),持续多久(通过设置时长)以及如何动画(通过定义缓动函数,比如线性或先快后慢)。


如何创建:


CSS 过渡通常使用简写属性 transition 控制。这是最好的方式,可以避免属性值列表长度不一,节省在 CSS 代码上调试的时间。


指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画,其他属性仍如通常那样瞬间变化。指定过渡的时长。你可以为所有属性指定一个值,或者指定多个值,或者为每个属性指定不同的时长完整的过渡:

把一个蓝色的块,过渡成一个旋转了180度的粉色块,粉色块变大

.box {
  border-style: solid;//实现边框
  border-width: 1px;//边框的宽
  display: block;//块级
  width: 100px;//原来的宽
  height: 100px;//原来的高
  background-color: #0000ff;//原来的颜色
  transition:
    width 2s,//宽的过渡时间    
    height 2s,//高的过渡时间
    background-color 2s,//颜色的过渡时间
    rotate 2s;//旋转过渡的时间
}
 
.box:hover {
  background-color: #ffcccc;//过渡完成后的颜色
  width: 200px;//过渡完成后的宽
  height: 200px;//过渡完成后的高
  rotate: 180deg;//过度要旋转的多少
}

定位:

定位分为很多种,静态定位、相对定位、绝对定位、固态定位、粘性定位,各有各的用法

静态定位:

HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

.选择器{
position:static;
}

相对定位:

相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局,在标准文本流中移动后,原来位置会保留空白。

1. .选择器{
2. position:raletive;
3.

绝对定位:

绝对定位的元素的位置相对于最近的已定位父元素,会脱离文本流,如果元素没有已定位的父元素,那么它的位置相对于<html>,一般配合相对定位使用(子相父绝)。

.选择器{
position:absolute;
}

固定定位:

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动,会脱离文本流。

.选择器{
position:fixed;
}

适合用于导航栏,如果用做底部导航栏

.选择器{
position:fixed;
bottom:0;
}

如果用作顶部导航栏:

.选择器{
position:fixed;
top:0;
}

粘性定位:


基于用户的滚动位置来定位,粘性定位的元素是依赖于用户的滚动,在 相对定位 与 固定定位定位之间切换,它的行为就像 相对定位 而当页面滚动超出目标区域时,它的表现就像 固定定位,它会固定在目标位置,元素定位表现为在跨越特定属性值前为相对定位,之后为固定定位。这个特定属性值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个属性值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

.选择器{
position:fixed;
}

合适运用好定位可以是我们的页面更加美观。

浮动:

CSS 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,但是仍然保持部分的流动性(与绝对定位相反)


如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻在这里

.选择器{
float:(top。bottom,left,right);
}

浮动运用的多了,会导致页面崩塌。

希望我的这些见解可以给大家带来帮助,我也是一只小白,刚刚入门,如果有什么不对的地方请,各位大神给我指点一番。同时也感谢大家来观看我的博客!

相关文章
|
8天前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
|
15天前
|
前端开发 容器
CSS基础-浮动:float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性,用于创建多列布局和图文混排,但会导致浮动塌陷和元素重叠问题。为解决这些问题,文章探讨了`clear`属性的四种清除浮动方法,包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起,它们在某些场景下替代了浮动,但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
|
4天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
14 0
|
3天前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
20天前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
28 1
纯CSS画浮动卡通蓝天白云草坪动画效果
|
3天前
|
前端开发 容器
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
CSS浮动(如果想知道CSS有关浮动的知识点,那么只看这一篇就足够了!)
|
9天前
|
前端开发 开发者 异构计算
CSS进阶-CSS动画关键帧
【6月更文挑战第15天】CSS的`@keyframes`创建细腻动画,定义样式变化阶段以增强网页互动性。通过`animation`属性应用动画,如`fadeIn`示例。常见问题包括动画结束状态、卡顿和浏览器兼容性,解决办法涉及优化关键帧、使用硬件加速和添加前缀。进阶技巧包括多步骤动画和控制播放状态。例如,背景色渐变动画展示了颜色随时间变化的效果。学习和实践关键帧动画,提升Web开发技能。
|
13天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
14天前
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
|
24天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
28 1