请使用支持CSS3的浏览器查看美洲杯招聘

点击这里体验效果:http://keleyi.com/a/bjad/tfxpf3p5.htm

 

请使用支持CSS3的浏览器查看。请把光标放到图片上,然后再移到图片外,注意效果。 原图 大图

 

以下是源代码:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>足球宝贝来了,任你旋转(CSS3)-柯乐义</title><base target="_blank" />
 6 <style>
 7 
 8 body {
 9 background:#ddd;
10 }
11 .keleyi {
12 width: 220px;
13 height: 220px;
14 margin: 0 auto;
15 background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;
16 -webkit-background-size: 220px 220px;
17 -moz-background-size: 220px 220px;
18 background-size: 220px 220px;
19 -webkit-border-radius: 110px;
20 border-radius: 110px;
21 -webkit-transition: -webkit-transform 2s ease-out;
22 -moz-transition: -moz-transform 2s ease-out;
23 -o-transition: -o-transform 2s ease-out;
24 -ms-transition: -ms-transform 2s ease-out;
25 }
26 .keleyi:hover {
27 -webkit-transform: rotateZ(360deg);
28 -moz-transform: rotateZ(360deg);
29 -o-transform: rotateZ(360deg);
30 -ms-transform: rotateZ(360deg);
31 transform: rotateZ(360deg);
32 }
33 </style>
34 </head>
35 <body>
36 <div class="keleyi"><a href="http://keleyi.com">柯乐义</a>
37 <br />
38 keleyi.com
39 </div>
40 <div>请使用支持CSS3的浏览器查看本页。请把光标放到图片上,然后再移到图片外,注意效果。
41 <br />
42 <a href="http://keleyi.com/a/bjad/tfxpf3p5.htm">原文</a>
43 <a href="http://keleyi.com/image/a/q5l1xnmf.jpg">原图</a> <a href="http://www.bkjia.com/uploads/allimg/140615/155T94617-0.jpg" target="_blank">大图</a>
44 </div>
45 </body>
46 </html>

 例子中用到了CSS3 transform
属性,请参考:http://keleyi.com/a/bjad/m03g9742.htm

web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

最后放上大图,现在巴西世界杯进行中,选了一张足球宝贝,你觉得怎样:
美洲杯招聘 1

http://www.bkjia.com/HTML5/812967.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/812967.htmlTechArticle点击这里体验效果:http://keleyi.com/a/bjad/tfxpf3p5.htm
请使用支持CSS3的浏览器查看。请把光标放到图片上,然后再移到图片外,注意效果。
原图…

相关文章