11.19
来源:互联网 发布:网络脱口秀节目排行榜 编辑:程序博客网 时间:2024/05/22 10:48
1.过渡
transition:transform 1s linear/ease-in
例:
div
{
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
div:hover
{
width:300px;
}
2.翻转rotate
语法:content.rotate(angle);
eg.
div{
width:300px;
height:300px;
background:red;
transition:all 1s linear;
}
div:hover{
width:300px;
width:300px;
height:300px;
background:red;
transform:rotate(180deg);
3. Keyframes
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于0%和100%。
0% 是动画的开始时间,100%动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
语法:@keyframes animationname {keyframes-selector {css-styles;}}
例1:
使 div 元素匀速向下移动:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
keyframes-selector
必需。动画时长的百分比。
合法的值:
· 0-100%
· from(与 0%相同)
· to(与 100%相同)
例2:在一个动画中改变多个 CSS 样式:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
4. css3多媒体查询
@media规则在css2中就有介绍,针对不同媒体颗星可以定制不同的样式规则。例如:你可针对不同的媒体类型(包括显示器、便携设备、电视机等等)设置不同的样式规则。但这些多媒体类型在很多设备上支持还不够友好
CSS3多媒体查询根据设置自适应显示。媒体查询可用于检测很多事情,例如:
viweport(视窗)的宽度与高度
设备的高度与宽度
朝向(智能手机横屏与竖屏)
分辨率
值
描述
all
用于所有多媒体类型设备
用于打印机
screen
用于电脑屏幕,平板,智能手机等。
speech
用于屏幕阅读器
目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
当浏览器尺寸小于/等于960px时候
@media (max-width: 960px){
body{
background: #000;
}
}
当浏览器尺寸大于/等于960px时候的代码了:
@media screen and (min-width:960px){
body{
background:orange;
}
}
页面宽度大于960px小于1200px的时候执行下面的CSS:
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
5. 弹性盒子
表 1. “flex-direction”属性的可选值及其含义
属性值
含义
row(默认值)
主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr,则排列顺序是从左到右;如果文档顺序是 rtl,则排列顺序是从右到左。
row-reverse
主轴为水平方向。排列顺序与页面的文档顺序相反。
column
主轴为垂直方向。排列顺序为从上到下。
column-reverse
主轴为垂直方向。排列顺序为从下到上。
条目的顺序
“order”属性的使用示例
1
2
3
.flex-item:last-child {
order: -1;
}
- 11.19
- 11.19
- 11.19
- 11.19
- android 11.19
- 11.19笔记
- cpp 11.19
- 11.19周日
- Java-11.19
- 11.19笔记
- News Digest [11.19]
- Oracle登陆出错-11.19
- 训练总结 11.19
- java笔记11.18/11.19
- 11.18-11.19动画
- 六级天天练(11.19)
- 【Java作业】 2017.11.18 / 11.19
- C++ Primer 第11章 习题11.19
- 题目68:三点顺序
- 彻底剖析numpy的数据类型
- 51nod 1562 玻璃切割 (STL map+一点点的思考)
- 机器学习笔记
- vim 配置
- 11.19
- 51nod 1649 齐头并进 (djikstra求最短路径,只用跑一次)
- fjnuoj1193 布置会场( 快速幂 矩阵)
- opencv-图像抠图
- TCP/IP网络编程学习之路二
- 剔除重复数据
- 刷题蓝桥杯(java)---Huffman树
- 数据库的操作
- Bailian2888 字符串中的数字【字符串】