2D、3D变形动画
transform：2D变形：复合属性
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix()
transform
- none 定义不进行转换。
- translate(x,y) 定义 2D 平移转换。
- translateX(x) 定义转换，只是用 X 轴的值。
- translateY(y) 定义转换，只是用 Y 轴的值。
transform: translate(100px,100px);
scale(x,y) 定义 2D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
-
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
transform: scale(1.5,0.6);
-
rotate(angle) 定义 2D 旋转，在参数中规定角度。
补充1.角度也可以使用弧度单位：radtransform: rotate(60deg);transform: rotate(60rad);
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
-
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
transform: skewX(10px);
-
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。(x缩放，弧度耽误旋转，弧度旋转，y缩放，x平移，y平移)
变形矩阵功能很强大，但是相对比较复杂，涉及到复杂的数学计算
transform-origin:改变元素变形的基准点
- 像素/百分比
- X轴：left/right/center
- Y轴：top/bottom/center/
transform-origin: 0px 0px;
transform：3D变形：
transform：3D变形可以近似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或更小。
- transform：3D变形函数
- translate3d(x,y,z) 定义 3D 转换。
- translateY(y) 定义转换，只是用 Y 轴的值。
- translateX(x) 定义转换，只是用 X 轴的值。
- translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
- +++++++++++++++++++++++++++++++++++++++
- rotate3d(x,y,z,angle) 定义 3D 旋转。
- rotateX(angle) 定义沿着 X 轴的 3D 旋转。
- rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
- rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
- +++++++++++++++++++++++++++++++++++++++
- scale3d(x,y,z) 定义 3D 缩放转换。
- scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
- scaleX(x) 通过设置 X 轴的值来定义缩放转换。
- scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
- +++++++++++++++++++++++++++++++++++++++
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
- transform-origin 允许你改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
perspective(n) 为 3D 转换元素定义透视视图。父控件中设置- transform-style 规定被嵌套元素如何在 3D 空间中显示。
- flat 子元素将不保留其 3D 位置。
- preserve-3d 子元素将保留其 3D 位置。
- perspective-origin 规定 3D 元素的底部位置。目前浏览器都不支持 perspective-origin 属性
- backface-visibility 定义元素在不面对屏幕时是否可见。浏览器支持度不好
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>6-51课堂演示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="ul1">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<br><br>
<hr>
<ul id="ul2">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</body>
</html>
@charset "UTF-8";
ul{
list-style: none;
font-size: 24px;
}
li{
background-image: linear-gradient(to right,rgb(76, 245, 87),rgb(238, 70, 136));
width: 200px;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
a{
text-decoration: none;
}
#ul1 li{
float: left;
}
li:hover{
background-image: linear-gradient(to left,rgb(76, 245, 87),rgb(238, 70, 136));
transform: rotate(15deg);
transform-origin: left top;
}
hr{
clear: both;
border-top: 50px;
border-width: 3px;
border-style: dashed;
border-color: rgb(230, 122, 149)
}
练习.gif
过渡动画：
- 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
- CSS3
过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：把效果添加到哪个 CSS 属性上/规定效果的时长
过渡动画的属性：
- transition 简写属性，用于在一个属性中设置四个过渡属性。
- transition-property 规定应用过渡的 CSS 属性的名称。
- none 没有属性会获得过渡效果。
- all 所有属性都将获得过渡效果。
- 属性名称
- transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒
- transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- transition-delay 规定过渡效果何时开始。默认是 0。
#div1:hover{
background: rgb(244, 142, 91);
width: 100px;
/*transition-property: all;*/
transition-property: width;
transition-duration: 2.0s;
/*transition-timing-function: ease;*/
transition-timing-function: cubic-bezier(.42, 0, .58, 1);
transition-delay: 1.0s;
}
CSS3 动画属性：
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
-
@keyframes 设定动画规则。可以近似理解为动画的剧本。
- name 必需。定义动画的名称。
- 0-100%/from...to... 必需。动画时长的百分比。
- 需要变化的 CSS 样式属性:必需。
animation 所有动画属性的简写属性，用于设置六个动画属性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
animation-name 属性为 @keyframes 动画规定名称。若设置为none则覆盖已有的动画效果。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
-
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。infinite为无限次播放。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal 顺向播放"。/ alternate 动画应该轮流反向播放。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running 规定动画正在播放。"。/paused 规定动画暂停。
-
animation-fill-mode 规定对象动画时间之外的状态。
- none 不改变默认行为。
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both 向前和向后填充模式都被应用。
@keyframes mytest {
from{
margin-left: 50px;
background-color: rgb(79, 193, 128);
}
to{
margin-left: 300px;
background-color: rgb(193, 233, 79);
}
}
div:hover
{
animation: mytest 2.0s ease 1.0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes mytest {
0%{
margin-left: 50px;
background-color: rgb(79, 193, 128);
}
50%{
margin-left: 300px;
background-color: rgb(203, 213, 6);
}
100%{
margin-left: 150px;
background-color: rgb(193, 233, 79);
}
}
div:hover
{
animation: mytest 2.0s ease 1.0s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
CSS其他常用属性
opacity：透明度设定
- IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
- E8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
- opacity与通过rgba()设定透明度的区别：前者同时作用于元素的标签内容，后者只是作用于元素本身
鼠标的样式 cursor：
- 我们可以通过cursor属性改变浏览器默认的鼠标样式，可改变的样式很多，这里仅仅列出几种相对常用的
- hand是手型
- pointer也是手型，推荐使用这种。
- crosshair是十字型
- text是移动到文本上的那种效果
- wait是等待的那种效果
- default是默认效果
- e-resize是向右的箭头
- ne-resize是向右上的箭头
- n-resize是向上的箭头
- nw-resize是向左上的箭头
- w-resize是向左的箭
- sw-resize是左下的箭头
- s-resize是向下的箭头
- se-resize是向右下的箭头
- auto是由系统自动给出效果
rem:根元素字体的大小
- 浏览器默认字体大小为16px
- em是以父元素字体为基准的
- rem是以根元素字体大小为基准的
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>rem和em的区别</title>
<style type="text/css">
p{
font-size: 0.75em;
}
.span1{
font-size: 2em;
}
.span2{
font-size: 2rem;
}
</style>
</head>
<body>
我是浏览器默认html字体大小为16px;
<p>
我是p标签字体，段落文字大小为0.75em即：12px(16*0.75);<br>
<span class="span1">
我大小是2em，即24px，这里是相对父级字号(12px)*2的，而不是相对body里面的16px
</span><br>
<span class="span2">
我大小是2rem，即32px，这里是相对根元素字号(16px)*2的，而不是相对p里面的12px
</span>
</p>
</body>
</html>
轮廓（outline）
- 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- outline 在一个声明中设置所有的轮廓属性。
- outline-color 设置轮廓的颜色。
- outline-style 设置轮廓的样式。
- outline-width 设置轮廓的宽度。
outline-offset 设置轮廓到边框的距离。 注：css新增属性,不可以写到符合属性里。
- outline 在一个声明中设置所有的轮廓属性。
display 属性常用属性值：
- display的属性值很多，有些目前支持度不好
- none 此元素不会被显示。
- block 此元素将显示为块级元素。特征：换行，可设置宽高尺寸。
- inline 行内元素，默认。特征:大小自适应；不换行。
- inline-block 行内块元素。特征:可以设置大小，但是不可以换行。
- 其他：list-item/table/inline-table/table-cell/table-caption......
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.ul1>li{
background: rgb(73, 25, 56);
width: 150px;
height: 2em;
float: left;
text-align: center;
margin: 5px;
border-radius: 10px 10px 0px 0px;
font-size: 20px;
line-height: 40px;
}
.ul2{
background: rgb(168, 79, 210);
border-radius: 0px 0px 10px 10px;
display: none;
}
.ul1>li:hover>ul
{
display: block;
}
.ul1>li:hover
{
background: rgb(109, 23, 150);
}
.ul2>li>a:hover
{
display: inline-block;
border-radius: 10px;
width: 85%;
height: 2em;
background: rgb(208, 127, 123);
font-weight: bold;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>6-56课堂演示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul class="ul1">
<li>
<a href="">首页</a>
<ul class="ul2">
<li><a href="">新闻</a></li>
<li><a href="">科技</a></li>
<li><a href="">财经</a></li>
<li><a href="">读书</a></li>
</ul>
</li>
<li>
<a href="">首页</a>
<ul class="ul2">
<li><a href="">新闻</a></li>
<li><a href="">科技</a></li>
<li><a href="">财经</a></li>
<li><a href="">读书</a></li>
</ul>
</li>
<li>
<a href="">首页</a>
<ul class="ul2">
<li><a href="">新闻</a></li>
<li><a href="">科技</a></li>
<li><a href="">财经</a></li>
<li><a href="">读书</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
练习.gif
