1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!--优先使用 IE 最新版本和 Chrome-->
7 <meta name="renderer" content="webkit"><!--360使用极速模式,使用这条时最好与上一句同时使用-->
8 <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
9 <meta name="applicable-device" content="mobile"/>
10 <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
11 <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
12 <meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
13 <meta name="keywords" content="利用线性渐变阴影旋转实现晴天效果">
14 <meta name="description" content="利用线性渐变阴影旋转实现晴天效果">
15 <meta name="author" content="zjf">
16 <title>利用线性渐变阴影旋转实现晴天效果</title>
17 <style type="text/css">
18 .sun {
19 position: absolute;
20 left: 50%; top: 50%;
21 width: 200px;height: 260px;
22 -webkit-transform: translate(-50%, -50%);
23 -moz-transform: translate(-50%, -50%);
24 -ms-transform: translate(-50%, -50%);
25 -o-transform: translate(-50%, -50%);
26 transform: translate(-50%, -50%);
27 text-align: center;
28 font-size: 200%;
29 color: #fff;
30 background-color: #0bf;
31 border-radius: 5px;
32 }
33 .sun:before {
34 content: "";
35 position: absolute;
36 width: 80px;
37 height: 80px;
38 left: 50%;
39 top: 50%;
40 -webkit-transform: translate(-50%, -50%);
41 -moz-transform: translate(-50%, -50%);
42 -ms-transform: translate(-50%, -50%);
43 -o-transform: translate(-50%, -50%);
44 transform: translate(-50%, -50%);
45 border-radius: 50%;
46 background-color: rgba(255,238,68,1);
47 box-shadow: 0 0 0 15px rgba(255,255,0,0.2), 0 0 15px #fff;
48 z-index: -10;
49 }
50 .sun:after {
51 content: "";
52 position: absolute;
53 top: 50%; left: 50%;
54 height: 160px;
55 width: 160px;
56 -webkit-transform:translate(-50%,-50%) rotate(30deg);
57 -moz-transform:translate(-50%,-50%) rotate(30deg);
58 -ms-transform:translate(-50%,-50%) rotate(30deg);
59 -o-transform:translate(-50%,-50%) rotate(30deg);
60 transform:translate(-50%,-50%) rotate(30deg);
61
62 z-index: -100;
63 background-image:
64 -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,
65 rgba(255,255,255,0) 100%),
66 -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,
67 rgba(255,255,255,0) 100%);
68 background-size: 20px 100%, 100% 20px;
69 background-repeat: no-repeat;
70 background-position: center center, center center;
71 animation:sunRotate 10s linear infinite;
72 }
73 @keyframes sunRotate {
74 0% {
75 -webkit-transform: translate(-50%, -50%) rotate(30deg);
76 -moz-transform: translate(-50%, -50%) rotate(30deg);
77 -ms-transform: translate(-50%, -50%) rotate(30deg);
78 -o-transform: translate(-50%, -50%) rotate(30deg);
79 transform: translate(-50%, -50%) rotate(30deg);
80 }
81 100% {
82 -webkit-transform: translate(-50%, -50%) rotate(390deg);
83 -moz-transform: translate(-50%, -50%) rotate(390deg);
84 -ms-transform: translate(-50%, -50%) rotate(390deg);
85 -o-transform: translate(-50%, -50%) rotate(390deg);
86 transform: translate(-50%, -50%) rotate(390deg);
87 }
88 }
89 </style>
90 </head>
91 <body>
92 <div class="sun">.sunny</div>
93 </body>
94 </html>
转载文章
时间： 2024-10-12 23:55:24