Windows环境下轻松搭建NodeJs服务器

大家好,我是皮皮,今天给大家分享一些好玩的~

前言

Nodejs是GoogleV8引擎的一个JavaScript脚本语言,实际上也就是相当于服务器一样,可以解析网页内容并产生效果。它的出现令JavaScript如虎添翼,而且Node比JavaScript执行更为快速,并且支持分布式,因为它使用了事件驱动型的非阻塞式的模型。说太多反而没意思,不如我们自己搭建一个。

一、下载Nodejs

由于小编是Win7的系统,新版Nodejs不支持,不知道为什么?倒是对Win8很友好。于是小编在清华镜像下载了下来,分享给大家。这里有两个版本,一个是安装包版本(后缀是.msi)无需配置环境变量;另一个是压缩包,直接解压然后配置环境变量即可。这里小编建议大家下载安装包,考虑到有些人不懂的怎么设置环境变量,还是安装包好点,小编偷个懒也下安装包。

二、安装Nodejs

首先我们需要同意它的用户协议,然后选择安装路径,没有硬性规定非得放在系统盘,那么就请放在其它盘,如下:

Windows环境下轻松搭建NodeJs服务器

然后点击下一步,会看到环境设置和安装依赖项,不用管,Next继续,如下:

Windows环境下轻松搭建NodeJs服务器

然后我们会看到有一个选项,如图:

Windows环境下轻松搭建NodeJs服务器

这个是让我们是否选择这个工具,选择了它就会下载,建议选上,然后等待片刻,安装立马就好了,如图:

Windows环境下轻松搭建NodeJs服务器

这个时候会出现一个CMD窗口,提示我们要下载工具了,并且需要关掉所有的窗口,如图:

Windows环境下轻松搭建NodeJs服务器

按回车后,完成闪退,进入CMD,输入命令获取Node版本号,若返回则说明安装成功,如下:

Windows环境下轻松搭建NodeJs服务器

三、新建项目

首先创建一个文件夹,名字不要使用中文和大写字母,然后我们在该目录下打开命令提示符,并输入命令“npm init”,如下:

Windows环境下轻松搭建NodeJs服务器

这里我们一步步按回车,最后输入Yes,即可创建一个Node的项目了。上面给出的都是项目的配置。打开文件夹去看看,如图:

Windows环境下轻松搭建NodeJs服务器

会创建一个Json格式的文件。然后我们需要给这个项目建立一个静态的资源库,一般放置图片,HTML什么的,取名为Static好了,然后放一个HTML文件进去,取名“index.html”,至于内容随便写;然后我们需要在Json文件目录建立一个Json文件,用作启动服务器使用,先随便写一个,如图:

Windows环境下轻松搭建NodeJs服务器

然后我们访问它,这个时候这个Js 文件就是服务端的程序,访问就会出结果,如图:

Windows环境下轻松搭建NodeJs服务器

四、建立一个可以在浏览器中访问的服务器

上面我们所建立的只能在Node中访问,浏览器中不行,下面建立个浏览器中能访问的,这样才叫服务器吗?我们先创建一个服务器的Js文件,内容如下:

var http = require('http');
var server = http.createServer(function (req,res) 
{
res.writeHead(200, {'Content-Type': 'text/plain'}); 
res.end('Hello World\n');
});
server.listen(8080,'127.0.0.1');


console.log('Server running on http://127.0.0.1:8080/');

然后我们在CMD中启动服务,如下所示:

Windows环境下轻松搭建NodeJs服务器

Windows环境下轻松搭建NodeJs服务器

成功。

五、总结

看完Nodejs搭建服务器是不是觉得很简单了,不着急,更精彩的还在后面等着你,这才只是个开端而已。

手把手教你进行Mysql5.x版本的安装及解决安装过程中的bug

前言

Hey,大家好,我是码农星期八,似乎还没有更新过关于Mysql的相关文章,同时也是因为工作需要,一起来学学叭。

数据库种类

常见的数据库有Mysql,Oracle,SQLite,Access,MS SQL Server。

这时候可能有人一看,what?数据库这么多,我要全部都学吗???,学这么多需要多久,是不是又是几个月。。。

我的回答是,只要学好Mysql,学会其他都是分分钟的事,数据库很多东西都是相似的,基本可以照搬使用。

