观天下！css3按钮呼吸效果（css3按钮）
1、下载jquery-1.5.2.min.js包。您可以通过在浏览器中键入来下载这个包。已经测试过了。
(相关资料图)
2、创建新的html文档。
3、添加jquery-1.5.2.min.js包路径。
4、写css风格。
5、style type="text/css"
6、.all { margin: 20px auto; width: 1010px; height: 70px; }
7、.all .bll { width: 70px; height: 70px; float: left; margin-left: 10px; }
8、. All of them. bll。 list { width:50px； Height: 50px-moz-border-radius: 10px; Border radius: 10px cursor: pointer; Margin: 0px automatic; Margins-Top: 10px Line Height: 50px Text Alignment: Center; Color: white; Font thickness: 500; Font Size: 18px Font Series: @ ;
9、}
10、.divradius { -moz-border-radius: 50px; border-radius: 50px; line-height: 60px; }
11、.all .bll .backc1:hover { -moz-border-radius: 50px; border-radius: 50px; }
12、.all .bll .backc6:hover { -moz-border-radius: 50px; border-radius: 50px; }
13、.all .bll .backc7:hover { -moz-box-shadow: 5px 5px 5px #888888; box-shadow: 5px 5px 5px #888888; }
14、.all .bll .backc8 { transition: width 1s, height 1s; -moz-transition: width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */-webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */-o-transition: width 1s, height 1s, -o-transform 1s; /* Opera */}
15、.all .bll .backc8:hover { transform: rotateY(360deg); -moz-transform: rotateY(360deg); /* Firefox 4 */-webkit-transform: rotateY(360deg); /* Safari and Chrome */-o-transform: rotateY(360deg); /* Opera */}
16、.all .bll .backc9 { transition: width 1s, height 1s; -moz-transition: width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */-webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */-o-transition: width 1s, height 1s, -o-transform 1s; /* Opera */}
17、.all .bll .backc9:hover { transform: rotateX(360deg); -moz-transform: rotateX(360deg); /* Firefox 4 */-webkit-transform: rotateX(360deg); /* Safari and Chrome */-o-transform: rotateX(360deg); /* Opera */}
18、.all .bll .backc10 { transition: width 0.5s, height 0.5s; -moz-transition: width 0.5s, height 0.5s, -moz-transform 0.5s; /* Firefox 4 */-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */-o-transition: width 0.5s, height 0.5s, -o-transform 0.5s; /* Opera */}
19、.all .bll .backc10:hover { transform: rotate(45deg); -moz-transform: rotate(45deg); /* Firefox 4 */-webkit-transform: rotate(45deg); /* Safari and Chrome */-o-transform: rotate(45deg); /* Opera */}
20、.all .bll .backc11 { transition: width 0.5s, height 0.5s; -moz-transition: width 0.5s, height 0.5s, -moz-transform 0.5s; /* Firefox 4 */-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */-o-transition: width 0.5s, height 0.5s, -o-transform 0.5s; /* Opera */}
21、.all .bll .backc11:hover { width: 60px; height: 60px; line-height: 60px; margin-top: 5px; transform: rotate(360deg); -moz-transform: rotate(360deg); /* Firefox 4 */-webkit-transform: rotate(360deg); /* Safari and Chrome */-o-transform: rotate(360deg); /* Opera */}
22、.all .bll a { text-decoration: none; }
23、.backc1 { background-color: #66cccc; }
24、.backc2 { background-color: #cc6633; }
25、.backc3 { background-color: #999933; }
26、.backc4 { background-color: #669933; }
27、.backc5 { background-color: #cc9933; }
28、.backc6 { background-color: #cc6666; }
29、.backc7 { background-color: #336666; }
30、.backc8 { background-color: #cc6633; }
31、.backc9 { background-color: #5B5B00; }
32、.backc10 { background-color: #ff9966; }
33、.backc11 { background-color: #669999; }
34、/style
35、写js。
36、script type="text/javascript"
37、 $(function () {
38、 $(".backc2").mouseover(function () {
39、 $(this).animate({ marginTop: "5px" }, 200);
40、 });
41、 $(".backc2").mouseleave(function () {
42、 $(this).animate({ marginTop: "10px" }, 200);
43、 });
44、 $(".backc3").mouseover(function () {
45、 $(this).animate({ marginTop: "5px" }, 200);
46、 $(this).animate({ marginTop: "10px" }, 200);
47、 });
48、 $(".backc4").mouseover(function () {
49、 $(this).fadeTo(300, 0.3);
50、 });
51、 $(".backc4").mouseleave(function () {
52、 $(this).fadeTo(300, 1);
53、 });
54、 $(".backc5").mouseover(function () {
55、 $(this).fadeTo(400, 0.3);
56、 $(this).fadeTo(400, 1);
57、 });
58、 $(".backc6").mouseover(function () {
59、 $(this).addClass("divradius").fadeTo(300, 0.3);
60、 });
61、 $(".backc6").mouseleave(function () {
62、 $(this).removeClass("divradius").fadeTo(300, 1);
63、 });
64、 });
65、 /script
66、写html。
67、div class="all"
68、 div class="bll"a href="#"
69、div class="list backc1 "音乐/div
70、 /a/div
71、 div class="bll"a href="#"
72、" list back C2 " style=" margin-top:10px；"电影/div
73、 /a/div
74、 div class="bll"a href="#"
75、" list back C3 " style=" margin-top:10px；"文章/div
76、 /a/div
77、 div class="bll"a href="#"
78、"列出C4 " style=" opacity:1；"图片/div
79、 /a/div
80、 div class="bll"a href="#"
81、div class=" list back C5 " style=" opacity:0.81134100206046；"心情/div
82、 /a/div
83、 div class="bll"a href="#"
84、"列出C6 " style=" opacity:1；"分享/div
85、 /a/div
86、 div class="bll"a href="#"
87、div class=" list backc7 "晒晒/div
88、 /a/div
89、 div class="bll"a href="#"
90、div class="list backc8 "新闻/div
91、 /a/div
92、 div class="bll"a href="#"
93、div class=" list backc9 "周刊/div
94、 /a/div
95、 div class="bll"a href="#"
96、div class=" list backc10 "笑话/div
97、 /a/div
98、 div class="bll"a href="#"
99、div class=" list backc11 "空间/div
100、 /a/div
101、 /div
102、浏览器查看效果。
本文到此结束，希望对大家有所帮助。
本文由用户上传，如有侵权请联系删除！标签：