快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡亰平台游戏APP_龟发之家论坛



CSS3中的变形

在CSS3中,可以使用transform功能来实现翰墨或者图像的扭转、缩放、倾斜、移动这四种变形处置惩罚。

transform根基常识

在CSS3中,经由过程transform属性来达到功能需求,我们这里来看一个例子:

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">div { width: 300px; margin: 150px auto; background-color: Yellow; text-align: center; -webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg); -o-transform: rotate(45deg); }style>

head> body>

div>示例翰墨div> body>

html>

我就爱好这种怪怪的器械!!!

现在我们再来简单看看transform的其它功能:

transform缩放

应用scale措施来实现翰墨或者图像的缩放功能,在参数中定义倍率:

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">.y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center;

-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); }div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}

style>

head> body>

div>示例翰墨div> div class="y">示例翰墨div>

body> html>

我们看到了缩放的威力了

倾斜

这个措施用来实现翰墨或者图片的倾斜,在参数平分手指定水平偏向上的倾斜角度,垂直偏向上的倾斜角度:

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">.y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center;

-webkit-transform: skew(3澳门新葡亰平台游戏APP0deg, 30deg); -moz-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); }div { background: url("yexiaochai.jpg"); width: 343px; h澳门新葡亰平台游戏APPeight: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}

style>

head> body>

div>示例翰墨div> div class="y">示例翰墨div>

body> html>

移动

我们现在可以应用transform措施来使图片或者翰墨移动,在参数上分手指定水平、垂直的间隔即可:

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">.y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center;

-webkit-transform: transform(50px, 50px); -moz-transform: transform(50px, 50px); -o-transform: transform(50px, 50px); }div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}

style>

head> body>澳门新葡亰平台游戏APP

div>示例翰墨div> div class="y">示例翰墨div>

body> html>

这个功能我就感到意义不大年夜了。。。

总结

CSS3的这个功能提出来照样对照故意义的,比如我们的相册要实现扭转操作便简单多了,然后我们想实现模拟生活中放大年夜镜等功能也会带来其他乐趣。

CSS3中的动画

在CSS3中,假如应用动画功能,可以使页面上的翰墨或者图像具有动画效果,可以使背景致从一种颜色平滑过渡到另一种颜色!!!异常不错的特点

CSS3中动画功能分为Transitions功能与Animation功能,他们都可以改变CSS中的属性来产活跃画效果。

Transitisions支持元素由一种属性平滑过渡到另一个属性,Animations功能支持经由过程关键帧来指定在页面上孕育发生更繁杂的动画效果。

Transitions

transition属性应用措施如下:

transition: property duration timing-function

参数一表示要对哪个属性进行平滑过渡参数二表示多长光阴完成

参数三表示经由过程什么措施来平滑过渡

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">.y {background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center;

-webkit-transition: background-image 3s linear; -moz-transition: background-image 3s ulinear; -o-transition: background-image 3s linear; }.y:hover { background-im澳门新葡亰平台游戏APPage: url(2.jpg);}

style> head>

body> div class="y">示例翰墨div>

body> html>

效果实在不差,然则很多浏览器不支持哟!

多个属性变形

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">.y {background-image: url(1.jpg); width: 1340px; h澳门新葡亰平台游戏APPeight: 900px; text-align: center;

-webkit-transition: background-image 1s linear, width 1s linear; -moz-transition: background-image 1s linear, width 1s linear; -o-transition: background-image 1s linear, width 1s linear; }.y:hover { background-image: url(2.jpg); width: 800px;}

style> head>

body> div class="y">示例翰墨div>

body> html>

transition毛病:

transition功能实现的动画只能指定属性的开始值以及停止值,不能实现加倍繁杂的效果,但Animations就可以!

Animations

该功能与transition基础同等,只不过其节制力度更细而已.

html xmlns="http://www.w3.org/1999/xhtml">

head>title>title>

style type="text/css">.y {background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; }

@-webkit-keyframes myImg{

% { background-image: url(yexiaochai.jpg); }% { background-image: url(2.jpg); }

}.y:hover { -webkit-animation: myImg 3s linear; }

style> head>

body> div class="y">示例翰墨div>

body> html>

我想说,他闪瞎了我的合金狗眼!!!

着末,让我们用以上功能实现一个我不停想要的功能:

实现网页淡入淡出

核心代码

@-webkit-keyframes fadein{

% { opacity: 0; }% { opacity: 1; }

}body {-webkit-animation: fadein 3s linear 2; }

结语

这两章的常识点异常实用,分外是后面的动画效果,将会带来很好的用户体验!

当然用得好便是酷,用的不好便是花花绿绿很丢脸了,别的不知道机能问题怎么样了?

转自:http://www.cnblogs.com/yexiaochai/archive/2013/04/27/3046687.html

您可能还会对下面的文章感兴趣: