css3（2）
旋转：
2D:transform:
rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转,
translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动
transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存,
scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数
transform:scale(2,4)：宽度变为2倍，高度变为4倍,
skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度
transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转
transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转
transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转.
3D:transform:
rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数;
rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数;
2D与3D的区别:
2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来
3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转。
过渡：transition：专门应对颜色、长度、宽度、位置等变化的过渡：
例子：#aaa{
width:200px;
height: 200px;
border: 1px solid red;
transition:2s;
动画:
1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
2、使用animation进行动画捆绑。两个值：动画名称、时长
3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。
4、加上一个infinite值就可以无限执行了
5、ease——默认开始慢慢加速，结束时慢慢减速。
linear——默认始终使用相同速度运行。
alternate——交替执行（也可以成为正反执行）
例子：
div{
width:300px;
height:300px;
background:black;
position:relative;/*由于需要进行位置改变，所以增加了position属性*/
animation:myfirst 5s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25% {background:yellow; border-radius:0px; left:400px; top:0px;}
50% {background:blue; border-radius:90px; left:400px; top:300px;}
75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}
弹性盒子：
CSS3 的一种新的布局模式:
定义为弹性盒子: display: flex;考虑浏览器兼容问题.
弹性子元素在父容器中的位置排列（横向、纵向）:
flex-direction:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
弹性子元素在父容器中的对齐方式:
横向对齐：justify-content：
flex-end：
center：
space-between：
space-around：
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
例子：
.flex-container {
display: flex;
width: 400px;
height: 250px;
}
.item1 {
flex:;
} .item2 {
flex:;
} .item3 {
flex:;
}
子元素的属性：
order：排序
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
} .flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} .first {
-webkit-order: -1;
order: -1;
}
</style>
</head>
<body> <div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item first">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div> </body>
margin：边距
align-self：纵轴对齐方式
多媒体查询：
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
大于 1001px：
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
css3（2）的更多相关文章
- 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- HTML5+CSS3（3）
一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) ...
- 从零开始学 Web 之 CSS3（一）CSS3概述，选择器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3（三）渐变，background属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 菜鸟学习HTML5+CSS3（一）
主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD) HTML 5的DTD声明为:<!d ...
- HTML5+CSS3（2）
一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...
随机推荐
- C++中对C的扩展学习新增语法——lambda 表达式(匿名函数)
1.匿名函数基础语法.调用.保存 1.auto lambda类型 2.函数指针来保存注意点:[]只能为空,不能写东西 3.std::function来保存 2.匿名函数捕捉外部变量(值方式.引用方式) ...
- nyoj 14-会场安排问题 (贪心)
14-会场安排问题 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:9 submit:15 题目描述: 学校的小礼堂每天都会有许多活动,有时间这些活动 ...
- nyoj 97-兄弟郊游问题(数学)
97-兄弟郊游问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:18 提交数:32 难度:2 题目描述: 兄弟俩骑车郊游,弟弟先出发,每分钟X米,M分钟后,哥哥带一条狗出发.以每 ...
- bash:双引号和单引号
单引号.双引号都能引用字符和字符串 单引号:'$i'仅仅是字符,没有变量的意思了 双以号:变量等能表示出来
- 0xe7f001f0！？NDK调试过程，无故抛出SIGSEGV。
arm调试过程,如果抛一个SIGSEGV,地址在 0xe7f001f0 附近,原因居然是因为我在调试.当我使用n指令跳到下一行代码时,往往变成了continue指令一样地执行.还不确定地抛出SIGSE ...
- vue的一些小记录
1.在一个标签中,不推荐v-for 与 v-if 同时用 //当 v-if 与 v-for,v-for 具有比 v-if 更高的优先级. //当它们处于同一节点(同一标签 一起使用时),v-for 的 ...
- 【2018寒假集训Day 1】【位运算】生成字符串
生成字符串(strs) [问题描述] 假设字符串只由字符“0”,“1”,“”组成,其中字符“”表示该字符可由 字符“0”或“1”替代. 现有一些字符串,根据这些字符串生成所有可生成的字符串.如: {1 ...
- Python3学习-基础
1.直接运行.py文件 在Windows上是不行的,但是在Mac和Linux上是可以的,方法是在.py文件的第一行加上一个特殊的注释: #!/usr/bin/env python3 print('he ...
- 阿里云上万个 Kubernetes 集群大规模管理实践
点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 本文节选自<不一样的 双11 技术:阿里巴巴经济体云原生实践>一书,点击上方图片即可下载! 作者 | 汤志敏,阿里 ...
- LESSON 1-Introduction
Keywords: Communication system, Channel model, Channel capacity by Shannon 1. Two fundamental archit ...