css3特效

//旋转

transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */

 

//多重背景

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

 

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

p {word-wrap:break-word;}

 

//自定义字体

@font-face { font-family: myFirstFont; src: url('../images/Sansation_Light.ttf'), url('../images/Sansation_Light.eot'); /* IE9+ */ }

div { font-family:myFirstFont; }

 

//从当前位置移动到指定的位置

transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */

//从当前位置移动到指定的位置并旋转

transform:rotate(-45deg)translate(-10px,-60px);
-ms-transform:rotate(-45deg)translate(-10px,-60px); /* IE 9 */
-moz-transform:rotate(-45deg)translate(-10px,-60px); /* Firefox */
-webkit-transform:rotate(-45deg)translate(-10px,-60px); /* Safari and Chrome */
-o-transform:rotate(-45deg)translate(-10px,-60px); /* Opera */

 

//把div放大一倍

transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */

 

 //通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform:skew(44deg,44deg);
-ms-transform:skew(44deg,44deg); /* IE 9 */
-moz-transform:skew(44deg,44deg); /* Firefox */
-webkit-transform:skew(44deg,44deg); /* Safari and Chrome */
-o-transform:skew(44deg,44deg); /* Opera */

 

//相当于一个倒影

transform:rotateX(180deg);
-webkit-transform:rotateX(180deg); /* Safari and Chrome */
-moz-transform:rotateX(180deg); /* Firefox */

 

//过度效果

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

 

//文字渐变代码

background-image: -webkit-linear-gradient(bottom, rgba(0, 215, 233, 1), rgba(2, 161, 249, 1));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;