CSS 2 可以消失的边框线

css代码：

 1 *{
 2         margin: 0;
 3         padding: 0;
 4     }
 5         :root{--color:red;}
 6         /*p{background-color: var(--color); }*/
 7         a{background-color:  var(--color) ; }
 8         h4{background-color:  var(--color); }
 9         .se{
10             margin: 0;
11             padding: 0;
12             width: 50%;
13             height: 30px;
14             margin: 0 auto;
15         }
16         .se p{
17             position: absolute;
18             display: inline-block;
19             position: relative;
20             line-height: 30px;
21             width: 100px;
22         }
23         .se p::after{
24             content: "";
25             position: absolute;
26             bottom: 2px;
27             left: 0;
28             width: 100%;
29             border-bottom: 5px solid red;
30             transition: all .2s .2s linear;
31         }
32         .se p::before{
33             content: "";
34             position: absolute;
35             right: 0;
36             width: 100%;
37             border-top: 5px solid green;
38         /*    transform: rotate(0deg);*/
39             transition: all .2s .2s linear;
40         }
41         .se p:hover::after,.se p:hover::before{width: 0;/*transform: rotate(360deg);*/}
42         .se p:hover span::after,.se p:hover span::before{height: 0;}
43         
44         .se span::after{
45             content: "";
46             position: absolute;
47             left: 0;
48             bottom: 2px;
49             height: 28px;
50             border-left: 5px solid red;
51             transition: all .2s .2s linear;
52         }
53         .se span::before{
54             content: "";
55             position: absolute;
56             right: 0;
57             top: 0px;
58             height: 28px;
59             border-right: 5px solid red;
60             transition: all .2s .2s linear;
61         }
CSS

html代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div class="se">
 9         <p>I AM BOY<span></span></p>    
10     </div>
11 </body>
12 </html>

注意css的hover要给最外层的p标签，不然会有bug

下面这个复杂的大概就是可以用这种方式简单的实现

html：

  1 <!DOCTYPE html>
  2 <html lang="en" >
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <title>CSS3自定义样式超链接按钮DEMO演示</title>
  7   <style>
  8 
  9 body{
 10   font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
 11   font-size: 16px;
 12   margin: 0;
 13   text-transform: uppercase;
 14 }
 15 
 16 @media (min-width: 1200px){
 17     
 18  .secs{
 19   display: grid;
 20   grid-template-columns: repeat(3, minmax(240px, 1fr));
 21  }    
 22 }
 23 
 24 .section{
 25   display: flex;
 26   min-height: 300px;    
 27   text-align: center;
 28     
 29   font-size: 17px;
 30   font-weight: 700;
 31 }
 32 
 33 .section:nth-child(2n+1){
 34   background-color: #f1f4fa;
 35 }
 36 
 37 .section__item{
 38   margin: auto;
 39 }
 40 
 41 .section__box:nth-child(n+2){
 42   margin-top: 40px;
 43 }
 44 </style>
 45       <link rel="stylesheet" href="css/style.css">
 46 </head>
 47 
 48 <body>
 49 <div class="secs">
 50 <div class="section">
 51     <div class="section__item">
 52         <div class="section__box">
 53             <a href="#0" class="r-link ai-element ai-element_padding-bottom ai-element2">
 54                 <span class="ai-element__label">I'm a link</span>
 55             </a>
 56         </div>
 57         <div class="section__box">
 58             <button class="r-button ai-element ai-element_padding-bottom ai-element2">
 59                 <span class="ai-element__label">I'm a button</span>
 60             </button>        
 61         </div>
 62     </div>
 63 </div>
 64 
 65 <div class="section">
 66     <div class="section__item">
 67         <div class="section__box">
 68             <a href="#0" class="r-link ai-element ai-element_padding-bottom ai-element3">
 69                 <span class="ai-element__label">I'm a link</span>
 70             </a>
 71         </div>
 72         <div class="section__box">
 73             <button class="r-button ai-element ai-element_padding-bottom ai-element3">
 74                 <span class="ai-element__label">I'm a button</span>
 75             </button>        
 76         </div>
 77     </div>
 78 </div>
 79 
 80 <div class="section">
 81     <div class="section__item">
 82         <div class="section__box">
 83             <a href="#0" class="r-link ai-element ai-element_padding-all ai-element1">
 84                 <span class="ai-element__label">I'm a link</span>
 85             </a>
 86         </div>
 87         <div class="section__box">
 88             <button class="r-button ai-element ai-element_padding-all ai-element1">
 89                 <span class="ai-element__label">I'm a button</span>
 90             </button>        
 91         </div>
 92     </div>
 93 </div>
 94 <div class="section">
 95     <div class="section__item">
 96         <div class="section__box">
 97             <a href="#0" class="r-link ai-element ai-element_padding-all ai-element4">
 98                 <span class="ai-element__label">I'm a link</span>
 99             </a>