需要说明的是,我们学习的是SQL语法,Mysql,Oracle只是软件,SQL语法可以让我们和这些软件进行交流,实现各种功能。

本次系列就以常用的Mysql进行讲解。

安装

下载

地址
:https://dev.mysql.com/downloads/mysql/

注意的是,这个地址是最新版本的下载地址。

但是通常情况下,我们可能选择老版本的可能性会比较大,毕竟兼容性更强,BUG更少。

历史版本下载地址

地址
:https://downloads.mysql.com/archives/community/

本教程以Mysql 5.7.27版本,win7 32位系统操作,下载的是ZIP Archive版本

各位下载就好了,这里就不做举例了!!!

下载好,解压

下载好之后,放一个有意义的目录,并且进行解压。

我一般会将软件放在其D:/programeFile文件夹下,所以这次还放到这。

初始化

如果上述都完成之后,需要进行初始化,需要cmd进到刚才的mysql-5.7.27-winx64\bin目录下。

执行命令

mysqld.exe --initialize-insecure

执行结果

如果初始化时出现…MSVCP120.dll…错误

如果出现这个错误,在这里只需要安装Visual C++ Redistributable Packages for Visual Studio 2013就行。

安装包vcredistx86x64.zip

下一步下一步就好了, 安装好之后再执行mysqld.exe –initialize-insecure即可。

将Mysql制作成服务

这里要说明一下,mysqld.exe是服务端,运行mysqld.exe,相当于Mysql服务端跑起来了客户机才能远程连接,进行各种操作。

还有一个是mysql.exe,这个是客户端,用这个来连接跑起来的mysqld.exe服务。

如上所说,我们只需要将mysqld.exe跑起来,其实就可以对外提供服务了

但是只一个黑洞洞的窗口,不是太好看,如果我们将它制作成服务,就静默在后台运行了。

还是切换到<数据库安装目录>/bin目录下。

执行命令

mysqld.exe --install

执行成功效果

如果提示Install/Remove of the Service Denied!

如果提示这个,说明权限不够,使用管理员方式打开cmd,切换到数据库安装目录,再执行上述命令即可。

服务已经安装成功

启动/关闭 Mysql服务

上述都完成之后,我们还需要两条命令。

# 启动MySQL服务
net start mysql
# 关闭MySQL服务
net stop mysql

连接Mysql服务

如果上述都完成,那你的Mysql服务必定启动

我们来尝试一下连接服务器。

上述我们说到,mysqld.exe才是服务端,并且我们也将mysqld.exe制作成了服务静默跑在后台。

mysql.exe才是客户端,需要连接服务端(做成服务的mysqld.exe)

还是在<数据库安装目录>/bin下

执行命令

mysql.exe -u root -p

如果如图所示,就表示成功连接Mysql服务端。

总结

本次文章主要讲述如何进行安装Mysql,并且使用的版本是5.x的版本。

不是最新的版本,就是为了防止一些不可预估的情况。

并且我们将Mysql制作成了服务,还是永远直接启动的,开机自启的,这就方便了下次连接。

最后我们使用Mysql提供的客户端进行连接测试,发现是没问题的,并且用户名默认root,没有密码。

如果在操作过程中有任何问题,记得下面留言,我们看到会第一时间解决问题。

敬往事一杯酒,自此不再回头。我是码农星期八,如果觉得还不错,记得动手点赞一下哈。感谢你的观看。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解css z-index(重叠顺序)

div cssz-index层重叠顺序

div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。

从基础语法到应用案例教程讲解学习z-index。

一、z-index语法与结构

z-index 跟具体数字

div{
  z-index:100
}

注意:z-index的数值不跟单位。

z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。

二、z-index使用条件

z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常CSS让不同的对象盒子以不同顺序重叠排列,CSS就是要z-index样式属性。

三、案例

1. z-index重叠顺序案例

为了方便观察,设置3个DIV盒子,分别设置不同css背景颜色,设置相同CSS高度、CSS宽度。分别设置背景颜色)为黑色、红色、蓝色。CSS width为300px,css height为100px。

css代码(没加z-index属性)


<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 300px;
                height: 100px;
                position: absolute;
            }

                .divcss5-1 {

                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .divcss5-2 {

                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .divcss5-3 {

                background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

CSS代码(加上z-index属性后) :

<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 200px;
                height: 100px;
                position: absolute;
            }

            .div css5-1 {
                z-index: 10;
                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .div css5-2 {
                z-index: 20;
                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .div css5-3 {
                z-index: 15;
              background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

html代码

 <div class="divcss5-1"></div>
 <div class="divcss5-2"></div>
 <div class="divcss5-3"></div>

没加的效果:

一篇文章带你了解css z-index(重叠顺序)

加上z-index属性效果:

一篇文章带你了解css z-index(重叠顺序)

2. 案例说明

三个盒子均都使用了绝对定位属性position样式,并且设置相同的高度和宽度样式。为了便于观察CSS使用left、right属性并赋予不同值,让其错落有致。

  • Div css5-1 盒子背景为黑色, z-index:10
  • Div css5-2 盒子背景为红色, z-index:20
  • Divcss5-3盒子背景为蓝色 , z-index:15

为可以看见第一个盒子z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。

四、总结

本文基于CSS基础,介绍了如何使用z-index重叠顺序样式,在实际DIV+CSS布局时候CSS需要绝对定位样式,并且可以使用left、right进行定位,通过不同z-index值实现层重叠顺序排列。代码很简单,希望能够帮助你学习。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章教会你使用HTML5加载音频和视频

【一、前言】

HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

【二、嵌入视频】

下面是在 Web 页面中嵌入视频文件最简单的形式:

 <video src="img/sounds/mu04.mp3"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

  1. Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
  2. mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/3.mp4" type="video/ogg" />
       <source src="img/sounds/3.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

【三、Video 属性规范】

HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)

【四、嵌入音频】

HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

<audio src="img/sounds/mu04.mp3" controls autoplay>
    Your browser does not support the <audio> element.   
</audio>

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/mu04.mp3" type="video/ogg" />
       <source src="img/sounds/mu04.mp3" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

【五、JavaScript 处理媒体事件】

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

下面是一个允许播放给定视频的示例:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="img/sounds/3.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555
   </form>
</body>
</html>

【六、总结】

本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。

可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3按钮知识

在实际开发中,按钮的应用是必不可少。使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式。

一、平面样式CSS按钮

平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势。,这些的平面样式按钮效果很好看。

以下代码是按钮处于正常的情况下的状态。

例:

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
一篇文章带你了解CSS3按钮知识

1. 按钮颜色

颜色:Green ,Blue, Red, Gray ,Black。

可以使用 background-color 属性来设置按钮颜色。

.button1 {
                background-color: #4CAF50;
            }

            /* Green */
            .button2 {
                background-color: #008CBA;
            }

            /* Blue */
            .button3 {
                background-color: #f44336;
            }

            /* Red */
            .button4 {
                background-color: #FFC0CB;
                color: black;
            }

            /* Gray */
            .button5 {
                background-color: #555555;
            }
一篇文章带你了解CSS3按钮知识

2. 按钮大小

尺寸10px ,12px ,16px 20px , 24px。

可以使用 font-size 属性来设置按钮大小:

例 :

.button1 {
                font-size: 10px;
            }

            .button2 {
                font-size: 12px;
            }

            .button3 {
                font-size: 16px;
            }

            .button4 {
                font-size: 20px;
            }

            .button5 {
                font-size: 24px;
            }
一篇文章带你了解CSS3按钮知识

3. 圆角按钮

弧度:2px ,4px ,8px ,12px ,50%。

可以使用 border-radius 属性来设置圆角按钮:

例:

.button1 {
                border-radius: 2px;
            }

            .button2 {
                border-radius: 4px;
            }

            .button3 {
                border-radius: 8px;
            }

            .button4 {
                border-radius: 12px;
            }

            .button5 {
                border-radius: 50%;
            }
一篇文章带你了解CSS3按钮知识

二、边框样式CSS按钮

边框样式按钮与平面按钮属于同一类。唯一的区别是,将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态。

1. 按钮边框颜色

绿 蓝 红 灰 黑

可以使用 border 属性设置按钮边框颜色:

例:

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
一篇文章带你了解CSS3按钮知识

2. 鼠标悬停按钮

可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 可以使用 transition-duration 属性来设置 “hover” 效果的速度:

例:

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

鼠标放在对应的色块上,显示相对应的颜色。

一篇文章带你了解CSS3按钮知识

3. 按钮阴影

阴影按钮 鼠标悬停后显示阴影。

使用 box-shadow 属性来为按钮添加阴影。

例:

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识

4. 按钮宽度

宽度:250px,50% ,100%

默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。

CSS 实例

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}
一篇文章带你了解CSS3按钮知识

三、按钮组

1. 移除外边距并添加 float:left 来设置按钮组:

一篇文章带你了解CSS3按钮知识

CSS 实例

.button {
    float: left;
}

2. 带边框按钮组

一篇文章带你了解CSS3按钮知识

可以使用 border 属性来设置带边框的按钮组:

CSS 实例

.button {
    float: left;
    border: 1px solid green
}

四、按钮动画

1. 按样式CSS按钮

这些“按下”式按钮结合了一些平面设计和假象,让用户感觉他们实际上按下了按钮。当用户按下它时,它似乎陷入了页面。它的实现需要用到阴影来设置,使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
.pm button {
   width: 200px;
   height: 100px;
 color: #fff;
 background-color: #6496c8;
 border: none;
 border-radius: 15px;
 box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
  <div class="pm"> <button class="button">Click Me</button>
  </div>
</body>
</html>   
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识

五、总结

本文基于Html基础,主要介绍了Html中按钮组件的使用,对于按钮中需要用到的做了详细的讲解,用丰富的案例 ,多种样式展示,帮助大家去更好的理解 。

最后,希望可以帮助大家更好的学习CSS3。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解HTML格式化元素

一、为什么要格式化元素?

HTML定义了具有特殊意义的特殊元素定义的文本,比如,使用<b>元素<i>来格式化输出,如粗体或斜体文本。

格式化元素被设计用来显示特殊类型的文本。

二、标签

1. b 标签和 strong 标签

常规显示

HTML <b> 元素定义粗体文本,没有任何额外的重要性,例如:

<b>加粗文本内容.</b>

HTML <strong>元素定义粗文本,增加语义的强调。

例如:

<strong>加粗文本.</strong>

2. i标签 和em标签

HTML 斜体文本.元素定义斜体文本,没有任何额外的重要性。

例如:

<i>斜体文本.</i>

HTML <em>元素定义强调文本,增加语义重要性,例如:

<em>强调文本.</em>

注意:

浏览器显示 和相同, 和相同 。然而,有些标签的含义是有区别的: 和 粗体和斜体文本, 但是 和 意味着文本是“重要的”。


3. small 标签

HTML <small> 元素定义了小文字。

例如:

<h2>HTML <small>Small</small> 格式</h2>

4. mark标签

HTML <mark>元素定义标记或突出文本。

例如:

<h2>HTML <mark>标记</mark> 格式</h2>

5. del标签

HTML <del>元素定义了删除(移除)文字。

例如:

<p>我喜欢的颜色是 <del>蓝色</del> 红色.</p>

6. ins标签

HTML <ins>元素定义了插入文本(添加)。

例如:

<p>我喜欢的 <ins>颜色</ins> 是红色.</p>

7. sub标签

HTML 元素定义下标文本。

例如:

<p>这是一个 <sub>下标</sub> 文本.</p>

8. sup标签

HTML 元素定义上标文本。

例如:

<p>这是一个 <sup>上标</sup> 文本.</p>

三、总结

本文对特殊类型的文本的HTML的标签进行了详细的介绍。对遇到的问题进行详细的解答。代码演示效果图能够更好的理解。代码很简单,希望对你有所启发。希望对大家的学习有帮助。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3 3D 转换知识

CSS3 3D变换功能允许在3D空间中变换元素。

一、元素的3D转换

使用CSS3 3D变换功能,可以对三维空间中的元素执行基本的变换操作。如移动,旋转,缩放和倾斜。

变换后的元素不会影响周围的元素,但可以像绝对定位的元素一样将它们重叠。但是,变换后的元素在其默认位置(未变换)仍会在布局中占用空间。

二、使用CSS变换和Transform()函数变换功能

CSS3 transform属性使用变换功能来操纵元素使用的坐标系,以便应用变换效果。

案例描述了3D变换功能。

1. translate3d()

rotation3d()函数将3D空间中的元素围绕[x,y,z]方向向量为圆点旋转指定角度。这可以写成rotate(vx,vy,vz,angle)。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}

.transformed {
-webkit-transform: translate3d(25px, 25px, 50px);
/* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px);
}

img {
width: 125px;
height: 125px;
}
</style>
</head>
<body style="background-color: aqua;">
<h2>Before Translation:</h2>
<div class="container">
<img src="timg.jpg" alt="Diamond Card">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="timg.jpg" class="transformed" alt="Diamond Card">
</div>
</body>
</html>

该功能translate3d(25px, 25px, 50px)将图像沿X和Y轴正方向移动25个像素,并沿Z轴正方向移动50个像素。

注:

3D变换使用三维坐标系,但是沿Z方向的移动并不总是很明显,因为这些元素存在于二维平面(平面)上并且没有深度。

通过使Z轴上较高的元素(即距观看者更近的元素看起来较大,而离观看者更远的元素看起来更小),可以使用perspective和perspective-origin的CSS属性为场景添加深度感。

注意:

如果对一个元素应用3D变换而不设置透视,结果将不会显示为三维效果。

2. rotate3d()

该rotate3d()函数围绕[x,y,z]方向向量将3D空间中的元素旋转指定角度。可以写成rotate(vx, vy, vz, angle)。

例:

.container{
   width: 125px;
   height: 125px;
   perspective: 300px;
   border: 4px solid #a2b058;
   background: #f0f5d8;
}
.transformed {
   -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
   transform: rotate3d(0, 1, 0, 60deg); 
}
img {
width: 125px;
height: 125px;
}

该功能rotate3d(0, 1, 0, 60deg)将图像沿Y轴旋转60度。也可以使用负值沿相反方向旋转元素。

3. scale3d()

scale3d()函数更改元素的大小。可以写成scale(sx, sy, sz)。除非将其与旋转和透视图等其他变换功能结合使用,否则此功能的效果并不明显。

例:

.container{
   width: 125px;
   height: 125px;
   perspective: 300px;
   border: 4px solid #6486ab;
   background: #e9eef3;
}
.transformed {
   -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
   transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); 
}
img {
width: 125px;
height: 125px;
}

运行结果:

函数scale3d(1, 1, 2)沿Z轴缩放元素,函数rotate3d(1, 0, 0, 60deg)沿X轴旋转图像60度。

4. matrix3d()

matrix3d()功能可以一次执行所有3D转换,例如平移,旋转和缩放。它采用4×4转换矩阵]形式的16个参数。

这是使用matrix3d()功能执行3D转换的示例。

示例

.container {

image

但是,一次执行多个转换时,使用单个转换函数并按顺序列出它们会更方便,如下所示:

示例

.container {
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}

.transformed {
-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
/* Chrome, Safari, Opera */
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

img {
width: 125px;
height: 125px;
}

三、总结

本文基于CSS基础,教读者如何去进行2D->3D的转换,介绍了常见的的几个方法。去进行移动、缩放、转动、拉长或拉伸等一系列操作。使用Html语言,使用丰富的案例,以及效果图的展示。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

希望能够帮助你学习。

——————- End ——————-

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。

一、简单的蒙版

代码解析:

本示例使用ID=mask1定义一个蒙版。

<mask>元素内部是一个<rect>元素。<rect>元素定义了蒙版的形状。

定义了一个使用mask的<rect>元素,<rect>元素使用CSS style属性mask内部引用mask ID属性。

例:

<svg width="500" height="120">
<defs>
<mask id="mask1" x="0" y="0" width="100" height="100">
<rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff" />
</mask>
</defs>
<rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)" />
</svg>

注:

要显示的矩形的高度为100像素,但垂直的前50个像素是可见的。那是因为蒙版矩形只有50个像素高。矩形仅在蒙版矩形所覆盖的部分中可见。

黑色轮廓矩形是没有蒙版的矩形的大小。

二、其他形状的蒙版

可以使用任何SVG形状作为蒙版。

使用圆圈作为蒙版。

<svg>
 <defs>
   <mask id="mask2" x="0" y="0" width="100" height="100" >
     <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
   </mask>
 </defs>

 <rect x="1" y="1" width="100" height="100"
   style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>

</svg>

运行效果:

注:仅在可见蒙版圆的地方可见引用蒙版的矩形。

三、蒙版形状颜色定义蒙版不透明度

1. 如何去定义不透明度 ?

蒙版形状(圆形或矩形)的填充颜色设置为#ffffff。

蒙版形状的颜色定义使用蒙版的形状的不透明度。蒙版形状的颜色越接近#ffffff(白色),使用蒙版的形状将越不透明。蒙版形状的颜色越接近#000000(黑色),使用蒙版的形状将越透明。

2. 案例

其中蒙版由两个具有不同颜色(#ffffff和#66666)的矩形组成。蒙版用于单个矩形,因此运行效果可以使用蒙版查看蒙版中的两个不同形状如何影响相同形状。

<svg width="500" height="120">
<defs>
 <mask id="mask3" x="0" y="0" width="100" height="100" >

   <rect x="0" y="0"  width="100" height="50"
         style="stroke:none; fill: #ffffff"/>

   <rect x="0" y="50" width="100" height="50"
         style="stroke:none; fill: #666666"/>
 </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
  此文本在矩形下方
</text>

<rect x="1" y="1" width="100" height="100"
   style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
 </svg>

运行效果:

四、在蒙版中使用渐变

如果对用作蒙版的形状应用渐变,则可以实现蒙版所应用的形状的渐变透明度。

使用渐变的蒙版,使用蒙版的矩形以及该矩形下的文本,因此可以看到其透明度如何随着蒙版的渐变而变化。

例:

<svg width="500" height="120">
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
<stop offset="100%" stop-color="#000000" stop-opacity="1" />
</linearGradient>

<mask id="mask4" x="0" y="0" width="200" height="100">
<rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient1)" />
</mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #FF0000; mask: url(#mask4)" />
</svg>

运行效果:

注:渐变蒙版可以与其他效果(例如填充图案)结合使用。

SVG代码:

<svg width="500" height="120">
<defs>

 <linearGradient id="gradient2"
               x1="0%"   y1="0%"
               x2="100%" y2="0%"
               spreadMethod="pad">
   <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
   <stop offset="100%" stop-color="#000000" stop-opacity="1"/>
 </linearGradient>


 <pattern id="pattern2"
        x="10" y="10" width="20" height="20"
        patternUnits="userSpaceOnUse" >

   <circle cx="10" cy="10" r="10" style="stroke: none; fill: #FF0000; " />

 </pattern>

 <mask id="mask6" x="0" y="0" width="200" height="100" >
     <rect x="0" y="0"  width="200" height="100"
         style="stroke:none; fill: url(#gradient2)"/>
 </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
  此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
     style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
 </svg>

运行效果:

注:其中可见矩形使用填充图案作为填充,并在其蒙版中使用渐变。

要显示的矩形如何引用其CSS属性中的fill填充图案,以及如何引用其CSS属性中的mask蒙版。

五、在蒙版中使用填充图案

也可以在蒙版中使用填充图案,从而使蒙版成为填充图案的形状。

例:

<svg width="500" height="120">
<defs>
 <pattern id="pattern1"
        x="10" y="10" width="20" height="20"
        patternUnits="userSpaceOnUse" >

     <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
 </pattern>

 <mask id="mask5" x="0" y="0" width="200" height="100" >
   <rect x="0" y="0"  width="200" height="100"
       style="stroke:none; fill: url(#pattern1)"/>
 </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
  此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
   style="stroke: none; fill: #FF0000; mask: url(#mask5)"/>
 </svg>

运行效果

注:矩形现在是半透明的,其中填充图案绘制了圆圈,而在其他位置完全透明。

六、总结

本文基于HTML基础,介绍了SVG中蒙版的应用。定义不同形状的蒙版,设置蒙版的不透明度,蒙版中使用渐变,以及蒙版应用填充图案。都通过项目,进行详细的讲解。

希望能够帮助你更好的学习。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解SVG 渐变知识

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型:(Linear,Radial)。

一、SVG 线性渐变

<linearGradient>元素用于定义线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平,垂直或角渐变。

/*y1和y2相等,而x1和x2不同时,可创建水平渐变。

当x1和x2相等,而y1和y2不同时,可创建垂直渐变。

当x1和x2不同,且y1和y2不同时,可创建角形渐变。*/

实例 1

定义水平线性渐变从黄色到红色的椭圆形。

SVG代码

<!DOCTYPE html>
<html>
<body style="background-color: aqua;">
<title>项目</title>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>

运行效果:

代码解析:

  1. <linearGradient>标签的id属性可为渐变定义一个唯一的名称。
  2. <linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置。
  3. 渐变的颜色范围可由两种或多种颜色组成,每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
  4. 填充属性把 ellipse 元素链接到此渐变。

实例 2

定义一个垂直线性渐变从黄色到红色的椭圆形。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

运行效果:

实例 3

定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#000" font-size="45" font-family="Verdana"
 x="150" y="86"> SVG</text>
</svg>

运行效果:

代码解析:

<text> 元素是用来添加一个文本。

二、SVG 放射性渐变

<radialGradient>元素用于定义放射性渐变。

<radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。

实例 1

定义一个放射性渐变从白色到蓝色椭圆。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
     stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

运行效果:

代码解析:

  1. <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称。
  2. CX,CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆。
  3. 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束。
  4. 填充属性把ellipse元素链接到此渐变。

实例 2

定义放射性渐变从白色到蓝色的另一个椭圆。

SVG代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <radialGradient id="grad1" cx="20%" cy="30%" r="30%"
 fx="50%" fy="50%">     
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />     
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />    
</radialGradient>  
</defs> 
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

运行效果:

三、总结

本文基于HTML基础,介绍了图像SVG元素中的渐变效果,通过案例的分析,再实际项目中需要注意的点,对代码进行解析。开发项目中遇到的难题,都提供了一些有效的解决办法。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

代码很简单,希望能够帮助读者更好的去学习SVG。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3圆角知识

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5


二、border-radius 属性

1. 创建具有背景图的圆角

CSS3中,可以使用border-radius属性,为元素指定圆角显示。

代码如下:

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <title>项目</title>

    <head>
        <style>
            #rcorners1 {
                border-radius: 25px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners3 {
                border-radius: 25px;
                background: url(img/fy_indexBg.jpg);
                background-position: left top;
                background-repeat: repeat;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
</style>
    </head>

    <body>

        <p>The border-radius property allows you to add rounded corners to elements.</p>
        <p>Rounded corners for an element with a specified background color:</p>
        <!--1.具有指定背景色的圆角元素-->
        <p id="rcorners1">Rounded corners!</p>
        <p>Rounded corners for an element with a border:</p>
        <!--2.带边框的圆角元素:-->
        <p id="rcorners2">Rounded corners!</p>
        <!--3.带背景图的圆角元素-->
        <p>Rounded corners for an element with a background image:</p>
        <p id="rcorners3">Rounded corners!</p>

    </body>

</html>

提示:

border-radius属性实际是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 属性的简写。


2. 为每个角指定弧度

如果只为border-radius属性指定一个值,则此半径将应用于所有4个角。

另外可以根据自己开发的需求,分别指定每个角。以下是规则:

四个值: 第一个值适用于左上角,第二个值适用于右上方,第三值应用于右下角,第四值适用于左下角。

三个值: 第一个值适用于左上,二值适用于右上和左下,右下第三值适用于。

两个值: 第一个值适用于左上和右下角,和二值适用于右上和左下角。

一个值: 所有的四个角都是圆的。

实例1:

1.四个值 – border-radius: 15px 50px 30px 5px

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

2.三个值 – border-radius: 15px 50px 30px

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3.两个值 – border-radius: 15px 50px

#rcorners6 {
    border-radius: 15px 50px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

完整代码 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners6 {
      border-radius: 15px 50px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }
</style>
</head>
<body>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html> 

实例2:

创建椭圆形的圆角

创建椭圆形的圆角

椭圆边框 :border-radius: 50px/15px

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

椭圆边框 : border-radius: 15px/50px

#rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

椭圆边框 : border-radius: 50%

#rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
    #rcorners7 {
        border-radius: 50px/15px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
</head>
<body>

  <p>椭圆边框 - border-radius: 50px/15px:</p>
  <p id="rcorners7"></p>

  <p>椭圆边框 - border-radius: 15px/50px:</p>
  <p id="rcorners8"></p>

  <p>椭圆边框 - border-radius: 50%:</p>
  <p id="rcorners9"></p>-->

</body>
</html>

三、总结

1、本文主要讲解了CSS3圆角,通过一些属性的演示,丰富的案例,帮助大家理解CSS知识。希望大家可以耐心的去学习,同时希望碰到问题主动搜索,尝试一下,总会有解决方法。

2、代码很简单,希望能帮到你。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐: