欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

实用CSS3的transform实现多种动画效果

程序员文章站 2024-03-25 11:24:10
...

查看效果：http://keleyi.com/a/bjad/b6x9q8gs.htm

以下是代码：

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2 <html> 
  3 <head> 
  4 <base href="http://keleyi.com"> 
  5 <title>实用CSS3的transform实现多种动画效果-柯乐义</title><base target="_blank" />
  6 <style type="text/css"> 
  7 .menu ul { 
  8 border-top: 2px solid #f5f5f5; padding: 0 10px; 
  9 margin: 0; 
 10 } 
 11 
 12 .menu ul li { 
 13 padding: 0; margin: 0; list-style: none; 
 14 } 
 15 
 16 .menu ul li a{ 
 17 color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px; 
 18 height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515;
 19 border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; 
 20 box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; 
 21 text-shadow: 0 1px 1px #686868; 
 22 text-decoration: none; 
 23 } 
 24 .menu ul li.translate a{ 
 25 background: #2EC7D2; 
 26 } 
 27 .menu ul li.translate-x a { 
 28 background: #8FDD21; 
 29 } 
 30 .menu ul li.translate-y a { 
 31 background: #F45917; 
 32 } 
 33 .menu ul li.rotate a { 
 34 background: #D50E19; 
 35 } 
 36 .menu ul li.scale a { 
 37 background: #cdddf2; 
 38 } 
 39 .menu ul li.scale-x a { 
 40 background: #0fDD21; 
 41 } 
 42 .menu ul li.scale-y a { 
 43 background: #cd5917; 
 44 } 
 45 .menu ul li.skew a { 
 46 background: #519; 
 47 } 
 48 .menu ul li.skew-x a { 
 49 background: #D50; 
 50 } 
 51 .menu ul li.skew-y a { 
 52 background: #E19; 
 53 } 
 54 .menu ul li.matrix a { 
 55 background: #919; 
 56 } 
 57 
 58 /* x-轴偏移*/ 
 59 .menu ul li.translate-x a:hover { 
 60 -moz-transform: translateX(-10px); 
 61 -webkit-transform: translateX(-10px); 
 62 -o-transform: translateX(-10px); 
 63 -ms-transform: translateX(-10px); 
 64 transform: translateX(-10px); 
 65 } 
 66 
 67 /* y-轴偏移*/ 
 68 .menu ul li.translate-y a:hover { 
 69 -moz-transform: translateY(-10px); 
 70 -webkit-transform: translateY(-10px); 
 71 -o-transform: translateY(-10px); 
 72 -ms-transform: translateY(-10px); 
 73 transform: translateY(-10px); 
 74 } 
 75 /* x/y 轴都偏移*/ 
 76 .menu ul li a:hover { 
 77 -moz-transform: translate(-10px,-10px); 
 78 -webkit-transform: translate(-10px,-10px); 
 79 -o-transform: translate(-10px,-10px); 
 80 -ms-transform: translate(-10px, -10px); 
 81 transform: translate(-10px,-10px); 
 82 } 
 83 
 84 /* 角度旋转 */ 
 85 .menu ul li.rotate a:hover { 
 86 -moz-transform: rotate(45deg); 
 87 -webkit-transform: rotate(45deg); 
 88 -o-transform: rotate(45deg); 
 89 -ms-transform: rotate(45deg); 
 90 transform: rotate(45deg); 
 91 } 
 92 
 93 /* 缩放 缩放都是以原元素中心点为参考点的 */ 
 94 .menu ul li.scale a:hover { 
 95 -moz-transform: scale(0.8,0.8); 
 96 -webkit-transform: scale(0.8,0.8); 
 97 -o-transform: scale(0.8,0.8); 
 98 -ms-transform: scale(0.8,0.8); 
 99 transform: scale(0.8,0.8); 
100 } 
101 .menu ul li.scale-x a:hover { 
102 -moz-transform: scaleX(0.8); 
103 -webkit-transform: scaleX(0.8); 
104 -o-transform: scaleX(0.8); 
105 -ms-transform: scaleX(0.8); 
106 transform: scaleX(0.8); 
107 } 
108 .menu ul li.scale-y a:hover { 
109 -moz-transform: scaleY(1.2); 
110 -webkit-transform: scaleY(1.2); 
111 -o-transform: scaleY(1.2); 
112 -ms-transform: scaleY(1.2); 
113 transform: scaleY(1.2); 
114 } 
115 
116 /* 旋转 */ 
117 .menu ul li.skew a:hover { 
118 -moz-transform: skew(45deg,15deg); 
119 -webkit-transform: skew(45deg,15deg); 
120 -o-transform: skew(45deg,15deg); 
121 -ms-transform: skew(45deg,15deg); 
122 transform: skew(45deg,15deg); 
123 } 
124 
125 /** transform:skewX(x) */ 
126 .menu ul li.skew-x a:hover { 
127 -moz-transform: skewX(-30deg); 
128 -webkit-transform: skewX(-30deg); 
129 -o-transform: skewX(-30deg); 
130 -ms-transform: skewX(-30deg); 
131 transform: skewX(-30deg); 
132 } 
133 
134 /** transform:skewY(y) */ 
135 .menu ul li.skew-y a:hover { 
136 -moz-transform: skewY(30deg); 
137 -webkit-transform: skewY(30deg); 
138 -o-transform: skewY(30deg); 
139 -ms-transform: skewY(30deg); 
140 transform: skewY(30deg); 
141 } 
142 
143 
144 .menu ul li.matrix a:hover { 
145 -moz-transform: matrix(1,1,-1,0,0,0); 
146 -webkit-transform: matrix(1,1,-1,0,0,0); 
147 -o-transform: matrix(1,1,-1,0,0,0); 
148 -ms-transform: matrix(1,1,-1,0,0,0); 
149 transform: matrix(1,1,-1,0,0,0); 
150 } 
151 </style> 
152 </head> 
153 
154 <body> 
155 <div class="menu"> 
156 <ul class="clearfix"> 
157 <li class="item translate"><a href="http://keleyi.com/a/bjad/b6x9q8gs.htm">Translate</a></li> 
158 <li class="item translate-x"><a href="http://keleyi.com/a/bjac/2fs4sdog.htm">TranslateX</a></li> 
159 <li class="item translate-y"><a href="http://keleyi.com/a/bjac/3iote6u9.htm">TranslateY</a></li> 
160 <li class="item rotate"><a href="http://keleyi.com/a/bjad/8pwhsjna.htm">Rotate</a></li> 
161 <li class="item scale"><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">Scale</a></li> 
162 <li class="item scale-x"><a href="http://keleyi.com/a/bjad/7svi1lby.htm">ScaleX</a></li> 
163 <li class="item scale-y"><a href="http://keleyi.com/a/bjac/fsjrtc0j.htm">ScaleY</a></li> 
164 <li class="item skew"><a href="http://keleyi.com/a/bjad/mroxdkos.htm">Skew</a></li> 
165 <li class="item skew-x"><a href="http://keleyi.com/a/bjac/kwxcvl59.htm">SkewX</a></li> 
166 <li class="item skew-y"><a href="http://keleyi.com/a/bjac/3pipmkmg.htm">SkewY</a></li> 
167 <li class="item matrix"><a href="http://keleyi.com/a/bjac/eu7eaagg.htm">Matrix</a></li> 
168 </ul> 
169 </div> 
170 </body> 
171 </html>

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

相关标签： 前端

上一篇： meta标签对viewport的设置（移动端适配）

下一篇： 2020-08-07

推荐阅读