css3

作者: 糕糕AA | 来源:发表于2019-10-06 21:32 被阅读0次

css3新属性

  1. 边框:border-radius|box-shadow:10px 10px 5px #xxxxxx|border-image
  2. 背景:background-size|background-origin:content-box/padding-box/border-box|允许多个背景图片:background-image:url(),url()|text-shadow|word-wrap:break-word允许文本换行
  3. 字体:@font-face自定义字体
  4. 伪类
    • :empty 没有子元素的element元素
    • :enable 选择每个已启动的元素
    • :disable 选择每个已禁止的元素
    • :chacked 选择每个被选中的元素
    • :target 选择当前活动的元素
  5. 2D、3D转换transform
  6. 过渡效果:transition
  7. 动画animation,结合@keyframes使用

box-shadow

box-shadow: 10px 10px 5px 5px #xxx insert

  • h-shadow: 水平阴影位置
  • v-shadow:垂直阴影位置,与水平位置一样可为负,必选
  • blur:模糊距离
  • spread:阴影尺寸
  • color:阴影颜色
  • insert:内部阴影

css3 渐变:线性/径向渐变

  • 线性渐变((repeat-)linear-gradient)- 向下/向上/向左/向右/对角方向
    background: linear-gradient(direction, color-stop1, color-stop2, ...);
    direction: to bottom right / xdeg
    color: color x% :颜色中心所在的位置
  • 径向渐变((repeat-)radial-gradient)- 由它们的中心定义

动画 transform、transition、animation、

  • 2D转换transform:translat(x,y)|rotate(30deg)|scale(x,y)缩放|skew(30deg,20deg)水平垂直翻转角度|matrix()2D方法组合
    • 3D转换:rotateX(120deg)|rotateY()|
  • 过渡效果:transition-property:color background|transition-duration|transition-timing-function:sase/liner/ease-in/ease-out/ease-in-out/cubic-bezier(num,num,num,num)|transition-deley|
    简写:transition: property duration timing-function delay;
    过渡的属性,完成过度效果需要时间,速度曲线,延迟时间
 .one1{transition: width 3s linear 2s;}   
 .one1:hover{width:300px;} 
  • animate动画:@keyframes规则:animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count:inifinite/number|animation-direction:normal/alternate动画播放方向|animation-play-state:running/paused元素动画播放状态
    animation的使用必须结合@keyframes animation-name使用
animation: name duration timing-function delay iteration-count direction; 
 @-webkit-keyframes  move {
         form{ left:0px;}   
         to{ left:200px;}
              }

区别:

  1. 触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则立即播放。
  2. 循环。 animation可以设定循环次数。
  3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。
  4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。
  • 贝塞尔曲线:cubic-bezier(n,n,n,n)自定义平滑曲线。贝塞尔曲线有4个点,左下为起始点P0坐标固定为(0,0),右上为终点P3坐标固定为(1,1),中间有两点P1和P2的坐标就是cubic-bezier(n,n,n,n)的参数。通过4条连起来的直线,生成平滑的曲线。
    linear是匀速过渡,ease是先快再慢的节奏,ease-in是加速冲刺的节奏,ease-out是减速到停止的节奏,ease-in-out是先加速后减速

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • CSS3设置圆角边框 圆角特效代码 CSS3的圆角border-

    CSS3设置圆角边框 css3圆角特效代码 CSS3 border-radius 属性 使用 CSS3 borde...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • css3 基础

    1. css3 起步 (图形2D旋转) 2. CSS3 模块 CSS3 被划分为模块。其中最重要的 CSS3 ...

  • CSS3:边框与圆角

    知识点: CSS3圆角CSS3盒阴影CSS3边界图片 一、CSS3圆角 border-radius属性 一个最多可...

  • css3圆角

    css3 圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。CSS3 bord...

  • 1217

    资源:css3制作工具css3按钮生成css3制作特殊效果-web前端实验室 浏览器的型号和css3前缀 五种主流...

网友评论

      本文标题:css3

      本文链接:https://www.haomeiwen.com/subject/ydkppctx.html