css3

作者: 未松松 | 来源:发表于2017-12-01 14:45 被阅读0次

css3中会忘记的主要是filter,transform,animation,transtion,box-shadom等等。

filter

主要有用到几个属性:1、drop-shadom(x,y,范围,颜色);这个跟box-shadom很像唯一区别是没有box-shadom那么色彩重,且更符合自然原理。还有就是跟box-shadom的叠加性有区别。

2、brightness()亮度,

3blur()模糊

4opacity()透明度

大体就是上面十种,主要用到的其实就上面4种。

transform

1、translate(x,y) 平移    translateX()  translateY()

2、translate3d(x,y,z) 3d平移 translateX() translateY() translateZ()

3、scale(x,y)缩放 scale3d(x,y,z)3d缩放;

4、rotate(x,y)旋转 rotate3d(x,y,z)3d旋转

5、skew(x,y)倾斜翻转skew3d(x,y,z)3d倾斜翻转

transtion

这个属性主要跟hover一起触发。改变元素属性。

animation

主要跟@keyform 定义动画 

animation-name: myfirst;名称

animation-duration: 5s;运行时间

animation-timing-function: linear;运行函数

animation-delay: 2s;等待时间

animation-iteration-count: infinite;运行次数,这个表示不停的运行

大体上上面那些就足够了,而且上面的可以统一写成animition:myfirst 5s linear infinite;

box-shadom

跟drop-shadom差不多,主要区别是它可以叠加;

box-shadom:5px 3px 2px red,5px 3px 2px blue;

box-shadom:(x,y,长度,颜色),(x,y,长度,颜色);

能无限叠加

相关文章

  • 网页高级知识点(三)

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