首页 > 代码库 > 利用线性渐变阴影旋转实现晴天效果
利用线性渐变阴影旋转实现晴天效果
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>
转载文章
css3奇思妙想
利用线性渐变阴影旋转实现晴天效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。