文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:CSS过渡与转换

代码小侠客

代码小侠客

2024-04-23 23:05

关注

  在css1中,样式通常是基于在html源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。

  浏览器前缀:

  css3属性:预览版,还没有最终版,所以有很多兼容性问题,浏览器不识别。

  浏览器为了使这些属性兼容,每个浏览器厂商都提供了一个属于自己浏览器的语法规则,浏览器兼容前缀。

  主流浏览器:谷歌,IE,欧朋,火狐,苹果

  浏览器前缀:

  -wekit- 谷歌

  -moz- 火狐

  -ms- IE

  -o- 欧朋

  盒子阴影:

  box-shadow:0px0px0px0pxred;

  水平偏移量,垂直偏移量,模糊度,影子大小,颜色

  css3渐变:由浏览器生成,

  线性渐变:

  1、单一方向渐变

  background:-wbkit-linear-gradient(方向,颜色1,颜色2,颜色3);

  方向:

  left从左边开始

  right从右边开始

  top从上边开始

  bottom从下边开始

  【注】需要添加浏览器前缀

  background:linear-gradient(to方向,颜色1,颜色2,颜色3);

  toleft到左边(结束)

  toright

  totop

  tobottom

  【注】不要添加浏览器前缀

  2、对角渐变

  background:-wbkit-linear-gradient(方向方向,颜色1,颜色2,颜色3);

  lefttop从左上角到右下角渐变

  leftbottom

  righttop

  rightbottom

  【注】需要添加浏览器前缀

  background:linear-gradient(to方向方向,颜色1,颜色2,颜色3);

  tolefttop

  toleftbottom

  torighttop

  torightbottom

  【注】不要添加浏览器前缀

  3、角度的渐变

  10deg10度

  4、默认情况下颜色均分

  可以指定颜色分布的百分比

  background:-wbkit-linear-gradient(left,red10%,green40%,blue);

  从10%开始渐变,前10%都是red

  background:linear-gradient(toleft,red10px,green,blue);

  从10px处开始渐变,前10px都是red

  径向渐变:(一定要加浏览器前缀)

  从一个点到四周的渐变

  background:-wbkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);

  渐变位置:默认从中心到四周

  left从左边渐变

  right

  top

  bottom

  lefttop从左上角到四周渐变

  leftbottom

  righttop

  rightbottom

  形状:默认椭圆 ellipse

  正圆 circle

  【注】元素是正方形,则都是正圆

  大小:size,渐变的大小,即渐变到哪里停止,它有四个值

  closest-side:最近边;

  farthest-side:最远边;

  closest-corner:最近角;

  farthest-corner:最远角;

  渐变重复:

  线性渐变

  background:repeating-linear-gradient(toleft,black10%,white20%);

  -wbkit-background:repeating-linear-gradient(right,black10%,white20%);

  径向渐变

  background:repeating-radial-gradient:(right,black10%,white20%);

  【注】渐变用的背景属性是background-image:;

  过渡:让元素的动画产生平滑的效果

  1、什么属性在做动画 transition-property:属性1,属性2,...;

  2、过渡时间需要多久 transition-duration:0.5s;

  3、延迟时间(选写) transition-delay:2s;

  4、动画类型(默认匀速) transition-timing-function:;

  综合写法:

  transition:all/具体属性值运动时间s/ms延迟时间s/ms动画类型

  css3中的2d

  二维的平面空间

  css32d属性

  变形属性transform:;

  2d变换

  位移

  transform:translate(水平位移,垂直位移); 一个值默认只有水平位移

  transform:translateX(10px); 水平位移

  transform:translateY(10px); 垂直位移

  【注】正值,从上往下从左往右

  旋转

  transform:rotate(); 默认中心旋转

  transform-origin:lefttop; 设置旋转基点

  transform-origin:5px10px;

  缩放

  transform:scale(水平垂直都缩放的倍数); 一个值

  transform:scale(水平缩放,垂直缩放); 两个值

  transform:scaleX(水平缩放);

  transform:scaleY(垂直缩放);

  CSS的识别符也需要用反斜杠"\\"规避特殊字符,这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠,例如,"AT&T"变为"AT\\&T";另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起,规避特殊字符,例如,"AT&T"变为"AT\\26T"。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     77人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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