Javascript基础与面向对象基础~...-CSS3 制作旋转的大风车-CSS3 入门教程系列——CSS3 RGBA 用法详解

当前位置: 编程技术>WEB前端

本页文章导读:

▪Javascript基础与面向对象基础~第八讲从人类的起源谈面向对象回到目录我很荣幸来写这个结局，有时，我们看人，物，事需要用心去看，而不是用眼睛，因为用眼睛看到的往往是事物的假像，在这里对我最可爱的兄弟说一声，对不起。从人类的起源谈面.........

▪CSS3 制作旋转的大风车发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。 HTML：<div ><div ></div><div ></div><div ></div><div >&.........

▪CSS3 入门教程系列——CSS3 RGBA 用法详解　　CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家.........

[1]Javascript基础与面向对象基础~第八讲从人类的起源谈面向对象

来源: 发布时间: 2013-11-06

回到目录

我很荣幸来写这个结局，有时，我们看人，物，事需要用心去看，而不是用眼睛，因为用眼睛看到的往往是事物的假像，在这里对我最可爱的兄弟说一声，对不起。

从人类的起源谈面向对象，事实上主要说的是面向对象，现在我简单来说一下面向对象的特性吧，当你把一个程序写成面向对象的之后，它将有三个好处，即

封装，继承和多态，这是所有面向对象语言的一个共性，而对于JS这个语言来说，也可以借鉴一下，如JS里实现封装，JS里的继承等等。

JS封装：

当我们干某件事时，需要将一些代码组织在一起，形成一个function，而这个过程我们称为封装，而在使用这个功能时，只要知识function的方法签名即可，你不

需要管它的实现细节。代码如：

//验证表单
function chkFormFun(name,password,email){
if(name==''){
alert('用户名不能为空');
return false;
}
if(password==''){
alert('密码不能为空');
return false;
}
if(email==''){
alert('Email不能为空');
return false;
}
return true;
}

我们要需要表单验证的地方，直接调用chkFormFun这个方法即可，无需了解它的实现细节。

JS中的继承：

在部分知识我在第四讲 Javascript中的类对象中有比较详细的介绍，各位可以去查看，而继承的主要思想已经它会将一类对象的共有属性和方法提取到一个新对象

中，这个对象我们称为基类，而其实相关对象可以去继承它，这样基类中的信息将被子类完整继承，并且子类可以根据自己的需要，去重写基类的属性和方法。

由于JS没有提供对象的继承机制，所以我们需要使用一些JS技巧来实现这个效果，它的原则如下：

1 在子类构造函数（constructor）中调用父类构造函数(父类.call()).

2 修改子类prototype(原型链)属性为父类的实例.(prototype一般用来实现对函数的扩展，Dog.prototype = new AnimalFun();表示对父类AnimalFun进行扩展)

3 重置子类的prototype的constructor属性为子类.

JS中的类

下面定义了一个和人类有关的代码，它体现了JS中的类，类中的属性，及类的行为是如何实现的

var Person={ //人对象
　　Name:'zzl',//属性
　　Facial:[‘Eye’,‘Nose’,‘Mouth’],//属性
　　Work:function(){//方法
　　console.log(this.Name+'，这个人开始上班了');
}
}

再调用这个人类对象时，可以这样：

console.log("人的姓名："+Person.Name);

console.log("人的五官："+Person.Facial);

Person.Work();//人要上班了

最后祝所有的好人都交到好的朋友，好的知己，最后感谢老天给我一个最好的朋友，谢谢！

感谢阅读！

回到目录

本文链接

[2]CSS3 制作旋转的大风车

来源: 发布时间: 2013-11-06

发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。

HTML：

实现过程：首先来一个容器里面四个风扇、一个中心点结构很简单，使用绝对分别定好位。然后再使用border-radius把风扇矩形变成半圆，形状就有了，再分别给其上色，红黄蓝绿四种渐变颜色。最后给容器加个animation使整个容器开始旋转即可。

CSS：

