js特效+一些基本问题++CSS3

css3 :

http://www.yyyweb.com/350.html

实现这样的闪烁效果，用来对用户进行提醒：

步骤一：引用jquery.pulsate.min.js

步骤二：

$(".loading").pulsate({
                color: "#0cc6d1",
                repeat: false
            });

=============================今天遇到一个问题===========================================

在js中，如果变量中有单引号，或双引号，则页面报错

Li ain't

var nickName= “Li ain't”；

这个问题还没想到一个比较好的解决办法，明天再想

=====================css实现如下的效果，鼠标划过图片放大效果===============================

给div注册事件：

.hover（

        function(){alert('鼠标移入事件');},

        function(){alert('鼠标移出事件')}

）;

采用css实现：用下面的属性

transform

transsition

下面详细说说这两个属性：

CSS3 圆角边框 [border-radius]

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中，创建圆角是非常容易的。

在 CSS3 中，border-radius 属性用于创建圆角：

实例

向 div 元素添加圆角：

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 边框阴影[border-shadow]

在 CSS3 中，box-shadow 用于向方框添加阴影：

实例

向 div 元素添加方框阴影：

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 边框图片[border-image]

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

用于创建上面的边框的原始图片：

实例

使用图片创建围绕 div 元素的边框：

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

背景属性：可以像素或百分比规定尺寸

• background-size
• background-origin

例子 1

background-size[调整背景图片的大小：]

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;像素
background-repeat:no-repeat;
}

例子 2

百分比--对背景图片进行拉伸，使其完成填充内容区域：

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;百分比
background-repeat:no-repeat;
}

CSS3 background-origin 属性【规定背景图片的定位区域】

背景图片可以放置于; content-box, padding-box或border-box区域

实例

在 content-box 中定位背景图片：

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

css3多重背景图片

CSS3文本效果【text-shadow】文本阴影

在 CSS3 中，text-shadow 可向文本应用阴影。

向标题添加阴影：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3文本效果【word-wrap】自动换行

实例

允许对长单词进行拆分，并换行到下一行：

p {word-wrap:break-word;}

新的文本属性

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

CSS 2D转换

对元素进行移动、缩放、转动、拉长或拉伸【您可以使用 2D 或 3D 转换来转换您的元素。】

Chrome 和 Safari 需要前缀 -webkit-。2D 转换方法：

• translate()//从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
• rotate()//顺时针旋转给定的角度【rotate(30deg) 把元素顺时针旋转 30 度。】
• scale()//元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：【scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。】
• skew()//翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数  skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
• matrix()//把所有 2D 转换方法组合在一起。方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

translate()

新的转换属性

transform

向元素应用 2D 或 3D 转换。

transform-origin

允许你改变被转换元素的位置。

3D 转换

使用 3D 转换来对元素进行格式化。

Internet Explorer 10 和 Firefox 支持 3D 转换。

• rotateX()
• rotateY()

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);	/* Firefox */
}

斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)。

那你有没有想过，为什么transform:rotate(45deg);会让元素旋转45°, 其后面运作的机理是什么呢？

下面这张图可以解释上面的疑问：

无论是旋转还是拉伸什么的，本质上都是应用的matrix()方法实现的（修改matrix()方法固定几个值），只是类似于transform:rotate这种表现形式，我们更容易理解，记忆与上手。

换句话说，理解transform中matrix()矩阵方法有利于透彻理解CSS3的transform属性，这就与那80%的也会应用但只知表象的人拉开了差距！

OK，现在上面提到的CSS3矩阵解释应该说得通了。