首页 > 代码库 > css3的特效拓展...

css3的特效拓展...

2024-08-23 12:04:32   222人阅读

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>test页面</title>
 6 <style type="text/css"> 
 7 /*关于css3 的两个伪类 ::before  ::after*/ 
 8     .box{
 9         margin: 0 auto;
10         width: 360px;
11         height: 500px;
12     }
13     /*头部*/
14     .box_head{
15         margin: 0px auto;
16         width: 260px;
17         height: 140px;
18         background-color: greenyellow;
19         border-radius: 130px 130px 0 0;
20     }
21     .box_head::before{
22         content:‘‘;
23         display: block;
24         width: 26px;
25         height: 26px;
26         border-radius: 13px;
27         background-color: white;
28         transform: translate(170px,58px);
29     }
30     .box_head::after{
31         content:‘‘;
32         display: block;
33         width: 26px;
34         height: 26px;
35         border-radius: 13px;
36         background-color: white;
37         transform:translate(65px,33px);
38     }
39     /*中间*/
40     .box_conten{
41         margin: 0px auto;
42         margin-top:10px;
43         width: 260px;
44         height: 240px;
45         background-color: greenyellow;
46         border-radius: 0  0 30px 30px;
47     }
48     .box_conten::before{
49         content:‘‘;
50         display: block;
51         width: 50px;
52         height: 180px;
53         border-radius: 12px;
54         background-color: greenyellow;
55         transform: translate(-70px,20px);    
56     }
57     .box_conten::after{
58         content:‘‘;
59         display: block;
60         width: 50px;
61         height: 180px;
62         border-radius: 12px;
63         background-color:greenyellow;
64         transform:translate(280px,-162px);    
65     }
66     /*底部*/
67     .footer{
68         margin: 0px auto;
69         width:50px;
70         height: 20px;
71     }
72     .footer::before{
73         content:‘‘;
74         display: block;
75         width: 50px;
76         height: 135px;
77         border-radius: 0  0 15px 15px;
78         background-color: greenyellow;
79         transform: translate(-51px,-8px);    
80     }
81     .footer::after{
82         content:‘‘;
83         display: block;
84         width: 50px;
85         height: 135px;
86         border-radius: 0  0 15px 15px;
87         background-color: greenyellow;
88         transform: translate(51px,-143px);    
89     }
90 </style>
91 </head>
92 <body>
93 <div class="box">
94     <div class="box_head"></div>
95     <div class="box_conten"></div>
96     <div class="footer"></div>
97 </div>
98 </body>
99 </html>

技术分享

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>test页面</title>
 6 <style type="text/css">  
 7     div{
 8         margin: 10px auto;
 9         width: 500px;
10         height: 200px;
11         background-color: darkgray;
12         text-align: center;
13         line-height: 180px;;
14     }
15     a {
16         position: relative;
17         display: inline-block;
18         outline: none;
19         text-decoration: none;
20         color:#fff;
21         font-size: 30px;
22         margin-right: 50px;
23     }
24     
25     /* 大框 */
26     a:hover::before{ 
27         content: "\5B"; 
28         left: -15px;
29         color: red;
30         font-weight: 800;
31         display: block;
32         position: absolute;
33      }
34     a:hover::after {
35         content: "\5D";
36         color: red;
37         font-weight: 800;
38         padding: 0px 5px;
39     
40     }
41 </style>
42 </head>
43 <body>
44     <div>
45         <a href="#">ONE A</a><a href="#">TWO B</a>
46     </div>
47 </body>
48 </html>

技术分享

css3的特效拓展...


联系
我们