1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>欧朋浏览器</title>
6 <style> .oplogo {
7 width: 512px;
8 height: 512px;
9 margin: 0 auto;
10 position: relative;
11 overflow: hidden;
12 top: 50px;
13 }
14
15 .oplogo div {
16 position: absolute;
17 }
18
19 /****** 外 圆******/
20 .outround {
21 width: 440px;
22 height: 470px;
23 background-color: #800;
24 background: -moz-linear-gradient(-90deg, #F88, #800);
25 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
26 top: 20px;
27 left: 36px;
28 -moz-border-radius: 220px/235px;
29 -webkit-border-radius: 220px 235px;
30 border-radius: 220px/235px;
31 }
32
33 /****** 边框高光 ******/
34 .highlight {
35 width: 436px;
36 height: 466px;
37 background-color: #d40009;
38 background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
39 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
40 top: 22px;
41 left: 38px;
42 border-radius: 218px/233px;
43 -moz-border-radius: 218px/233px;
44 -webkit-border-radius: 218px 233px;
45 }
46
47 /****** 上部高亮 ******/
48 .fill {
49 width: 436px;
50 height: 456px;
51 background-color: #E71616;
52 background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
53 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000));
54 top: 30px;
55 left: 38px;
56 border-radius: 218px/228px;
57 -moz-border-radius: 218px/228px;
58 -webkit-border-radius: 218px 228px;
59 }
60
61 /****** 内 圆 ******/
62 .inround {
63 width: 198px;
64 height: 396px;
65 background-color: #d20000;
66 background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
67 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
68 left: 158px;
69 top: 56px;
70 border-radius: 99px/170px;
71 -moz-border-radius: 99px/170px;
72 -webkit-border-radius: 99px 170px;
73 }
74
75 /****** 内填充 ******/
76 .inside {
77 width: 192px;
78 height: 390px;
79 background-color: #b80000;
80 background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
81 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
82 left: 161px;
83 top: 59px;
84 border-radius: 96px/170px;
85 -moz-border-radius: 96px/170px;
86 -webkit-border-radius: 96px 170px;
87 }
88
89 /****** 内镂空 ******/
90 .counter {
91 width: 164px;
92 height: 368px;
93 background-color: #FFF;
94 left: 174px;
95 top: 71px;
96 border-radius: 2px/170px;
97 -moz-border-radius: 82px/170px;
98 -webkit-border-radius: 82px 170px;
99 }
100
101 /****** 亮阴影 ******/
102 .lightshdow {
103 left: 106px;
104 top: 344px;
105 height: 50px;
106 width: 304px;
107 border-radius: 152px/25px;
108 moz-border-radius: 152px/25px;
109 -webkit-border-radius: 152px 25px;
110 box-shadow: 0 100px 30px hsla(0, 0%, 0%, .2);
111 -moz-box-shadow: 0 100px 30px hsla(0, 0%, 0%, .2);
112 -webkit-box-shadow: 0 100px 30px hsla(0, 0%, 0%, .2);
113 }
114
115 /****** 暗阴影 ******/
116 .darkshdow {
117 left: 146px;
118 top: 325px;
119 height: 70px;
120 width: 220px;
121 border-radius: 110px/35px;
122 moz-border-radius: 110px/35px;;
123 -webkit-border-radius: 110px 35px;;
124 box-shadow: 0 100px 15px hsla(0, 0%, 0%, .6);
125 -moz-box-shadow: 0 100px 15px hsla(0, 0%, 0%, .6);
126 -webkit-box-shadow: 0 100px 15px hsla(0, 0%, 0%, .6);
127 } </style>
128 </head>
129 <body>
130 <div class="oplogo">
131 <div class="lightshdow"></div>
132 <div class="darkshdow"></div>
133 <div class="outround"></div>
134 <div class="highlight"></div>
135 <div class="fill"></div>
136 <div class="inround"></div>
137 <div class="inside"></div>
138 <div class="counter"></div>
139 </div>
140 </body>
141 </html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title>欧朋浏览器</title>
6 <style> .oplogo {
7 width: 512px;
8 height: 512px;
9 margin: 0 auto;
10 position: relative;
11 overflow: hidden;
12 top: 50px;
13 }
14
15 .oplogo div {
16 position: absolute;
17 }
18
19 /****** 外 圆******/
20 .outround {
21 width: 440px;
22 height: 470px;
23 background-color: #800;
24 background: -moz-linear-gradient(-90deg, #F88, #800);
25 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
26 top: 20px;
27 left: 36px;
28 -moz-border-radius: 220px/235px;
29 -webkit-border-radius: 220px 235px;
30 border-radius: 220px/235px;
31 }
32
33 /****** 边框高光 ******/
34 .highlight {
35 width: 436px;
36 height: 466px;
37 background-color: #d40009;
38 background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
39 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
40 top: 22px;
41 left: 38px;
42 border-radius: 218px/233px;
43 -moz-border-radius: 218px/233px;
44 -webkit-border-radius: 218px 233px;
45 }
46
47 /****** 上部高亮 ******/
48 .fill {
49 width: 436px;
50 height: 456px;
51 background-color: #E71616;
52 background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
53 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000));
54 top: 30px;
55 left: 38px;
56 border-radius: 218px/228px;
57 -moz-border-radius: 218px/228px;
58 -webkit-border-radius: 218px 228px;
59 }
60
61 /****** 内 圆 ******/
62 .inround {
63 width: 198px;
64 height: 396px;
65 background-color: #d20000;
66 background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
67 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
68 left: 158px;
69 top: 56px;
70 border-radius: 99px/170px;
71 -moz-border-radius: 99px/170px;
72 -webkit-border-radius: 99px 170px;
73 }
74
75 /****** 内填充 ******/
76 .inside {
77 width: 192px;
78 height: 390px;
79 background-color: #b80000;
80 background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
81 background: -webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
82 left: 161px;
83 top: 59px;
84 border-radius: 96px/170px;
85 -moz-border-radius: 96px/170px;
86 -webkit-border-radius: 96px 170px;
87 }
88
89 /****** 内镂空 ******/
90 .counter {
91 width: 164px;
92 height: 368px;
93 background-color: #FFF;
94 left: 174px;
95 top: 71px;
96 border-radius: 2px/170px;
97 -moz-border-radius: 82px/170px;
98 -webkit-border-radius: 82px 170px;
99 }
100
101 /****** 亮阴影 ******/
102 .lightshdow {
103 left: 106px;
104 top: 344px;
105 height: 50px;
106 width: 304px;
107 border-radius: 152px/25px;
108 moz-border-radius: 152px/25px;
109 -webkit-border-radius: 152px 25px;
110 box-shadow: 0 100px 30px hsla(0, 0%, 0%, .2);
111 -moz-box-shadow: 0 100px 30px hsla(0, 0%, 0%, .2);
112 -webkit-box-shadow: 0 100px 30px hsla(0, 0%, 0%, .2);
113 }
114
115 /****** 暗阴影 ******/
116 .darkshdow {
117 left: 146px;
118 top: 325px;
119 height: 70px;
120 width: 220px;
121 border-radius: 110px/35px;
122 moz-border-radius: 110px/35px;;
123 -webkit-border-radius: 110px 35px;;
124 box-shadow: 0 100px 15px hsla(0, 0%, 0%, .6);
125 -moz-box-shadow: 0 100px 15px hsla(0, 0%, 0%, .6);
126 -webkit-box-shadow: 0 100px 15px hsla(0, 0%, 0%, .6);
127 } </style>
128 </head>
129 <body>
130 <div class="oplogo">
131 <div class="lightshdow"></div>
132 <div class="darkshdow"></div>
133 <div class="outround"></div>
134 <div class="highlight"></div>
135 <div class="fill"></div>
136 <div class="inround"></div>
137 <div class="inside"></div>
138 <div class="counter"></div>
139 </div>
140 </body>
141 </html>