CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;

同时分别设置四个角: border-radius:30px 60px 120px 150px;

设置四个圆角相同:
border-radius:50%;

rgba(新的颜色值表示法)

2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

CSS3 transition动画

1、transition-property 设置过渡的属性,比如:width height background-color
2、transition-duration 设置过渡的时间,比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画的更多相关文章

  1. CSS3 傻傻分不清楚的transition, transform 和 animation

    transition transition允许css的属性值在一定的时间区间内平滑地过渡,语法如下: transition : transition-property transition-durat ...

  2. CSS3中的animation动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS3圆角

    使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...

  5. [HTML] CSS3 圆角

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

  6. CSS3 圆角制作的消息提示图标

    CSS3 圆角制作的消息提示图标,如果你想知道它是如何被开发的,请点击连接查看.http://www.gbtags.com/gb/rtreplayerpreview/142.htm

  7. 转-CSS3 圆角(border-radius)

    CSS3 圆角(border-radius)   前缀 例1 例2:无边框 书写顺序 其它 支持性 值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -w ...

  8. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  9. IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc 2.CSS box { -moz-border-radius: 15 ...

随机推荐

  1. blog编辑技巧

    blog里添加目录 添加版权声明 其他 更新日志: 20190719, 添加目录,增加章节:[添加版权声明] blog里添加目录 https://szosoft.blogspot.com/需要使用绝对 ...

  2. tomcat-性能?

    http://www.cnblogs.com/zhuawang/p/5213788.html http://www.cnblogs.com/zhuawang/p/5213192.html http:/ ...

  3. Day7 - E - Strange Way to Express Integers POJ - 2891

    Elina is reading a book written by Rujia Liu, which introduces a strange way to express non-negative ...

  4. 记一次 springboot 参数解析 bug调试 HandlerMethodArgumentResolver

    情况描述 前端输入框输入中文的横线 -- ,到后台接收时变成了 &madsh;$mdash 正常应该显示成这样: bug调试思路记录 最开始完全没有向调试源码方面想,试了不少方法,都没解决,没 ...

  5. 二、Vue组件(component):组件的相互引用、通过props实现父子组件互传值

    一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...

  6. GLConsole的编译和使用

    1.在CVars文件中搜索tinyxml,去掉所有tinyxml的编译选项 2.Add the following line to the "CMakeLists.txt" fil ...

  7. Laravel框架的学习

    用xampp环境 1.Composer的安装 http://www.phpcomposer.com/ 下载Composer的安装exe php.ini中extension_dir.browscap路径 ...

  8. Biu一Biu--GDB

    gcc常见编译选项 ** -c **:只激活预处理.编译和汇编,也就是生成obj文件 ** -S **:只激活处理和编译,把文件编译成汇编代码 ** -o **:定制目标名称,缺省的时候编译出来的可执 ...

  9. VUE3.x 前瞻

    文档: API Reference 教程 课件 1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install ...

  10. Codeforces 459C Pashmak and Buses 机智数学题

    这个题目说的是有n个人,有k辆巴士,有m天,每天都要安排n个人坐巴士(可以有巴士为空),为了使得这n个人不会成为朋友,只要每两个人在这m天里坐的巴士至少一天不相同即可. 要你求是否有这样的安排方法,如 ...