【亚洲必赢官网】一路平安波浪效果,css过渡动画

纯 CSS 完毕波浪效果!

2017/07/19 · CSS ·
波浪

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转载!
欢迎参与伯乐在线 专辑我。

直白以来,使用纯 CSS 达成波浪效果都以拾壹分困难的。

因为完结波浪的曲线须求借助贝塞尔曲线。

亚洲必赢官网 1

而采用纯 CSS 的格局,达成贝塞尔曲线,额,一时半刻是没有很好的方法。

亚洲必赢官网 2

自然,借助任何力量(SVG、CANVAS),是可以很轻松的做到所谓的浪花效果的,先看看,非
CSS 格局完成的波浪效果。

 

1.canvas绘制

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

切切实实代码:
1、水平翻转
-moz-transform:scale(-1,1);
-webkit-transform:scale(-1,1);
-o-transform:scale(-1,1);
transform:scale(-1,1);
filter:FlipH;

利用 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>
<【亚洲必赢官网】一路平安波浪效果,css过渡动画。!– 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

固然我们感兴趣,咱们可以去慕课网上找大漠老师的课学习

 

二,垂直翻转
-moz-transform:scale(1,-1);
-webkit-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
filter:FlipV;

利用 canvas 达成波浪效果

行使 canvas 完毕波浪效果的原理与 SVG
一样,都以使用路径绘制出一回贝塞尔曲线并予以动画效果。

亚洲必赢官网 8

应用 canvas 的话,代码如下:

$(function() { let canvas = $(“canvas”); let ctx =
canvas[0].getContext(‘2d’); let radians = (Math.PI / 180) * 180; let
start提姆e = Date.now(); let time = 两千; 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() – start提姆e) / 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: 百分百;就是3个圆了。

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

2.阴影 box-shadow: X轴偏移量 Y轴偏移量 [影子模糊半径] [阴影伸张半径]
[影子颜色]
[黑影方式];(阴影模糊半径:只好是正在;阴影增添半径:可以是正负值)(自带边框

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

亚洲必赢官网 9

3.为边框采纳图片 border-image:

亚洲必赢官网 10

叁,顺时针旋转90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

纯 CSS 完结波浪效果

好,接下去才是本文的要害!使用纯 CSS 的格局,落成波浪的功效。

您 TM 在逗我?刚刚不是还说利用 CSS
无能为力吗?亚洲必赢官网 11

是,大家没有章程直接绘制出三回贝塞尔曲线,可是大家得以拔取一些得益的艺术,模拟达到波浪运动时的效益,姑且把下部那种方法看作一种奇技淫巧。

js里获取canvas元素

水彩相关

1.颜色之RGBA 

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

2.渐变色彩

亚洲必赢官网 12亚洲必赢官网 13

 

transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;

原理

规律极度大概,我们都知情,一个椭圆形,给它添加 border-radius: 50%,将会赢得贰个圆形。

亚洲必赢官网 14

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

好的,如果 border-radius 没到 3/6,不过接近 百分之五拾,大家会博得三个如此的图形:

亚洲必赢官网 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;)

倾斜
transform:skew(20deg);

实现

自然,这里看看是全景完成图,所以感觉并不显眼,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%

{ -moz-transform:rotate(720deg); -webkit-transform:rotate(720deg);
-o-transform:rotate(720deg); transform:rotate(720deg); transition:all
0.4s linear; -webkit-transition:all 0.4s linear; -moz-transition:all
0.4s linear; -o-transition:all 0.4s linear;}

值得探索的点

值得注意的是,要看看,那里大家生成波浪,并不是使用旋转的椭圆本人,而是采取它去切割背景,暴发波浪的功力。那怎么不直接行使旋转的椭圆本身模拟波浪效果啊?因为

  • 高中档高,两边低的效益不适合物文学原理,看上去尤其同室操戈;

可以点进入看看下边这一个事例:

CodePen Demo — pure css wave

坐标定位

CSS3选择器

1.属性选拔器:

亚洲必赢官网 25

2.结构性伪类接纳器:root (根成分为html)、:not
、:empty、:target、:first-child  、:last-child 、:nth-child(n)
 (括号里可以是2n+1、-n+伍,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(作出如下效果图)

黑影动画
<style>
.box { position: relative; left:10px; top:20px; display: inline-block;
width: 100px; height: 100px; border-radius: 5px; background-color:
#fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s
ease-in-out; }
.box::after { content: ”; position: absolute; z-index: -1; width: 100%;
height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px
rgba(0,0,0,0.6); transition: all 0.3s ease-in-out;}
.box:hover::after{ opacity:1;}
.box:hover{ left:20px; top:40px; transform: scale(1.2, 1.2); transition:
all 0.3s ease-in-out;}
</style>
<div class=”box”></div>

行使纯 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

IE滤镜特性:

部分小技巧

只是的让2个 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)
肆个天性的意味的:第四个增幅比例1就是原大小,第三个是前后倾斜1就是2倍,2就是3倍,第一个是左右歪斜,数字和第一,个一律的趣味,第九个是惊人比例1就是原大小,首个是X方向的像素位移,X方向就是反正,第几个是Y方向的像素位移,X方向就是上下 

 
 到时用参考那

原点–   transform-origin:对元素举行原点地点变动

         
 亚洲必赢官网 37

Alpha 透明效果
Blend Trans 渐隐渐现需结合javascript
Blur 动态模糊
Chrome 透明色效果
DropShadow 投影效果
FlipH 水平翻转
qlow 光晕效果
格雷 滤色效果
Invert 底片效果
FlipV 垂直效果
Light 灯光效果需结合javascript
Mask 遮罩效果
RevealTrans 图像切换效果暴发百叶窗、溶解等动态效果需结合javascript
Shadow 阴影效果
Wave 波浪效果
X-ray X光片效果

最后

多元 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%到百分之百三次动画所需时日

设置动画播放形式  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; }

 

