翻滚闪烁，CSS特效1

时间：2018-02-13 19:28:55 阅读：231 评论：0 收藏：0 [点我收藏+]

标签：data microsoft sim span war lan break sla src

  1 <!DOCTYPE html>
  2 
  3 <html lang="en">
  4 
  5 <head>
  6 
  7     <meta charset="UTF-8" />
  8 
  9     <title>login</title>
 10 
 11     <style type="text/css" media="screen">
 12 
 13         /* 公用样式 */
 14 
 15         body{
 16 
 17             margin:0;
 18 
 19             height: 0;
 20 
 21             background-color: #F1F1F1;
 22 
 23         }
 24 
 25         .warp{
 26 
 27             width: 250px;
 28 
 29             height: 150px;
 30 
 31             background-color: #5e7c87;
 32 
 33             float:left;
 34 
 35             margin:15px 15px;
 36 
 37             box-shadow: 10px 10px 5px #888888;
 38 
 39         }
 40 
 41         .sim-button{
 42 
 43             line-height: 50px;
 44 
 45             height: 50px;
 46 
 47             text-align: center;
 48 
 49             margin-right: auto;
 50 
 51             margin-left: auto;
 52 
 53             margin-top: 50px;
 54 
 55             width: 60%;
 56 
 57             cursor: pointer;
 58 
 59             color: rgba(255,255,255,1);
 60 
 61             border: 1px solid rgba(255,255,255,0.5);
 62 
 63         }
 64 
 65         /* 效果一 */
 66 
 67         .button1{
 68 
 69                     transition: all 0.5s ;
 70 
 71         }
 72 
 73         .button1:hover{
 74 
 75             background-color: rgba(255,255,255,0.2);
 76 
 77             border-radius:20px;
 78 
 79         }
 80 
 81         /* 效果2 */
 82 
 83         .button2{
 84 
 85                     transition: all 0.5s ;
 86 
 87             overflow:hidden;
 88 
 89             position: relative;
 90 
 91         }
 92 
 93         .button2:hover{
 94 
 95             background-color: rgba(255,255,255,0.2);
 96 
 97         }
 98 
 99         .button2>span{
100 
101                     transition: all 0.3s ;
102 
103         }
104 
105         .button2:hover>span{
106 
107             opacity:0;
108 
109         }
110 
111         .button2::after{
112 
113             content:attr(data-text);
114 
115             width: 100%;
116 
117             height: 100%;
118 
119             position: absolute;
120 
121             left: -50px;
122 
123             top: 0;
124 
125             opacity:0;
126 
127             -webkit-transition: all 0.5s ;
128 
129                     transition: all 0.5s ;
130 
131         }
132 
133         .button2:hover::after{
134 
135             left:0;
136 
137             opacity:1;
138 
139         }
140 
141         /* 效果三 */
142 
143          .button3{
144 
145                     transition: all 0.5s ;
146 
147             overflow:hidden;
148 
149             position: relative;
150 
151         }
152 
153         .button3:hover{
154 
155             background-color: rgba(255,255,255,0.2);
156 
157         }
158 
159         .button3>span{
160 
161                     transition: all 0.3s ;
162 
163         }
164 
165         .button3:hover>span{
166 
167             opacity:0;
168 
169         }
170 
171         .button3::after{
172 
173             content:attr(data-text);
174 
175             width: 100%;
176 
177             height: 100%;
178 
179             position: absolute;
180 
181             left: 0;
182 
183             top: 0;
184 
185             opacity:0;
186 
187                     transform: translate(-9%, -50%) rotate(-9deg);
188 
189                     transition: all 0.3s ;
190 
191         }
192 
193         .button3:hover::after{
194 
195                     transform: translate(0, 0) rotate(0deg);
196 
197             opacity:1;
198 
199         }
200 
201         /* 效果四 */
202 
203         .button4{
204 
205             position: relative;
206 
207             overflow:hidden;
208 
209         }
210 
211         .button4 span{
212 
213             z-index:2;
214 
215         }
216 
217         .button4::after{
218 
219             content:"";
220 
221             width: 100%;
222 
223             height: 100%;
224 
225             z-index:1;
226 
227             opacity:0;
228 
229             position: absolute;
230 
231             left: 0;
232 
233             top:0;
234 
235             background-color: rgba(255,255,255,0.5);
236 
237                     transition: all 0.5s ;
238 
239         }
240 
241         .button4:hover::after{
242 
243             opacity:1;
244 
245                     transform: skewX(-180deg) scale(0.5,1);
246 
247         }
248 
249         /* 效果五 */
250 
251         .button5{
252 
253             border:none;
254 
255             position: relative;
256 
257         }
258 
259         .button5::before{
260 
261             content: ‘‘;
262 
263             position: absolute;
264 
265             left: 0;
266 
267             top: 0;
268 
269             width: 100%;
270 
271             height: 100%;
272 
273             border: 1px solid rgba(255,255,255,0.5);
274 
275                     transition: all 0.5s ;
276 
277         }
278 
279         .button5:hover::before{
280 
281             opacity:0;
282 
283                     transform: scale(1.2,1.2);
284 
285         }
286 
287         .button5::after{
288 
289             content:‘‘;
290 
291             width:100%;
292 
293             height:100%;
294 
295             position: absolute;
296 
297             left: 0;
298 
299             top: 0;
300 
301             opacity:0;
302 
303             background-color: rgba(255,255,255,0.5);
304 
305                     transform: scale(0.5,0.5);
306 
307                     transition: all 0.5s ;
308 
309         }
310 
311         .button5:hover::after{
312 
313             opacity:1;
314 
315                     transform: scale(1,1);
316 
317         }
318 
319     </style>
320 
321 </head>
322 
323 <body>
324 
325     <div class="warp">
326 
327         <div class="sim-button button1">
328 
329             <span>login1</span>
330 
331         </div>
332 
333     </div>
334 
335     <div class="warp">
336 
337         <div class="sim-button button2" data-text="login2">
338 
339             <span>login2</span>
340 
341         </div>
342 
343     </div>
344 
345     <div class="warp">
346 
347         <div class="sim-button button3" data-text="login3">
348 
349             <span>login3</span>
350 
351         </div>
352 
353     </div>
354 
355     <div class="warp">
356 
357         <div class="sim-button button4">
358 
359             <span>login4</span>
360 
361         </div>
362 
363     </div>
364 
365     <div class="warp">
366 
367         <div class="sim-button button5">
368 
369             <span>login5</span>
370 
371         </div>
372 
373     </div>
374 
375 </body>
376 
377 </html>