100         </div>
101         <div class="section__box">
102             <button class="r-button ai-element ai-element_padding-all ai-element4">
103                 <span class="ai-element__label">I'm a button</span>
104             </button>        
105         </div>
106     </div>
107 </div>
108 <div class="section">
109     <div class="section__item">
110         <div class="section__box">
111             <a href="#0" class="r-link ai-element ai-element_padding-all ai-element5">
112                 <span class="ai-element__label">I'm a link</span>
113             </a>
114         </div>
115         <div class="section__box">
116             <button class="r-button ai-element ai-element_padding-all ai-element5">
117                 <span class="ai-element__label">I'm a button</span>
118             </button>        
119         </div>
120     </div>
121 </div>
122 <div class="section">
123     <div class="section__item">
124         <div class="section__box">
125             <a href="#0" class="r-link ai-element ai-element_bg ai-element6">
126                 <span class="ai-element__label">I'm a link</span>
127             </a>
128         </div>
129         <div class="section__box">
130             <button class="r-button ai-element ai-element_bg ai-element6">
131                 <span class="ai-element__label">I'm a button</span>
132             </button>        
133         </div>
134     </div>
135 </div>
136 <div class="section">
137     <div class="section__item">
138         <div class="section__box">
139             <a href="#0" class="r-link ai-element ai-element_bg ai-element7">
140                 <span class="ai-element__label">I'm a link</span>
141             </a>
142         </div>
143         <div class="section__box">
144             <button class="r-button ai-element ai-element_bg ai-element7">
145                 <span class="ai-element__label">I'm a button</span>
146             </button>        
147         </div>
148     </div>
149 </div>
150 <div class="section">
151     <div class="section__item">
152         <div class="section__box">
153             <a href="#0" class="r-link ai-element ai-element_bg ai-element8">
154                 <span class="ai-element__label">I'm a link</span>
155             </a>
156         </div>
157         <div class="section__box">
158             <button class="r-button ai-element ai-element_bg ai-element8">
159                 <span class="ai-element__label">I'm a button</span>
160             </button>        
161         </div>
162     </div>
163 </div>
164 <div class="section">
165     <div class="section__item">
166         <div class="section__box">
167             <a href="#0" class="r-link ai-element ai-element_bg ai-element9">
168                 <span class="ai-element__label">I'm a link</span>
169             </a>
170         </div>
171         <div class="section__box">
172             <button class="r-button ai-element ai-element_bg ai-element9">
173                 <span class="ai-element__label">I'm a button</span>
174             </button>        
175         </div>
176     </div>
177 </div>
178 </div>
179 </body>
180 
181 </html>
HTML

css：

  1 /*
  2 Hi! If my code is useful for you can you donate me some money? 
  3 https://www.paypal.me/melnik909
  4 */
  5 @import "https://stas-melnikov.ru/r-blocks/r-button.css";
  6 @import "https://stas-melnikov.ru/r-blocks/r-link.css";
  7 
  8 /*
  9 * core styles
 10 */
 11 .ai-element{
 12     --uiaiElementDisplay: var(--aiElementDisplay, inline-flex);    
 13     --uiaiElementTextColor: var(--aiElementTextColor);
 14     --uiaiElementTextColorHover: var(--aiElementTextColorHover);    
 15 
 16     display: var(--uiaiElementDisplay);
 17     color: var(--uiaiElementTextColor);
 18     position: relative;
 19     overflow: hidden;
 20 }
 21 
 22 .ai-element__label{
 23     display: block;
 24 }
 25 
 26 /* ai-element_padding-all */ 
 27 
 28 .ai-element_padding-all{
 29     --uiaiElementLineWeight: var(--aiElementLineWeight, 2px);
 30     --uiaiElementLineColor: var(--aiElementLineColor, #000);
 31     --uiaiElementPadding: var(--aiElementPadding, 5px);
 32 
 33     padding: var(--uiaiElementPadding);
 34 }
 35 
 36 .ai-element_padding-all::before, 
 37 .ai-element_padding-all::after{
 38     width: 100%;
 39     height: var(--uiaiElementLineWeight);
 40     left: 0;
 41 }
 42 
 43 .ai-element_padding-all::before{
 44     top: 0;
 45 }
 46 
 47 .ai-element_padding-all::after{
 48     bottom: 0;
 49 }
 50 
 51 .ai-element_padding-all .ai-element__label::before,
 52 .ai-element_padding-all .ai-element__label::after{
 53     width: var(--uiaiElementLineWeight);
 54     height: 100%;
 55     top: 0;
 56 }
 57 
 58 .ai-element_padding-all .ai-element__label::before{
 59     left: 0;
 60 }
 61 
 62 .ai-element_padding-all .ai-element__label::after{
 63     right: 0;
 64 }
 65 
 66 .ai-element_padding-all::before,
 67 .ai-element_padding-all::after,
 68 .ai-element_padding-all .ai-element__label::before,
 69 .ai-element_padding-all .ai-element__label::after{
 70     content: "";     
 71     background-color: var(--uiaiElementLineColor);
 72     position: absolute; 
 73     opacity: 1;
 74 
 75     will-change: transform, opacity;
 76     transition-property: opacity, -webkit-transform;
 77     transition-property: transform, opacity;
 78     transition-property: transform, opacity, -webkit-transform;
 79 }
 80 
 81 .ai-element_padding-all:hover::before,
 82 .ai-element_padding-all:hover::after,
 83 .ai-element_padding-all:hover .ai-element__label::before,
 84 .ai-element_padding-all:hover .ai-element__label::after{
 85     opacity: 0;
 86 }
 87 
 88 /* ai-element_padding-bottom */ 
 89 
 90 .ai-element_padding-bottom{
 91     --uiaiElementLineWeight: var(--aiElementLineWeight, 2px);
 92     --uiaiElementLineColor: var(--aiElementLineColor, #000);    
 93 
 94     padding-bottom: var(--uiaiElementLineWeight);    
 95     position: relative;
 96 }
 97 
 98 .ai-element_padding-bottom::after{
 99     content: "";
100     width: 100%;
101     height: var(--uiaiElementLineWeight);
102     background-color: var(--uiaiElementLineColor);
103 
104     position: absolute;
105     left: 0;
106     bottom: 0;
107 }
108 
109 /* ai-element_bg */ 
110 
111 .ai-element_bg {
112     --uiaiElementLineColor: var(--aiElementLineColor, #000);    
113     --uiaiElementTextColor: var(--aiElementTextColor, #fff);
114     --uiaiElementTextColorHover: var(--aiElementTextColorHover, #000);
115     --uiaiElementPadding: var(--aiElementPadding, 5px);
116 
117     padding: var(--uiaiElementPadding);
118     transition: color .3s ease-out;
119 }
120 
121 .ai-element_bg::before, 
122 .ai-element_bg::after{
123     content: "";
124     background-color: var(--uiaiElementLineColor);    
125     opacity: 1;
126     position: absolute;
127 
128     transition: opacity .35s ease-out .03s, -webkit-transform .35s ease-out;
129 
130     transition: transform .35s ease-out, opacity .35s ease-out .03s;
131 
132     transition: transform .35s ease-out, opacity .35s ease-out .03s, -webkit-transform .35s ease-out;
133 }
134 
135 .ai-element_bg .ai-element__label{
136     position: relative;
137     z-index: 2;
138 }
139 
140 .ai-element_bg:hover::before, 
141 .ai-element_bg:hover::after{
142     opacity: 0;
143     transition-delay: 0s;
144 }
145 
146 .ai-element_bg:hover{
147     color: var(--uiaiElementTextColorHover);
148 }
149 
150 /* ai-element_text */ 
151 
152 .ai-element_text::before{
153     content: attr(data-ai-element-text);
154     color: var(--uiaiElementTextColorHover);
155     position: absolute;
156 }
157 
158 .ai-element_text::before, 
159 .ai-element_text .ai-element__label{
160     transition-property: -webkit-transform;
161     transition-property: transform;
162     transition-property: transform, -webkit-transform;
163     transition-timing-function: cubic-bezier(.86, .6, .08, 1.01); 
164     transition-duration: .4s;
165 }
166 
167 .ai-element_text:hover::before,
168 .ai-element_text:hover .ai-element__label{
169     transition-duration: .3s;
170 }
171 
172 /* effect 1 */
173 
174 .ai-element1::before,
175 .ai-element1::after,
176 .ai-element1 .ai-element__label::before,
177 .ai-element1 .ai-element__label::after{
178     -webkit-transform: translate3d(0, 0, 0);
179             transform: translate3d(0, 0, 0);
180     transition-timing-function: ease-out;
181     transition-duration: .2s, .15s;
182 }
183 
184 .ai-element1:hover::before,
185 .ai-element1:hover::after,
186 .ai-element1:hover .ai-element__label::before,
187 .ai-element1:hover .ai-element__label::after{
188     transition-duration: .25s;
189 }
190 
191 .ai-element1:hover::before{
192     -webkit-transform: translate3d(-105%, 0, 0);
193             transform: translate3d(-105%, 0, 0);
194 }
195 
196 .ai-element1:hover::after{
197     -webkit-transform: translate3d(105%, 0, 0);
198             transform: translate3d(105%, 0, 0);
199 }
200 
201 .ai-element1:hover .ai-element__label::before{
202     -webkit-transform: translate3d(0%, -100%, 0);
203             transform: translate3d(0%, -100%, 0);
204 }
205 
206 .ai-element1:hover .ai-element__label::after{
207     -webkit-transform: translate3d(0%, 100%, 0);
208             transform: translate3d(0%, 100%, 0);
209 }
210 
211 /* effect 2 */
212 
213 .ai-element2::after{
214     -webkit-transform: translate3d(0, 0, 0);
215             transform: translate3d(0, 0, 0);
216     transition: -webkit-transform .2s ease-in;
217     transition: transform .2s ease-in;
218     transition: transform .2s ease-in, -webkit-transform .2s ease-in;
219 }
220 
221 .ai-element2:hover::after{
222     -webkit-transform: translate3d(-100%, 0, 0);
223             transform: translate3d(-100%, 0, 0);
224 }
225 
226 /* effect 3 */
227 
228 .ai-element3::after{
229     opacity: 1;
230     -webkit-transform: translate3d(0, 0, 0);
231             transform: translate3d(0, 0, 0);
232     transition: opacity .3s ease-out, -webkit-transform .3s ease-out;
233     transition: transform .3s ease-out, opacity .3s ease-out;
234     transition: transform .3s ease-out, opacity .3s ease-out, -webkit-transform .3s ease-out;
235 }
236 
237 .ai-element3:hover::after{
238     opacity: 0;
239     -webkit-transform: translate3d(0, 100%, 0);
240             transform: translate3d(0, 100%, 0);
241 }
242 
243 /* effect 4 */
244 
245 .ai-element4::before,
246 .ai-element4::after,
247 .ai-element4 .ai-element__label::before,
248 .ai-element4 .ai-element__label::after{
249     transition-timing-function: ease-out;
250     transition-duration: .2s, .2s;
251     -webkit-transform: translate3d(0, 0, 0);
252             transform: translate3d(0, 0, 0);
253 }
254 
255 .ai-element4:hover::before,
256 .ai-element4:hover::after,
257 .ai-element4:hover .ai-element__label::before,
258 .ai-element4:hover .ai-element__label::after{
259     transition-delay: 0s, .05s;    
260 }
261 
262 .ai-element4:hover::before{
263     -webkit-transform: translate3d(-100%, 0, 0);
264             transform: translate3d(-100%, 0, 0);
265 }
266 
267 .ai-element4:hover::after{
268     -webkit-transform: translate3d(100%, 0, 0);
269             transform: translate3d(100%, 0, 0);
270 }
271 
272 .ai-element4:hover .ai-element__label::before{
273     -webkit-transform: translate3d(0, 100%, 0);
274             transform: translate3d(0, 100%, 0);
275 }
276 
277 .ai-element4:hover .ai-element__label::after{
278     -webkit-transform: translate3d(0, -100%, 0);
279             transform: translate3d(0, -100%, 0);
280 }
281 
282 /* effect 5 */
283 
284 .ai-element5::before,
285 .ai-element5::after, 
286 .ai-element5 .ai-element__label::before,
287 .ai-element5 .ai-element__label::after{
288     transition-duration: .2s;
289     transition-timing-function: ease-out;
290     -webkit-transform: translate3d(0, 0, 0);
291             transform: translate3d(0, 0, 0);
292 }
293 
294 .ai-element5::before, 
295 .ai-element5::after{
296     width: 100%;
297     height: var(--uiaiElementLineWeight);
298     left: 0;
299 }
300 
301 .ai-element5 .ai-element__label::before,
302 .ai-element5 .ai-element__label::after{
303     width: var(--uiaiElementLineWeight);
304     height: 100%;
305     top: 0;
306 }
307 
308 .ai-element5::before{
309     top: 0;
310 }
311 
312 .ai-element5::after{
313     bottom: 0;
314 }
315 
316 .ai-element5 .ai-element__label::before{
317     left: 0;
318 }
319 
320 .ai-element5 .ai-element__label::after{
321     right: 0;
322 }
323 
324 .ai-element5:hover::before,
325 .ai-element5:hover .ai-element__label::before{
326     transition-delay: 0s;
327 }
328 
329 .ai-element5::after,
330 .ai-element5:hover .ai-element__label::after{
331     transition-delay: .25s;
332 }
333 
334 .ai-element5 .ai-element__label::after,
335 .ai-element5:hover::after{
336     transition-delay: .15s;
337 }
338 
339 .ai-element5 .ai-element__label::before,
340 .ai-element5:hover::before{
341     transition-delay: .35s;
342 }
343 
344 .ai-element5:hover::before{
345     -webkit-transform: translate3d(-105%, 0, 0);
346             transform: translate3d(-105%, 0, 0);
347 }
348 
349 .ai-element5:hover::after{
350     -webkit-transform: translate3d(105%, 0, 0);
351             transform: translate3d(105%, 0, 0);
352 }
353 
354 .ai-element5:hover .ai-element__label::before{
355     -webkit-transform: translate3d(0, 105%, 0);
356             transform: translate3d(0, 105%, 0);
357 }
358 
359 .ai-element5:hover .ai-element__label::after{
360     -webkit-transform: translate3d(0, -105%, 0);
361             transform: translate3d(0, -105%, 0);
362 }
363 
364 /* effect 6 */
365 
366 .ai-element6::before,
367 .ai-element6::after{
368     width: 50%;
369     height: 100%;
370     top: 0;
371     -webkit-transform: translate3d(0, 0, 0);
372             transform: translate3d(0, 0, 0);  
373 }
374 
375 .ai-element6::before{
376     left: 0;
377 }
378 
379 .ai-element6::after{
380     right: 0;
381 }
382 
383 .ai-element6:hover::before{
384     -webkit-transform: translate3d(-100%, 0, 0);
385             transform: translate3d(-100%, 0, 0);
386 }
387 
388 .ai-element6:hover::after{
389     -webkit-transform: translate3d(100%, 0, 0);
390             transform: translate3d(100%, 0, 0);
391 }
392 
393 /* effect 7 */
394 
395 .ai-element7::before,
396 .ai-element7::after{
397     width: 100%;
398     height: 50%;
399     left: 0;
400     -webkit-transform: translate3d(0, 0, 0);
401             transform: translate3d(0, 0, 0);
402 }
403 
404 .ai-element7::before{
405     top: 0;
406 }
407 
408 .ai-element7::after{
409     bottom: 0;
410 }
411 
412 .ai-element7:hover::before{
413     -webkit-transform: translate3d(0, -50%, 0);
414             transform: translate3d(0, -50%, 0);
415 }
416 
417 .ai-element7:hover::after{
418     -webkit-transform: translate3d(0, 50%, 0);
419             transform: translate3d(0, 50%, 0); 
420 }
421 
422 /* effect 8 */
423 
424 .ai-element8::before,
425 .ai-element8::after{
426     width: 51%;
427     height: 100%;
428     -webkit-transform: rotate(0);
429             transform: rotate(0);
430     top: 0;
431 }
432 
433 .ai-element8::before{
434     left: 0;
435 }
436 
437 .ai-element8::after{
438     right: 0;
439 }
440 
441 .ai-element8:hover::before,
442 .ai-element8:hover::after{
443     -webkit-transform: rotate(360deg);
444             transform: rotate(360deg);
445 }
446 
447 /* effect 9 */
448 
449 .ai-element9::before,
450 .ai-element9::after{
451     width: 51%;
452     height: 100%;
453     top: 0; 
454     -webkit-transform: translate3d(0, 0, 0); 
455             transform: translate3d(0, 0, 0);
456 }
457 
458 .ai-element9::before{
459     left: 0;
460 }
461 
462 .ai-element9::after{
463     right: 0;
464 }
465 
466 .ai-element9:hover::before{
467     -webkit-transform: translate3d(-100%, 0, 0) rotate(-45deg);
468             transform: translate3d(-100%, 0, 0) rotate(-45deg);
469 }
470 
471 .ai-element9:hover::after{
472     -webkit-transform: translate3d(100%, 0, 0) rotate(-45deg);
473             transform: translate3d(100%, 0, 0) rotate(-45deg);    
474 }
475 
476 /*
477 SETTINGS
478 */
479 
480 .ai-element{
481     --aiElementPadding: 10px 15px;
482     --aiElementLineWeight: 5px;
483     --aiElementLineColor: #243aab;
484     --aiElementTextColor: #1b255a;
485     --aiElementTextColorHover: #243aab;
486 }
487 
488 .ai-element_bg{
489     --aiElementTextColor: #fff;
490 }
CSS

 

posted @ 2018-01-08 16:32  期待明天**  阅读(135)  评论(0)    收藏  举报