rotate

有关我: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.第2断点

 

这一次先整理到那了,下回再攻读整理响应式部分的知识点,和我们一道前行!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

css3能做哪些
响应式开发的基本功,然后能促成部分酷炫的机能咯。
以下案例纯css3已毕,一点都不行js (…

设置成分顺时针旋转的角度,用法是:

fill(): 达成填充效用

transform: rotate(x);

实例:绘制3个三角形

参数x必须是以deg结尾的角度数或0,可为负数表示反向。

html代码

scale

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();};

transform: scale(a); 成分x和y方向均缩放a倍

亚洲必赢官网 50

transform: scale(a, b); 成分x方向缩放a倍,y方向缩放b倍

1.png

transform: scaleX(a); 元素x方向缩放a倍,y方向不变

制图矩形

transform: scaleY(b); 成分y方向缩放b倍,x方向不变

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

translate

fillRect(x,y,width,height)。

设置元素的位移,用法为:

strokeStyle():设置矩形概况颜色。

transform: translate(a, b); 元素x方向位移a,y方向位移b

strokeRect(x,y,width,height)。

transform: translateX(a); 成分x方向位移a,y方向不变

绘图圆形(弧形)

transform: translateY(b); 成分y方向位移b,x方向不变

beginPath():开始绘制路线

skew

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

设置成分倾斜的角度,用法包蕴:

安装绘制的核心点,半径,先河角度,甘休角度和制图方向。

transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b

贝塞尔曲线

transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变

二回贝塞尔曲线

transform: skewY(b); 成分y方向顺时针倾斜角度b,想方向不变

quadraticCurveTo(cp1x,cp1y,x,y)

以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。

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

matrix

三回贝塞尔曲线

安装成分的变形矩阵,因为矩阵变形过于复杂,暂略。

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

origin

cp1x,cp1y和cp2x,cp2y分别代表

设置成分的悬挂点,用法包涵:

八个控制点。

transform-origin: a b; 成分的悬挂点为(a, b)

实例1:绘制壹个五角星

要素的悬挂点即为它旋转和倾斜时的主导点。取值中的a、b可以是长度值、以%结尾的百分比可能left、top、right、bottom几个值。

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

连通效果
transition-property: width;
transition-duration: 2s;
圆角:border-radius:2px;
阴影:box-shadow:1px 1px 2px #FFF;

2.png

 

实例2:绘制Infiniti注解

css渐变背景
background:-webkit-gradient(linear,left top,right
bottom,color-stop(0,#972D20),color-stop(1,#A92400));
background:-moz-linear-gradient(left, #972D20, #A92400);
filter:
progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#972D20′,endColorStr=’#A92400′,gradientType=’1′);

window.onload =function(){varcanvas =document.getElementById(“canvas”); 
  canvas.width =800;    canvas.height =800;varcontext =
canvas.getContext(‘2d’);//圆心坐标x,y  内圆半径r  外圆半径Muranovarx
=100;vary =100;varr =100;varENVISION = 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

图形动画
@keyframes aabb {
0% {
transform: rotate(0deg);
border:5px solid red;
}
50% {
transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
@-webkit-keyframes aabb {
0% {
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50% {
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading {
border: 5px solid black;
border-radius: 40px;
width: 28px;
height: 188px;
animation: aabb 2s infinite linear;
-webkit-animation: aabb 2s infinite linear;
margin: 100px;
}

bm.png

animation:load 0.6s steps(12, end) infinite; -webkit-animation:load 0.6s
steps(12, end) infinite;

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 */}

网站地图xml地图