View Code

<!DOCTYPE html>

<head>

<title>login</title>

/* 公用样式 */

body{

margin:0;

height: 0;

background-color: #F1F1F1;

}

.warp{

width: 250px;

height: 150px;

background-color: #5e7c87;

float:left;

margin:15px 15px;

box-shadow: 10px 10px 5px #888888;

}

.sim-button{

line-height: 50px;

height: 50px;

text-align: center;

margin-right: auto;

margin-left: auto;

margin-top: 50px;

width: 60%;

cursor: pointer;

color: rgba(255,255,255,1);

border: 1px solid rgba(255,255,255,0.5);

}

/* 效果一 */

.button1{

transition: all 0.5s ;

}

.button1:hover{

background-color: rgba(255,255,255,0.2);

border-radius:20px;

}

/* 效果2 */

.button2{

transition: all 0.5s ;

overflow:hidden;

position: relative;

}

.button2:hover{

background-color: rgba(255,255,255,0.2);

}

.button2>span{

transition: all 0.3s ;

}

.button2:hover>span{

opacity:0;

}

.button2::after{

content:attr(data-text);

width: 100%;

height: 100%;

position: absolute;

left: -50px;

top: 0;

opacity:0;

-webkit-transition: all 0.5s ;

transition: all 0.5s ;

}

.button2:hover::after{

left:0;

opacity:1;

}

/* 效果三 */

.button3{

transition: all 0.5s ;

overflow:hidden;

position: relative;

}

.button3:hover{

background-color: rgba(255,255,255,0.2);

}

.button3>span{

transition: all 0.3s ;

}

.button3:hover>span{

opacity:0;

}

.button3::after{

content:attr(data-text);

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

opacity:0;

transform: translate(-9%, -50%) rotate(-9deg);

transition: all 0.3s ;

}

.button3:hover::after{

transform: translate(0, 0) rotate(0deg);

opacity:1;

}

/* 效果四 */

.button4{

position: relative;

overflow:hidden;

}

.button4 span{

z-index:2;

}

.button4::after{

content:"";

width: 100%;

height: 100%;

z-index:1;

opacity:0;

position: absolute;

left: 0;

top:0;

background-color: rgba(255,255,255,0.5);

transition: all 0.5s ;

}

.button4:hover::after{

opacity:1;

transform: skewX(-180deg) scale(0.5,1);

}

/* 效果五 */

.button5{

border:none;

position: relative;

}

.button5::before{

content: ‘‘;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

border: 1px solid rgba(255,255,255,0.5);

transition: all 0.5s ;

}

.button5:hover::before{

opacity:0;

transform: scale(1.2,1.2);

}

.button5::after{

content:‘‘;

width:100%;

height:100%;

position: absolute;

left: 0;

top: 0;

opacity:0;

background-color: rgba(255,255,255,0.5);

transform: scale(0.5,0.5);

transition: all 0.5s ;

}

.button5:hover::after{

opacity:1;

transform: scale(1,1);

}

</style>

</head>

<body>

<span>login1</span>

</div>

<span>login2</span>

</div>

<span>login3</span>

</div>

<span>login4</span>

</div>

<span>login5</span>

</div>

</body>

</html>

翻滚闪烁，CSS特效1

标签：data microsoft sim span war lan break sla src

原文地址：https://www.cnblogs.com/mhxy13867806343/p/8447180.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行