CSS3

作者: _李杨 | 来源:发表于2017-02-15 15:51 被阅读0次

边框圆角:border-radius: n px
边框阴影:box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

Paste_Image.png
图片边框:border-image:
Paste_Image.png
线性渐变:background-image:linear-gradient(to top left,black,white)
Paste_Image.png
径向渐变:`background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
Paste_Image.png
text-overflow 与 word-wrap:
Paste_Image.png
Paste_Image.png
背景相关:
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
导航栏分割线:
.nav li {
            /*background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;*/
            background-image:linear-gradient(to bottom,#dd2926,#a82724,#dd2926);
            background-repeat:no-repeat;
            background-position:right;
            background-size:1px 15px;
            
        }

效果:


Paste_Image.png

旋转:rotate()
变形:skew()
缩放:scale()
位移:translate()
translate(-50%,-50%)可轻松实现水平垂直居中。
矩阵:matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()
原点:transform-origin:top left
过渡:
transition-property:设定过渡属性。
transition-duration:设定过渡时间。
transition-timing-function:设定缓动函数。

Paste_Image.png
transition-delay:设定延迟时间.
关键帧:
@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

即使用@keyframes定义动画效果,animation来引用该动画。
animation-name:引用定义的动画名。
animation-duration:设定动画持续时间。
animation-timing-function:设定缓动函数,和transition-timing-function类似。
animation-delay:设定动画延迟时间。
animation-itration-count:设定动画循环次数,infinte值为无限循环播放。
animation-direction:设定动画播放方向,默认值为normal,动画正常播放。alternate则是使动画在第奇数次正向播放,第偶数次逆向播放,当循环次数为1时,该属性无效。
animation-play-state:控制动画播放状态,paused为暂停,running为运行,且动画在暂停后再运行,会在动画停止的地方继续运行。
animation-fill-mode:控制动画关键帧外的动作。

Paste_Image.png
@keyframes redToBlue{
  from{
    background: red;
  }
  20%{
      background:green;
  }
  40%{
      background:lime;
  }
  60%{
      background:yellow;
  }
  to{
    background:blue;
  }
}

div {
  width: 200px;
  height: 200px;
  background: black;
  margin: 20px auto;
  animation-name:redToBlue;
  animation-duration: 20s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-fill-mode: none; 
}

例如该段代码,none为以初始帧黑色开始,跳到第一帧红色,直到最后一帧蓝色,最后跳到初始帧黑色。
forwards为以初始帧黑色开始,跳到第一帧红色,停留在最后一帧蓝色。
backwards为以第一帧红色开始,直到最后一帧蓝色,最后跳到初始帧黑色。
both为以第一帧红色开始,停留在最后一帧蓝色。

相关文章

  • 网页高级知识点(三)

    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/xmkfwttx.html