.windmill{
padding:10px; width:400px; height:400px; position:relative;
animation-name:moveWindmill;
animation-duration:4s;
animation-timing-function:linearanimation-delay:0;
animation-iteration-count:infinite;
animation-play-state:running;

/* 动画: */
-moz-animation-name:moveWindmill;
-moz-animation-duration:4s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-play-state:running;
-webkit-animation-name:moveWindmill;
-webkit-animation-duration:4s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;

-ms-animation-name:moveWindmill;
-ms-animation-duration:4s;
-ms-animation-timing-function:linear;
-ms-animation-delay:0;
-ms-animation-iteration-count:infinite;
-ms-animation-play-state:running;
}
.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}
.windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000);
background: -webkit-radial-gradient(right, circle,red , #000);
}
.windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}
.windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); }
.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); }.windmill .dot{ width:50px; height:50px; border-radius:50px ; position:absolute; left:50%;top:50%; margin-left:-25px; margin-top:-25px;background:#fff; background: -moz-radial-gradient(center, circle,#fff , #666); background: -webkit-radial-gradient(center, circle,#fff , #666);}

@keyframes moveWindmill /* Firefox */
{
0% { -ms-transform: rotate(0deg)}
25% { -ms-transform: rotate(90deg)}
50% { -ms-transform: rotate(180deg)}
75% { -ms-transform: rotate(270deg)}
100% { -ms-transform: rotate(360deg)}

}

@-ms-keyframes moveWindmill /* ms*/
{
0% { -ms-transform: rotate(0deg)}
25% { -ms-transform: rotate(90deg)}
50% { -ms-transform: rotate(180deg)}
75% { -ms-transform: rotate(270deg)}
100% { -ms-transform: rotate(360deg)}

}
@-webkit-keyframes moveWindmill /*webkit*/
{

0% { -webkit-transform: rotate(0deg)}

25% { -webkit-transform: rotate(90deg)}

50% { -webkit-transform: rotate(180deg)}

[3]CSS3 入门教程系列——CSS3 RGBA 用法详解

来源: 发布时间: 2013-11-06

　　CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生，他就是 Red（红色） Green（绿色）和 Blue（蓝色），那么现在我们所说的 RGBA 又是什么呢？

您可能感兴趣的相关文章

Web 开发人员和设计师必读文章推荐
20个非常绚丽的 CSS3 特性应用演示
35个让人惊讶的 CSS3 动画效果演示
推荐12个漂亮的 CSS3 按钮实现方案
24款非常实用的 CSS3 工具终极收藏

　　RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

基本语法:

　　R：红色值。正整数 | 百分数

　　G：绿色值。正整数 | 百分数

　　B：蓝色值。正整数| 百分数

　　A：透明度。取值0~1之间

取值区间：

　　<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

　　<percentage> ：Saturation(饱和度)。取值为0%到100%之间的值；

　　<percentage> ：Lightness(亮度)。取值为0%到100%之间的值；

　　<opacity> ：alpha(透明度)。取值在0到1之间；

简单说明：

　　RGB 色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

　　RGBA 在 RGB 的基础上多了控制 Alpha 透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

　　浏览器的兼容性：

　　如果庞统说 RGBA 是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起 opacity 这个东西。他在我们 CSS2 中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。

　　现在我们先来看一个 RGBA 和 Opacity 的对比实例，HTML 代码：

<div >
<p>Opacity效果</p>
<ul>
<li >100%</li>
<li >80%</li>
<li >60%</li>
<li >40%</li>
<li >20%</li>
<li >0</li>
</ul>
<p>CSS3的RGBA效果</p>
<ul>
<li >1</li>
<li >0.8</li>
<li >0.6</li>
<li >0.4</li>
<li >0.2</li>
<li >0</li>
</ul>
</div>

　　我们分别给这两上 ul 中的 li 应用相关样式，在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我们使用 CSS3 的 RGBA新属性。

　　Opacity样式

li.opacity{
float: left;
width: 50px;
height: 50px;
}
li.opacity1 {
background: rgb(255,255,0);
opacity: 1;
filter:alpha(opaity=100);
}
li.opacity2 {
background: rgb(255,255,0);
opacity: 0.8;
filter:alpha(opaity=80);
}
li.opacity3 {
background: rgb(255,255,0);
opacity: 0.6;
filter:alpha(opaity=60);
}
li.opacity4 {
background: rgb(255,255,0);
opacity: 0.4;
filter:alpha(opaity=40);
}
li.opacity5 {
background: rgb(255,255,0);
opacity: 0.2;
filter:alpha(opaity=20);
}
li.opacity6 {
background: rgb(255,255,0);
opacity: 0;
filter:alpha(opaity=0);
}

　　RGBA样：

li.rgba {
float: left;
width: 50px;
height: 50px;
}
li.rgba1 {
background: rgba(255,255,0,1);
}
li.rgba2 {
background: rgba(255,255,0,0.8);
}
li.rgba3 {
background: rgba(255,255,0,0.6);
}
li.rgba4 {
background: rgba(255,255,0,0.4);
}
li.rgba5 {
background: rgba(255,255,0,0.2);
}
li.rgba6 {
background: rgba(255,255,0,0);
}

　　我们来看看其效果：

　　效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是 Opacity 后代元素会随着一起具有透明性，所以我们 Opacity 中的字随着透明值下降越来越看不清楚，而 RGBA 不具有这样的问题，但是其支持的浏览器中有一个占在大市场份额的 IE 不支持，这也就是让我们需要去做兼容，（听到兼容二字大家是不是特烦，我也是的）希望 IE 早点能实现。

　　在 CSS2 中 Opacity 能实现透明，而且大多主流浏览器都支持，虽然 IE 下有点麻烦：

/* IE5 - 7 */
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* Everyone else */
opacity: 0.8;

　　那为什么不使用 Opacity 而要使用 RGBA 呢？

　　从我们上面的实例中我们也知道，RGBA 比元素设置 CSS 的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。

　　在 RGBA 还没有出世前，我们都是使用 Opacity 来做透明，但这里存在一个问题，就是我们在父元素中使用了 Opacity，那么其垢代元素都会受其影响，我想这个问题大家都有碰到过，为了解决这样的问题我们需要增加一个空的 div 来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用 Opacity 的实例。首先来看 HTML：

<div >
<div >
<div >
<p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
</div>
</div>
</div>

　　先给他们附上相应的样式：

.bg-box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg {
background: black;
opacity: 0.5;
filter:alpha(opaity=50);
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}

.bg p {
padding: 5px 10px;
color: white;
}

　　效果：

　　从效果中我们明显的看出，这里和我们前面那个例子一样，名叫 bg 的 div 中设置了Opacity，造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题，在不使用别的新技术下，也就是说坚持使用 Opacity。那么我们就需要添加一个空的层，在这个地方应用透明背景层首先来看看改变一下 HTML 结构吧