当前位置:威尼斯 > Web前端 > 通过不同的函数进行图形绘制,然后能实现一些

通过不同的函数进行图形绘制,然后能实现一些

文章作者:Web前端 上传时间:2019-11-08

纯 CSS 实现波浪效果!

2017/07/19 · CSS · 波浪

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

一直以来,使用纯 CSS 实现波浪效果都是十分困难的。

因为实现波浪的曲线需要借助贝塞尔曲线。

图片 1

而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法。

图片 2

当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果。

 

1.canvas绘制

CSS3知识点整理&&一些demo,css3知识点

使用 SVG 实现波浪效果

借助 SVG ,是很容易画出三次贝塞尔曲线的。

看看效果:

图片 3

代码如下:

JavaScript

<svg width="200px" height="200px" version="1.1" xmlns="; <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text> <!-- Wave --> <g id="wave"> <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z"> <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z; M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z; M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate> </path> </g> <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle> <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
    <!-- Wave -->
    <g id="wave">
        <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
        <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
                                    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
        </path>
    </g>
    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>

SVG demo
画出三次贝塞尔曲线的核心在于

JavaScript

<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">

1
<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">

`` 这一段。感兴趣的可以自行去研究研究。

 

步骤

css3能做什么

响应式开发的基础,然后能实现一些酷炫的效果咯。

以下案例纯css3实现,一点都没用js (入门简单,但是水很深)

图片 4叮当猫纯用css3做出         图片 5

图片 6       图片 7

如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习

 

使用 canvas 实现波浪效果

使用 canvas 实现波浪效果的原理与 SVG 一样,都是利用路径绘制出三次贝塞尔曲线并赋予动画效果。

图片 8

使用 canvas 的话,代码如下:

$(function() { let canvas = $("canvas"); let ctx = canvas[0].getContext('2d'); let radians = (Math.PI / 180) * 180; let startTime = Date.now(); let time = 2000; let clockwise = 1; let cp1x, cp1y, cp2x, cp2y; // 初始状态 // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100); // 末尾状态 // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100); requestAnimationFrame(function waveDraw() { let t = Math.min(1.0, (Date.now() - startTime) / time); if(clockwise) { cp1x = 90 + (55 * t); cp1y = 28 + (72 * t); cp2x = 92 - (51 * t); cp2y = 179 - (79 * t); } else { cp1x = 145 - (55 * t); cp1y = 100 - (72 * t); cp2x = 41 + (51 * t); cp2y = 100 + (79 * t); } ctx.clearRect(0, 0, 200, 200); ctx.beginPath(); ctx.moveTo(0, 100); // 绘制三次贝塞尔曲线 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100); // 绘制圆弧 ctx.arc(100, 100, 100, 0, radians, 0); ctx.fillStyle = "rgba(154, 205, 50, .8)"; ctx.fill(); ctx.save(); if( t == 1 ) { startTime = Date.now(); clockwise = !clockwise; } requestAnimationFrame(waveDraw); }); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(function() {
    let canvas = $("canvas");
    let ctx = canvas[0].getContext('2d');
    let radians = (Math.PI / 180) * 180;
    let startTime = Date.now();
    let time = 2000;
    let clockwise = 1;
    let cp1x, cp1y, cp2x, cp2y;
    
    // 初始状态
    // ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
    // 末尾状态
    // ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
    
    requestAnimationFrame(function waveDraw() {  
        let t = Math.min(1.0, (Date.now() - startTime) / time);
          
        if(clockwise) {
            cp1x = 90 + (55 * t);
            cp1y = 28 + (72 * t);
            cp2x = 92 - (51 * t);
            cp2y = 179 - (79 * t);
        } else {
            cp1x = 145 - (55 * t);
            cp1y = 100 - (72 * t);
            cp2x = 41 + (51 * t);
            cp2y = 100 + (79 * t);
        }
        
        ctx.clearRect(0, 0, 200, 200);
        ctx.beginPath();
        ctx.moveTo(0, 100);
        // 绘制三次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
        // 绘制圆弧
        ctx.arc(100, 100, 100, 0, radians, 0);
        ctx.fillStyle = "rgba(154, 205, 50, .8)";
        ctx.fill();
        ctx.save();  
        
        if( t == 1 ) {
            startTime = Date.now();
            clockwise = !clockwise;
        }
 
        requestAnimationFrame(waveDraw);
    });
})

canvas demo
主要是利用了动态绘制 ctx.bezierCurveTo() 三次贝塞尔曲线实现波浪的运动效果,感兴趣的可以自行研究。

添加canvas元素,定义id和范围

边框

1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ border-radius: 100%;就是一个圆了。

border-radios:100px/10px  (水平100,垂直10)

2.阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];(阴影模糊半径:只能是正值;阴影扩展半径:可以是正负值)(自带边框

外阴影x和y(正值)出现在右下;内阴影x和y(正值)出现在左上; 

图片 9

3.为边框应用图片 border-image:

图片 10

纯 CSS 实现波浪效果

好,接下来才是本文的重点!使用纯 CSS 的方式,实现波浪的效果。

你 TM 在逗我?刚刚不是还说使用 CSS 无能为力吗?图片 11

是,我们没有办法直接绘制出三次贝塞尔曲线,但是我们可以利用一些讨巧的方法,模拟达到波浪运动时的效果,姑且把下面这种方法看作一种奇技淫巧。

js里获取canvas元素

颜色相关

1.颜色之RGBA 

语法:color:rgba(R,G,B,A) (A为透明度参数,取值在0~1之间,不可为负值)   

2.渐变色彩

图片 12图片 13

 

原理

原理十分简单,我们都知道,一个正方形,给它添加 border-radius: 50%,将会得到一个圆形。

图片 14

border-radius:用来设置边框圆角,当使用一个半径时确定一个圆形。

好的,如果 border-radius 没到 50%,但是接近 50% ,我们会得到一个这样的图形:

图片 15

注意边角,整个图形给人的感觉是有点圆,却不是很圆。额,这不是废话吗 图片 16

好的,那整这么个图形又有什么用?还能变出波浪来不成?

没错!就是这么神奇。:) 我们让上面这个图形滚动起来(rotate) ,看看效果:

图片 17

可能很多人看到这里还没懂旋转起来的意图,仔细盯着一边看,是会有类似波浪的起伏效果的。

而我们的目的,就是要借助这个动态变换的起伏动画,模拟制造出类似波浪的效果。

通过getContext()方法获取2D绘制环境

文字与字体

 

 

1.text-overflow   (clip:剪切;ellipsis:省略标记)

  省略号效果:text-overflow:ellipsis; overflow:hidden;white-space:nowrap

2.嵌入字体@font-face

图片 18     

 图片 19

3.文本阴影text-shadow  

text-shadow: X-Offset Y-Offset blur color;         x正向右,y正向下;Blur:是指阴影的模糊程度   (text-shadow: 2px 2px 0 red;)

实现

当然,这里看到是全景实现图,所以感觉并不明显,OK,让我们用一个个例子看看具体实现起来能达到什么样的效果。

我们利用上面原理可以做到的一种波浪运动背景效果图:

图片 20

后面漂浮的波浪效果,其实就是利用了上面的 border-radius: 45% 的椭圆形,只是放大了很多倍,视野之外的图形都 overflow: hidden ,只留下了一条边的视野,并且增加了一些相应的 transform 变换。

注意,这里背景是蓝色静止的,运动是白色的椭圆形。

代码也很简单,SCSS 代码如下:

body { position: relative; align-items: center; min-height: 100vh; background-color: rgb(118, 218, 255); overflow: hidden; &:before, &:after { content: ""; position: absolute; left: 50%; min-width: 300vw; min-height: 300vw; background-color: #fff; animation-name: rotate; animation-iteration-count: infinite; animation-timing-function: linear; } &:before { bottom: 15vh; border-radius: 45%; animation-duration: 10s; } &:after { bottom: 12vh; opacity: .5; border-radius: 47%; animation-duration: 10s; } } @keyframes rotate { 0% { transform: translate(-50%, 0) rotateZ(0deg); } 50% { transform: translate(-50%, -2%) rotateZ(180deg); } 100% { transform: translate(-50%, 0%) rotateZ(360deg); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body {
    position: relative;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(118, 218, 255);
    overflow: hidden;
 
    &:before, &:after {
        content: "";
        position: absolute;
        left: 50%;
        min-width: 300vw;
        min-height: 300vw;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
 
    &:before {
        bottom: 15vh;
        border-radius: 45%;
        animation-duration: 10s;
    }
 
    &:after {
        bottom: 12vh;
        opacity: .5;
        border-radius: 47%;
        animation-duration: 10s;
    }
}
 
@keyframes rotate {
    0% {
        transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
}

为了方便写 DEMO,用到的长度单位是 VW 与 VH,不太了解这两个单位的可以戳这里:vh、vw、vmin、vmax 知多少

CSS demo
可能有部分同学,还存在疑问,OK,那我们把上面的效果缩小 10 倍,将视野之外的动画也补齐,那么其实生成波浪的原理是这样的:

图片 21

图中的虚线框就是我们实际的视野范围。

图片 22

通过不同的函数进行图形绘制

与背景相关的样式

1.background-origin : border-box | padding-box | content-box;背景图片分别是从边框内边距(默认值)内容区域开始显示。背景需要设置no-repeat属性。

 图片 23

2.background-clip:默认值为border-box,其他同上

图片 24

3.background-size:

background-size: auto | <长度值> | <百分比> | cover | contain

①.长度或百分比就设一个值时,图片等比缩放。

②.cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器

③.contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止

4.multiple backgrounds

backgroundnull:url() no-repeat left top/200px 55%

值得探讨的点

值得注意的是,要看到,这里我们生成波浪,并不是利用旋转的椭圆本身,而是利用它去切割背景,产生波浪的效果。那为什么不直接使用旋转的椭圆本身模拟波浪效果呢?因为

  • 中间高,两边低的效果不符合物理学原理,看上去十分别扭;

可以点进去看看下面这个例子:

CodePen Demo — pure css wave

坐标定位

CSS3选择器

1.属性选择器:

图片 25

2.结构性伪类选择器:root (根元素为html)、:not 、:empty、:target、:first-child  、:last-child 、:nth-child(n)  (括号里可以是2n+1、-n+5、even、odd等)、:nth-last-child(n) (同上)

x:first-of-type 、x:nth-of-type(n) (括号里同上)、x:last-of-type、x:nth-last-of-type(n)、only-child (子元素只有唯一)、only-of-type (子元素类型唯一)

 

:enabled、:disabled

 

:checked(选择框加点变化示例)、::selection(改变用鼠标选择网页文本的样式)

 

:read-only(与html中readonly='readonly'配合使用)、:read-write (与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。)

 

::before && ::after(作出如下效果图)

使用纯 CSS 实现波浪进度图

好,既然掌握了这种方法,下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。

HTML 结构如下:

<div class="container"> <div class="wave"/> </div>

1
2
3
<div class="container">
    <div class="wave"/>
</div>

CSS 代码如下:

.wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; &::before, &::after{ content: ""; position: absolute; width: 400px; height: 400px; top: 0; left: 50%; background-color: rgba(255, 255, 255, .4); border-radius: 45%; transform: translate(-50%, -70%) rotate(0); animation: rotate 6s linear infinite; z-index: 10; } &::after { border-radius: 47%; background-color: rgba(255, 255, 255, .9); transform: translate(-50%, -70%) rotate(0); animation: rotate 10s linear -5s infinite; z-index: 20; } } @keyframes rotate { 50% { transform: translate(-50%, -73%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 45%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 6s linear infinite;
        z-index: 10;
    }
    
    &::after {
        border-radius: 47%;
        background-color: rgba(255, 255, 255, .9);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
    }
}
 
@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}

效果图:

图片 26

CodePen Demo — Pure Css Wave Loading

 

虽然效果差了一点点,但是相较于要使用学习成本更高的 SVG 或者 CANVAS,这种纯 CSS 方法无疑可使用的场景更多,学习成本更低!

 

绘制的图形定位都是以canvas的左上角为(0,0)原点

拓展:CSS3实现曲边阴影&&翘边阴影

图片 27    图片 28

                               曲边阴影                                                                        翘边阴影

 

 曲边阴影方法:把直角阴影写在盒子上,在盒子内部插入两个曲线阴影,通过定位让曲线阴影和直角阴影重合,改变z-index,boarder-radios来达到效果。

 翘边阴影方法:直角阴影加上两个阴影

以下为实现代码

图片 29 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS实现曲线阴影和翘边阴影</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="wrap effect"> 10 <h1>Shadow Effect</h1> 11 </div> 12 <ul class="box"> 13 <li><img src="images/photo1.jpg"></li> 14 <li><img src="images/photo2.jpg"></li> 15 <li><img src="images/photo3.jpg"></li> 16 </ul> 17 </body> 18 </html> index.html 图片 30body{ font-family: Arial; font-size: 20px; } body,ul{margin: 0; padding: 0; list-style-type: none; } .wrap{ width: 70%; height: 200px; margin: 50px auto; background: #fff; } .wrap h1{ font-size: 20px; text-align: center; line-height: 200px; } .effect{ position: relative; box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; } .effect:after,.effect:before{ /*双重叠加*/ content: ''; background: #f00; position: absolute; z-index: -1; top: 50%; bottom: 0px; left: 30px; right: 30px; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); -o-box-shadow:0 0 20px rgba(0,0,0,0.8); border-radius: 100px/10px; }body{ font-family: Arial; font-size: 20px; } body,ul{margin: 0; padding: 0; list-style-type: none; } .wrap{ width: 70%; height: 200px; margin: 50px auto; background: #fff; } .wrap h1{ font-size: 20px; text-align: center; line-height: 200px; } .effect{ position: relative; box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset; } .effect:after,.effect:before{ /*双重叠加*/ content: ''; background: #f00; position: absolute; z-index: -1; top: 50%; bottom: 0px; left: 30px; right: 30px; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); -o-box-shadow:0 0 20px rgba(0,0,0,0.8); border-radius: 100px/10px; } .box{ width: 980px; height: auto; clear: both; overflow: hidden; margin: 20px auto; } .box li{ width: 300px; height: 210px; position: relative; float: left; background: #fff; margin: 20px 10px; border:2px solid #efefef; box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset; } .box li img{ display: block; width: 290px; height: 200px; margin: 5px; } .box li:before{ content:''; position: absolute; z-index: -2; width: 90%; /*这里需注意*/ height: 80%; left: 20px; bottom: 8px; background: transparent; /*透明的*/ box-shadow: 0 8px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -webkit-transform:skew(-12deg) rotate(-4deg); -o-transform:skew(-12deg) rotate(-4deg); -moz-transform:skew(-12deg) rotate(-4deg); -ms-transform:skew(-12deg) rotate(-4deg); } .box li:after{ content:''; position: absolute; z-index: -2; width: 90%; /*这里需注意*/ height: 80%; right: 20px; bottom: 8px; background: transparent; /*透明的*/ box-shadow: 0 8px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6); -webkit-transform:skew(12deg) rotate(4deg); -o-transform:skew(12deg) rotate(4deg); -moz-transform:skew(12deg) rotate(4deg); -ms-transform:skew(12deg) rotate(4deg); View Code

一些小技巧

单纯的让一个 border-radius 接近 50 的椭圆形旋转,动画效果可能不是那么好,我们可以适当的添加一些其他变换因素,让动画效果看上去更真实:

  • 在动画过程中,动态的改变 border-radius 的值;
  • 在动画过程中,利用 transform 对旋转椭圆进行轻微的位移、变形;
  • 上面也演示到了,多个椭圆同时转动,赋予不同时长的动画,并且添加轻微的透明度,让整个效果更佳逼真。

 

绘制直线

css3中变形

transform

旋转--  :rotate(ndeg):n正值 顺时针;n负值 逆时针

扭曲--  :skew(x,y)  :skewX(x)  :skewY(y)

图片 31:skewX(x) 图片 32:skewY(y)

缩放-- :scale(x,y)  :scareX()   :scareY()

位移--  :translate(x,y)  :translateX(x)  :translateY(y)     (不知道元素长和框的情况下也可以实现水平垂直居中)

 图片 33:translateX(x)图片 34:translateY(y)

图片 35<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变形与动画</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> 我不知道我的宽度和高是多少,我要实现水平垂直居中 </div> </body> </html> index.html 图片 36 1 .wrapper { 2 padding: 20px; 3 background:orange; 4 color:#fff; 5 position:absolute; 6 top:50%; 7 left:50%; 8 border-radius: 5px; 9 -webkit-transform:translate(-50%,-50%); 10 -moz-transform:translate(-50%,-50%); 11 transform:translate(-50%,-50%); 12 } style.css

矩阵--  :matrix(a,b,c,d,e,f) 6个属性的意思的:第一个宽度比例1就是原大小,第二个是上下倾斜1就是2倍,2就是3倍,第三个是左右倾斜,数字和第二个一样的意思,第四个是高度比例1就是原大小,第五个是X方向的像素位移,X方向就是左右,第六个是Y方向的像素位移,X方向就是上下 

   到时用参考这

原点--   transform-origin:对元素进行原点位置改变

           图片 37

最后

系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

moveTo(): 规定起始点

css3中动画

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

transition:all .5s ease-in-out .2s;

transition-property:指定过渡或动态模拟的CSS属性

图片 38:常见过渡属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:过渡函数

图片 39

transition-delay:过渡延迟时间

 

连写:-webkit-animation:move 10s ease-in 0.5s infinite

关键帧:@Keyframes

图片 40 1 @Keyframes changecolor{ 2 0%{ 3 background: red; 4 } 5 20%{ 6 background:blue; 7 } 8 40%{ 9 background:orange; 10 } 11 60%{ 12 background:green; 13 } 14 80%{ 15 background:yellow; 16 } 17 100%{ 18 background: red; 19 } 20 } 21 div { 22 width: 300px; 23 height: 200px; 24 background: red; 25 color:#fff; 26 margin: 20px auto; 27 } 28 div:hover { 29 animation: changecolor 5s ease-out .2s; 30 } style.css

图片 41

调用动画  animation:name  要与@keyframes连用

设置动画播放时间  animation-duration:    完成从0%到100%一次动画所需时间

设置动画播放方式  animation-timing-function

设置动画开始播放的时间  animation-delay

设置动画播放次数  animation-iteration-count:infinate (无限次)

设置动画播放方向  animation-direction:normal(默认) / alternate(偶数次反方向播放)

设置动画的播放状态  animation-play-state:running(默认)/paused

设置动画时间外属性  animation-fill-mode:none/forwards/backwords/both       【解析:有些人可以一路走到底(forwards),有些人在遭受伤害后可以恢复到以前(none),甚至有些人可以从伤痛中快速的逃离(backwards),然而有些人已经回不去了,也不知道后面的路该如何走下去(both)】

             

属性值

效果

none

默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处

forwards

表示动画在结束后继续应用最后的关键帧的位置

backwards

会在向元素应用动画样式时迅速应用动画的初始帧

both

元素动画同时具有forwards和backwards效果

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 42 图片 43

2 赞 7 收藏 评论

lineTo(): 从起点绘制到规定坐标的直线

布局样式相关

多列布局——columns:width count   (产生报纸的效果)

图片 44

多列布局——column-width:auto(默认) | <length> 

多列布局——column-count:auto | <integer>

 

列间距  column-gap:normal(默认) | <length>

列表边框column-rule:width style color

属性值

属性值说明

column-rule-width

类似于border-width属性,主要用来定义列边框的宽度,其默认值为“medium”,column-rule-width属性接受任意浮点数,但不接收负值。但也像border-width属性一样,可以使用关键词:medium、thick和thin。

column-rule-style

类似于border-style属性,主要用来定义列边框样式,其默认值为“none”。column-rule-style属性值与border-style属值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。

column-rule-color

类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent(透明色)

跨列设置 column-span:none(默认) | all(元素跨越所有列)

 

盒子模型  box-sizing:content | border-box | inherit   (这地方了解清楚的话要知道W3C标准盒模型和IE传统下盒模型) 理解这是又多掌握了一个布局利器

属性值

属性值说明

content-box

默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / height

border-box

重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。

inherit

使元素继承父元素的盒模型模式

图片 45

content-box的width是定义内容区域的宽度,然后border、padding什么的,都在内容区域外,导致整个盒子的宽度变大。
border-box的width是定义整个盒子的宽度,所以在border、padding相同的情况下,内容宽度会变小。

 

伸缩布局(Flexbox)

display:flex;

flex-direction:row(水平) | column(垂直);

align-items:flex-start | flex-end | center;(水平方向)

图片 46

 

justify-content:flex-start | flex-end | center;(垂直方向)

 图片 47

Flex项目自动收缩:需要给每个flex项目设置flex属性设置需要伸缩的值。

.bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }

 

关于作者:chokcoco

图片 48

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 49

stroke(): 实现绘制直线的功能

 Media Queries && Responsive设计

W3C总共列出了10种媒体类型,其中ScreenAllPrint为最常见的三种媒体类型。

设备类型

All

所有设备

Braille

盲人用点字法触觉回馈设备

Embossed

盲文打印机

Handheld

便携设备

Print

打印用纸或打印预览视图

Projection

各种投影设备

Screen

电脑显示器

Speech

语音或音频合成器

Tv

电视机类型设备

Tty

使用固定密度字母栅格的媒介,比如电传打字机和终端

引用方法:link标签、@import和CSS3新增的@media   具体参考

Media Queries使用方法:@media 媒体类型and (媒体特性){你的样式}

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

设备屏幕的输出宽度Device Width、not关键词、only关键词  (做响应式网站前必须过一遍)

 

Responsive设计

1.流体网格  2.弹性图片  3.媒体查询 4.屏幕分辨率 5.主要断点

 

这次先整理到这了,下回再学习整理响应式部分的知识点,和大家一起进步!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯。 以下案例纯css3实现,一点都没用js (...

fill(): 实现填充功能

实例:绘制一个三角形

html代码

js代码

window.onload =function(){varcanvas =document.getElementById("canvas");  canvas.width =800;  canvas.height =800;varcontext  = canvas.getContext('2d');  context.strokeStyle ="red";  context.moveTo(100,100);  context.lineTo(200,100);  context.lineTo(150,50);  context.lineTo(100,100);  context.stroke();};

图片 50

1.png

绘制矩形

fillStyle():设置矩形填充颜色。

fillRect(x,y,width,height)。

strokeStyle():设置矩形轮廓颜色。

strokeRect(x,y,width,height)。

绘制圆形(弧形)

beginPath():开始绘制路线

arc(x,y,radius,startAngle,endAngle,anticlockwise)

设置绘制的中心点,半径,起始角度,结束角度和绘制方向。

贝塞尔曲线

二次贝塞尔曲线

quadraticCurveTo(cp1x,cp1y,x,y)

cp1x,cp1y 表示一个控制点坐标;x,y代表终点坐标。

三次贝塞尔曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

cp1x,cp1y和cp2x,cp2y分别代表

两个控制点。

实例1:绘制一个五角星

window.onload =function(){varcanvas =document.getElementById("canvas");varcontext = canvas.getContext('2d');    drawStar(context,120,120,80,30,10,"yellow",0);}functiondrawStar(context, x, y, R, r, width, color, rotation){    context.beginPath();for(vari =0; i <5; i++) {        context.lineTo(Math.cos((18+ i *72- rotation) /180*Math.PI) * R + x, -Math.sin((18+ i *72- rotation) /180*Math.PI) * R + y);        context.lineTo(Math.cos((54+ i *72- rotation) /180*Math.PI) * r + x, -Math.sin((54+ i *72- rotation) /180*Math.PI) * r + y);    }    context.closePath();    context.lineWidth = width;    context.fillStyle = color;    context.fill();}

图片 51

2.png

实例2:绘制宝马标志

window.onload =function(){varcanvas =document.getElementById("canvas");    canvas.width =800;    canvas.height =800;varcontext = canvas.getContext('2d');//圆心坐标x,y  内圆半径r  外圆半径Rvarx =100;vary =100;varr =100;varR = r +50;varcolors =Array("#87CEFA","#FAFAFA","#000");    context.beginPath();    context.translate(100,100);    context.arc(x, y, R,0,Math.PI *2);    line_gra = context.createLinearGradient(-10, -10,20,50);    line_gra.addColorStop(0,"#ddd");    line_gra.addColorStop(1,"#262626");    context.lineWidth =3;    context.strokeStyle ="#000";    context.fillStyle = line_gra;    context.closePath();    context.stroke();    context.fill();    drawBigRound(context, x, y, r,53,"#ADD8E6",7);    drawBm(context, x, y, r, colors);    drawBigRound(context, x, y, r,3,"#9FB6CD",5);    context.beginPath();    context.fillStyle ="#fff";    context.font ="bold 40px verdana";    context.fillText("M",80, -10);    context.rotate(Math.PI /6);    context.fillText("W",125, -75);    context.rotate(-(Math.PI /2));    context.fillText("B",0,35);    context.restore();}functiondrawBm(context, x, y, r, colors){varcolor;for(vari =0; i <4; i++) {        context.beginPath();        context.moveTo(x, y);        context.arc(x, y, r,Math.PI * i /2,Math.PI * (i +1) /2);if(i ==0|| i ==2) {            color = colors[0];        }else{            color = colors[1];        }        context.fillStyle = color;        context.lineWidth =2;        context.strokeStyle = colors[2];        context.closePath();        context.fill();        context.stroke();    }}functiondrawBigRound(context, x, y, r, addr, color, lineWidth){    context.beginPath();    context.arc(x, y, r + addr,0,Math.PI *2);    context.lineWidth = lineWidth;    context.strokeStyle = color;    context.closePath();    context.stroke();}

图片 52

bm.png

2.CSS3 阴影 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow    必需。水平阴影的位置。允许负值。

v-shadow    必需。垂直阴影的位置。允许负值。

blur    可选。模糊距离。

spread    可选。阴影的尺寸。

color    可选。阴影的颜色。请参阅 CSS 颜色值。

inset    可选。将外部阴影 (outset) 改为内部阴影。

3.CSS3 transform属性

transform: none|transform-functions;

transform:rotate(): 旋转,deg是度的意思

transform:rotate(-10deg);

transform:skew(): 倾斜

transform:skew(20deg);

transform:scale(): 缩放,x方向2倍,y方向1.5倍

transform:scale(2,1.5);

transform:translate(): 平移,x方向平移120px,y方向平移10px

transform:translate(120px,10px);

4.CSS3 transtion属性

transition: property duration timing-function delay;

transition-property    规定设置过渡效果的 CSS 属性的名称。

transition-duration    规定完成过渡效果需要多少秒或毫秒。

transition-timing-function    规定速度效果的速度曲线。

transition-delay    定义过渡效果何时开始。

div{width:100px;transition:width2s;-moz-transition:width2s;/* Firefox 4 */-webkit-transition:width2s;/* Safari 和 Chrome */-o-transition:width2s;/* Opera */}

本文由威尼斯发布于Web前端,转载请注明出处:通过不同的函数进行图形绘制,然后能实现一些

关键词: