CSS3酷炫特效笔记整理

Question

1、当鼠标放到图片上，图片会旋转一定的角度，

i{background: url(../images/lobg.png) no-repeat; width:30px; height:30px;}
i:hover{background-position: 
0 -30px; transition: all .4s ease-out;}

2、鼠标放在圆形图片中，图片渐渐的变方形

img{border-radius:50%;transition: 
all .4s ease-out；}
a:hover 
img{border-radius:0px；}

3、长字拆分换行

p 
{word-wrap:break-word;}允许对长单词进行拆分，并换行到下一行：

4、改变背景图大小

background-size:63px 
100px; 改变背景图片大小
background-size:40% 
100%;对背景图片进行拉伸，使其完成填充内容区域：
background-origin:content-box;背景图片可以放置于 
content-box、padding-box 或 border-box 区域。

5、边框阴影

text-shadow: 
5px 5px 5px #FF0000;您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
6、当鼠标放到菜单或者图片上时，菜单或图片会渐渐的移动 
a{transition:all 
0.3s ease-out 0s;color:#000;} a:hover{margin-left:5px; 
text-decoration:none;}

7、自定义字体的使用（IE9+）

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

8、圆角边框

border-radius:2px;box-shadow: 
10px 10px 5px #888888;border-image:url(border.png) 
30 30 round;-moz-border-radius:25px; 
/* 旧版 Firefox */

来自w3cfuns.com

Answer 1

我只有一个赞，没办法给你更多的了！

Answer 2

不错的代码，技术牛