ساخت رادار با CSS خالص
پنجشنبه, ۱۷ اسفند ۱۳۹۶، ۰۲:۵۲ ب.ظ
| html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>7Learn.com - Radar - The Bleeps, Sweeps and the Creeps</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style type="text/css"> | |
| /*https://codepen.io/oduska/pen/JEreqV*/ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| height: 100%; | |
| background-color: #111; | |
| font-size: 10px; | |
| } | |
| body { | |
| background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent); | |
| background-size: 7rem 7rem; | |
| background-position: -5.2rem -5.2rem; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| padding: 0; | |
| margin: 0; | |
| font-size: 1.6rem; | |
| } | |
| .radar { | |
| background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%); | |
| background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%); | |
| width: 75vw; | |
| height: 75vw; | |
| max-height: 75vh; | |
| max-width: 75vh; | |
| position: relative; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| border-radius: 50%; | |
| border: 0.2rem solid #20ff4d; | |
| overflow: hidden; | |
| } | |
| .radar:before { | |
| content: ' '; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| animation: blips 5s infinite; | |
| animation-timing-function: linear; | |
| animation-delay: 1.4s; | |
| } | |
| .radar:after { | |
| content: ' '; | |
| display: block; | |
| background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%); | |
| width: 50%; | |
| height: 50%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| animation: radar-beam 5s infinite; | |
| animation-timing-function: linear; | |
| transform-origin: bottom right; | |
| border-radius: 100% 0 0 0; | |
| } | |
| @keyframes radar-beam { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes blips { | |
| 14% { | |
| background: radial-gradient(2vmin circle at 75% 70%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); | |
| } | |
| 14.0002% { | |
| background: radial-gradient(2vmin circle at 75% 70%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); | |
| } | |
| 25% { | |
| background: radial-gradient(2vmin circle at 75% 70%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); | |
| } | |
| 26% { | |
| background: radial-gradient(2vmin circle at 75% 70%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); | |
| opacity: 1; | |
| } | |
| 100% { | |
| background: radial-gradient(2vmin circle at 75% 70%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, white 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="radar"></div> | |
| <script type="text/javascript"> | |
| </script> | |
| </body> | |
| </html> |
کجا بنویسیم؟؟