19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画
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动画的更多相关文章
- CSS3 傻傻分不清楚的transition, transform 和 animation
transition transition允许css的属性值在一定的时间区间内平滑地过渡,语法如下: transition : transition-property transition-durat ...
- CSS3中的animation动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 纯css3圆角下拉菜单 都没敢用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
- [HTML] CSS3 圆角
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你 ...
- CSS3 圆角制作的消息提示图标
CSS3 圆角制作的消息提示图标,如果你想知道它是如何被开发的,请点击连接查看.http://www.gbtags.com/gb/rtreplayerpreview/142.htm
- 转-CSS3 圆角(border-radius)
CSS3 圆角(border-radius) 前缀 例1 例2:无边框 书写顺序 其它 支持性 值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -w ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
- 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 ...
随机推荐
- blog编辑技巧
blog里添加目录 添加版权声明 其他 更新日志: 20190719, 添加目录,增加章节:[添加版权声明] blog里添加目录 https://szosoft.blogspot.com/需要使用绝对 ...
- tomcat-性能?
http://www.cnblogs.com/zhuawang/p/5213788.html http://www.cnblogs.com/zhuawang/p/5213192.html http:/ ...
- 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 ...
- 记一次 springboot 参数解析 bug调试 HandlerMethodArgumentResolver
情况描述 前端输入框输入中文的横线 -- ,到后台接收时变成了 &madsh;$mdash 正常应该显示成这样: bug调试思路记录 最开始完全没有向调试源码方面想,试了不少方法,都没解决,没 ...
- 二、Vue组件(component):组件的相互引用、通过props实现父子组件互传值
一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...
- GLConsole的编译和使用
1.在CVars文件中搜索tinyxml,去掉所有tinyxml的编译选项 2.Add the following line to the "CMakeLists.txt" fil ...
- Laravel框架的学习
用xampp环境 1.Composer的安装 http://www.phpcomposer.com/ 下载Composer的安装exe php.ini中extension_dir.browscap路径 ...
- Biu一Biu--GDB
gcc常见编译选项 ** -c **:只激活预处理.编译和汇编,也就是生成obj文件 ** -S **:只激活处理和编译,把文件编译成汇编代码 ** -o **:定制目标名称,缺省的时候编译出来的可执 ...
- VUE3.x 前瞻
文档: API Reference 教程 课件 1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install ...
- Codeforces 459C Pashmak and Buses 机智数学题
这个题目说的是有n个人,有k辆巴士,有m天,每天都要安排n个人坐巴士(可以有巴士为空),为了使得这n个人不会成为朋友,只要每两个人在这m天里坐的巴士至少一天不相同即可. 要你求是否有这样的安排方法,如 ...