文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:CSS学习笔记-过渡模块

马六甲海峡

马六甲海峡

2024-04-23 23:49

关注

  css为html标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

  过渡模块:

  1、过渡三要素

  1.1必须要有属性发生变化

  1.2必须告诉系统哪个属性需要执行过渡效果

  1.3必须告诉系统过渡效果持续时长

  2、格式:

  div{

  width:100px;

  height:100px;

  background-color:red;

  transition-property:width;

  transition-duration:0.5s;

  }

  div:hover{

  width:300px;

  }

  (:link默认/:visited访问后/:hover鼠标悬浮/:active长按)爱恨原则:【L】o【v】e【H】【a】te

  3、注意点:

  当多个属性需要同时执行过渡效果时,用逗号隔开即可:

  transition-property:width,background-color;

  transition-duration:5s,5s;

  过度模块其他属性:

  1、transition-dalay:2s;

  告诉系统延迟多少秒之后才开始过渡

  2、transition-timing-funtion:linear;

  取值:linear/ease/ease-in/ease-out/ease-in-out

web前端:CSS学习笔记-过渡模块_CSS_web设计_html_编程学习网

  过渡模块_连写:

  1、连写格式:

  transition:过渡属性过渡时长运动速度延迟时间;

  2、过渡连写注意点:

  2.1如果想给多个属性添加过渡效果,用逗号隔开即可,如:

  transition:width1slinear0s,background-color1slinear0s;

  2.2连写的时候可以省略后面的两个参数,保证前面的三要素即可,如:

  transition:width1s,background-color1s;

  2.3如果多个属性运动的速度/延迟的时间/持续时间都一样,可以简写为:

  transition:all0s;

  CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     425人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     198人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     158人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     236人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     61人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