CSS3
Fully backward compatible, no need to change the existing design, the browser will always support CSS2
Important modules in CSS3
| Selector | Box model |
|---|---|
| Animation | Background and border |
| Multi-column layout | Text effects |
| User Interface | 2D and 3D conversion |
CSS3–2D deformation
transform: Animation function, separate properties with spaces
| martrix () | Define matrix transformation: the set of basic X, Y coordinates to reposition the element's position [rotation, zoom, translation (movement), tilt] |
|---|---|
| translate(x,y) | Move the element object. If y is not written, the default is 0. Translate (50px, 100px) is to move 50 pixels from the left element and 100 pixels from the top. ------teanslateX(), translateY() |
| scales （x, y） | Scaling, including integers, negative numbers, and decimals. If y is not written, it will be scaled in proportion to x-----scaleX(), scaleY() |
| rotate（） | The rotation value is degrees, and the unit is deg. Positive number: clockwise rotation, negative number: counterclockwise rotation |
| skew（x,y） | The value of the tilt is degrees, and the unit is deg. Generally not used ---- can also be divided into skew X(), skewY() |
| transition | transition:transform 0.5s; transition time is 0.5s |
CSS3 animation
Principle: gradually change one set of CSS styles into another set of CSS styles
The numbers in the table indicate the first browser version number that supports this attribute.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix attribute.
| Normal browser | animation |
|---|---|
| Firefox browser | -moz-animation; @-moz-keyframes |
| Google Chrome, safari. | -webkit-animation; @-webkit-keyframes |
| opera | -webkit-animation; @ -webkit-keyframes Someone -o-animation; -o-keyfframes |
Note: 1.@keyframes xxx (where xxx is the name defined by yourself), must correspond to the name in div{animation-name: xxx;}, otherwise the animation will not have any effect
@keyframes specifies the animation
from...to... or 0%~100% is the beginning to the end of the animation
@keyframes xxx
{
from {background: red;}
to {background: yellow;}
}
@keyframes xxx
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Animation properties
| @keyframes | Prescribed animation |
|---|---|
| animation | Shorthand properties for all animation properties |
| animation-name | Specifies the name of the @keyframes animation |
| animation-duration | Specifies the seconds or milliseconds it takes for an animation to complete a cycle |
| animation-timing-function | Specifies the speed curve of the animation, the default is ease (slow speed); linear (uniform speed), ease-in (low speed start), ease-out (low speed end) |
| animation-fill-mode | Specifies the style to be applied to the element when the animation is not playing (when the animation is completed, or when the animation has a delay before playing), the default is none; forwards (after the animation ends (determined by animation-iteration-count), The animation will apply the property value.) |
| animation-delay | Specifies the delay time for the start of the animation |
| animation-iteration-count | Specifies the number of times that the animation is played, the default is 1; infinite periodic play |
| animation-direction | Specifies whether the animation will be played in the reverse direction in the next cycle, the default is normal (normal), reverse (reverse), alternate (odd positive even negative), alternate-reverse (odd negative even positive) |
| animation-play-state | Specifies whether the animation is running or paused, the default is'running'; paused: the animation is paused |
<style>
@keyframes demo1{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
75%{background:purple;}
100%{background:black;}
}
div{
width: 200px;
height: 200px;
border-radius: 100%;
animation-name: demo1;
animation-duration: 2s;/*完成一个周期需要2S*/
animation-timing-function:linear;/*运动轨迹为匀速*/
animation-direction:reverse;/*反向播放*/
animation-play-state: running;/*是否正在运行或暂停，默认为'running'*/
animation-fill-mode:none;
animation-delay:2s;/*延时2s再进行播放*/
animation-iteration-count:infinite;/*周期播放，反复播放*/
}
</style>
CSS3 gradient
Divided into linear gradient and radial gradient
Linear gradient: linear-gradient
| background:linear-gradient(red,blue) |  |
|---|---|
| background:linear-gradient(to left,red,blue) |  |
| background:-webkit-linear-gradient(left,red,blue) | Same as above |
| background: -webkit-linear-gradient(top left,red,yellow);----在火狐加-moz |  |
| background: linear-gradient(to top left,red,yellow); | 和上图一样 |
| background: -webkit-linear-gradient(top left,red,rgba(255,0,0,0.1)); |  |
径向渐变：radial-gradient
| background: radial-gradient(red,yellow,pink); |  |
|---|---|
| background: radial-gradient(red 30%,yellow 40%,pink 50%); |  |
| background: -webkit-radial-gradient(left,circle,red,yellow,pink); |  |
| background: -webkit-repeating-radial-gradient(circle,black,black 10px,white 10px,white 20px); |  |
CSS3文字边框
| border-image | 设置所有border-image的属性（默认为None） |
|---|---|
| border-radius | 设置所有四个border-radius的属性 100%圆，直角变圆角 |
| border-shadow | 向方框添加一个或多个阴影, |
border-image ： none | [ | ]{1,4} [ / {1,4} ]? [ stretch | repeat | round ]{0,2}
image:设置背景图片，url方式
number：切片的宽度，可以设置1~4个值，具体表示为四个方位的值
percentage：边框的宽度，使用百分比形式
stretch,repeat,round：用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。
| border-image-source | 用在边框的图片的路径。 url |
|---|---|
| border-image-slice | 图片边框向内偏移。 px |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应 平铺(repeat)、铺满(round)或拉伸(stretch) |
边框阴影：box-shadow
| h-shadow | 水平轴，必须写 | v-shadow | 垂直轴，必须写 |
|---|---|---|---|
| spread(一般不再写) | 阴影尺寸 | color | 阴影颜色 |
| blur | 模糊距离 | inset | 将外部阴影改为内部阴影 |
CSS3背景
background-size：背景图片的尺寸（像素或者百分比）
background-origin:背景图片的定位区域
| padding-box | 背景图像相对于内边距框来定位。 |
|---|---|
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
CSS3文本属性
| 属性 | 描述 |
|---|---|
| hanqing-punctuation | 规定标点字符是否位于线框之外 |
| punctuation-trim | 规定是否对标点字符进行修剪 |
| text-align-last | 设置或检索对象中最后一行文本的对齐方式 |
| text-emphasis | 向元素的文本应用重点镖旗以及重点抱起的前景色 |
| text-justify | 规定当text=align设置为justify时所使用的对齐方法 |
| text-outline | 规定文本的轮廓 |
| text-overflow | 规定当文本溢出时省略文本的处理方式 |
| text-shadow | 向文本添加阴影 |
| text-wrap | 规定文本超过指定容器的边界时是否断开转行 |
| word-break | 规定非中日韩文本的换行规则 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
text-shadow: 5px 5px 5px red;
word-wrap:break-word;在长单词或者URL地址内部进行换行 --- normal只允许在段字点换行，浏览器保持默认处理
CSS3视频，音频
<audio controls="controls" loop="loop" autoplay="autoplay" muted="muted">
<sourse src=音频地址" > </sourse>
<audio>
<video ........... 同上>
<sourse src="视频地址" ></sourse>
</video>
controls=“controls” :有可控的按键
loop=“loop” ：循环播放
autoplay=“autoplay”:自动播放
muted=:“muted”：视频，音频加载成功后静音
this.paly()------播放
this.pause()-------暂停
canvas画布
基本步骤：
- 新建页面：
- 在JS中获取元素 demo = document.getelementbyId(…)
- 使用getContext方法获取上下文，创建context对象，以允许绘制2D环境----demo.getContext(‘2D’)
- JS绘制
1.搭建绘制环境，获取坐标点
获取页面中某个元素的上下左右分别相对于浏览器视窗位置
<canvas id="cv_1" width="500" height="500"></canvas>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var cv_1 = document.getElementById('cv_1');
var can = cv_1.getContext('2d');
var x = cv_1.getBoundingClientRect().left;
var y = cv_1.getBoundingClientRect().top;
window.onmousemove= function(event){move(event)}
function move(event){
var bdx = event.clientX - x;
var bdy = event.clientY - y;
div1.innerHTML = bdx;
div2.innerHTML = bdy;
}
</script>
2.绘制图形
- 填充矩形：fillRect(left,top,height,width)
- 填充颜色：fillstyle = ‘rgb(200,0,0)’
绘制形状
- 栅格（grid)和坐标空间
- 栅格：CANVAS图像默认被网格覆盖，起点为左上角
- 1单元= 1px 坐标（x,y)
绘制矩形
canvas只支持一种原生的圆形绘制：矩形，其他图形都至少需要生成一种路径（path)
- fillRect(x,y,width,height)—实心矩形
- fillStyle = ‘’ ‘’填充矩形 （不填充的话，默认为黑色）
- strokeRect(x,y,width,height)----矩形边框
- clearRect(x,y,width,height)----清除指定区域
- 图形的基本元素是路径：点，线：直线和曲线
绘制步骤
1.beginPath()—Create the starting point of the path
2.moveTo(x,y)----the beginning of the brush movement
3.lineTo(x,y)----get a moving coordinate x,y and the previous point are automatically connected
4.closePath()----close path
5.stroke()----draw outline
6.fill()----fill
-
Fill text: fillText("interesting",x,y)
-
Hollow text: strokeText("fantesting",x,y)
*
-
Gradient:
-
can.beginPath(); var jianbian = can.createLinearGradient(390,180,490,450); jianbian.addColorStop(0,'red'); jianbian.addColorStop(0.3,'yellow'); jianbian.addColorStop(0.6,'orange'); jianbian.addColorStop(1,'blue'); can.fillStyle = jianbian; can.moveTo(390,180); can.lineTo(590,180); can.lineTo(490,450); can.closePath(); can.stroke(); can.fill(); -
-
3. Draw an arc
arc(x,y,r,startAngle,endAngle,anticlockwise);
(x,y) center coordinates
r: radius
startAngle: the arc of the start
endAngle: the arc of the end
anticlockwise: drawing direction: true—counterclockwise false—clockwise
Radian : Math.PT/2 = 90 ---- -Math.PT/2 = -90 = 270
4. Draw irregular arcs
arcTo(x1,y1,x2,y2,radius) draw an arc according to the given control point and radius, and finally connect with a straight line
5. Bezier curve
Second-order bezier curve
Starting point: .moveTo (x, y)
.quadraticCurveTo(cp1x,cp1y,x,y)
The coordinates of point 1 (cp1x, cp1y) are infinitely close
End coordinates (x,y)
Three-level Bezier curve
Starting point: .moveTo (x, y)
.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
The coordinates of point 1 (cp1x, cp1y) are infinitely close
The coordinates of point 2 (cp2x, cp2y) are infinitely close
End coordinates (x,y)