Kosten
Пятница, 01 Июля 2022, 02:48 | Сообщение 1
Если у вас тематический сайт, как на тему охота или игровой, а также военный, вообщем то направление, где применяется радар. То думаю эта вариация радара вам понравится, где красиво будет смотреться на сайте. По своей структуре он простой и не будет много веса и места занимать, ведь его можно разместить, как вверх сайта или в низ портала, возможно кто то в блок сайта, но там будет выглядеть стандартно. Здесь, как и где его наблюдать, то думаю сами разберетесь, мы переходим к установочному процессу.Установка: HTML
Код
<div class="cont_principal"> <div class="cont_centrar"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="320" height="320" viewBox="0 0 320 320.00001" id="svg12000" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="radar.svg"> <defs id="defs12002"> <linearGradient inkscape:collect="always" id="linearGradient12950"> <stop style="stop-color:#3dc7f3;stop-opacity:0.68181819" offset="0" id="stop12952" /> <stop style="stop-color:#ececec;stop-opacity:0.00649351" offset="1" id="stop12954" /> </linearGradient> <filter style="color-interpolation-filters:sRGB;" inkscape:label="Drop Shadow" id="filter12648"> <feFlood flood-opacity="0.27451" flood-color="rgb(0,0,0)" result="flood" id="feFlood12650" /> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite12652" /> <feGaussianBlur in="composite1" stdDeviation="5" result="blur" id="feGaussianBlur12654" /> <feOffset dx="0" dy="0" result="offset" id="feOffset12656" /> <feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" id="feComposite12658" /> </filter> <filter style="color-interpolation-filters:sRGB;" inkscape:label="Drop Shadow" id="filter12932"> <feFlood flood-opacity="0.27451" flood-color="rgb(0,0,0)" result="flood" id="feFlood12934" /> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite12936" /> <feGaussianBlur in="composite1" stdDeviation="5" result="blur" id="feGaussianBlur12938" /> <feOffset dx="0" dy="0" result="offset" id="feOffset12940" /> <feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" id="feComposite12942" /> </filter> <linearGradient inkscape:collect="always" xlink:href="#linearGradient12950" id="linearGradient12956" x1="81.766975" y1="904.59143" x2="159.81953" y2="891.828" gradientUnits="userSpaceOnUse" spreadMethod="pad" gradientTransform="translate(-0.53382874,0.53418059)" /> <filter style="color-interpolation-filters:sRGB;" inkscape:label="Drop Shadow" id="filter12962"> <feFlood flood-opacity="0.27451" flood-color="rgb(0,0,0)" result="flood" id="feFlood12964" /> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite12966" /> <feGaussianBlur in="composite1" stdDeviation="5" result="blur" id="feGaussianBlur12968" /> <feOffset dx="0" dy="0" result="offset" id="feOffset12970" /> <feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" id="feComposite12972" /> </filter> <filter style="color-interpolation-filters:sRGB;" inkscape:label="Drop Shadow" id="filter13062"> <feFlood flood-opacity="0.333333" flood-color="rgb(0,0,0)" result="flood" id="feFlood13064" /> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite13066" /> <feGaussianBlur in="composite1" stdDeviation="3" result="blur" id="feGaussianBlur13068" /> <feOffset dx="0" dy="0" result="offset" id="feOffset13070" /> <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite13072" /> <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix13153" /> <feFlood id="feFlood13155" flood-opacity="0.333333" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" /> <feComposite id="feComposite13157" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" /> <feGaussianBlur id="feGaussianBlur13159" in="composite1" stdDeviation="2.4" result="blur" /> <feOffset id="feOffset13161" dx="0" dy="0" result="offset" /> <feComposite id="feComposite13163" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" /> </filter> <filter style="color-interpolation-filters:sRGB;" inkscape:label="Drop Shadow" id="filter13165"> <feFlood flood-opacity="0.333333" flood-color="rgb(0,0,0)" result="flood" id="feFlood13167" /> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite13169" /> <feGaussianBlur in="composite1" stdDeviation="2.4" result="blur" id="feGaussianBlur13171" /> <feOffset dx="0" dy="0" result="offset" id="feOffset13173" /> <feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" id="feComposite13175" /> </filter> <filter style="color-interpolation-filters:sRGB;" inkscape:label="Drop Shadow" id="filter13181"> <feFlood flood-opacity="0.333333" flood-color="rgb(0,0,0)" result="flood" id="feFlood13183" /> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite13185" /> <feGaussianBlur in="composite1" stdDeviation="2.4" result="blur" id="feGaussianBlur13187" /> <feOffset dx="0" dy="0" result="offset" id="feOffset13189" /> <feComposite in="SourceGraphic" in2="offset" operator="over" result="composite2" id="feComposite13191" /> </filter> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1.4142136" inkscape:cx="259.06722" inkscape:cy="176.65455" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" units="px" inkscape:window-width="1366" inkscape:window-height="709" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true"> <inkscape:grid type="xygrid" id="grid12662" /> <sodipodi:guide position="159.28571,203.57144" orientation="1,0" id="guide12664" /> <sodipodi:guide position="183.57143,160.00001" orientation="0,1" id="guide12666" /> <sodipodi:guide position="159.28571,13.131984" orientation="0,1" id="guide12668" /> </sodipodi:namedview> <metadata id="metadata12005"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title /> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Capa 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-732.36216)"> <ellipse style="opacity:1;fill:#1896dd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path12548" cx="159.46616" cy="892.896" rx="149.46616" ry="149.46617" /> <ellipse id="ellipse12948" style="opacity:1;fill:url(#linearGradient12956);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" cx="159.46616" cy="892.89636" rx="149.46616" ry="149.46617" /> <g id="g13177" style="filter:url(#filter13181)" transform="matrix(1.000041,0,0,0.99893319,-0.00653322,1.1258829)"> <rect y="892.18005" x="157.35107" height="148.91985" width="3.9168477" id="rect12660" style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <circle r="12.184875" cy="892.37726" cx="159.38489" id="path12944" style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.63025093;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> </g> <circle cy="892.86212" cx="158.96774" id="circle12976" style="opacity:1;fill:none;fill-opacity:0.77880186;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.55760366" r="120.96774" /> <circle style="opacity:1;fill:#5599ff;fill-opacity:0.00649348;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.78341013" id="path12974" cx="160.14287" cy="892.36212" r="75" /> <circle style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter12932)" id="path12670" cx="160" cy="892.36218" r="150" /> <circle style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path4191" cx="255.91022" cy="813.38086" r="10" /> <circle r="10" cy="893.38086" cx="249.9102" id="circle4193" style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <circle style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="circle4195" cx="187.9102" cy="947.38086" r="10" /> <circle r="10" cy="987.38086" cx="229.9102" id="circle4197" style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <circle r="10" cy="795.38086" cx="169.9102" id="circle4199" style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <circle style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="circle4201" cx="57.910202" cy="935.38086" r="10" /> </g> </svg> </div> </div>
Страна: (RU )
Kosten
Пятница, 01 Июля 2022, 02:49 | Сообщение 2
Как всегда, весь текст не влез, а значит стилистика CSS идет в продолжение, а точнее здесь. CSS
Код
.cont_principal { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: rgb(239, 235, 239); /* Old browsers */ background: -moz-linear-gradient( -45deg, rgba(239, 235, 239, 1) 0%, rgba(210, 215, 218, 1) 53%, rgba(216, 219, 224, 1) 100% ); /* FF3.6-15 */ background: -webkit-linear-gradient( -45deg, rgba(239, 235, 239, 1) 0%, rgba(210, 215, 218, 1) 53%, rgba(216, 219, 224, 1) 100% ); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient( 135deg, rgba(239, 235, 239, 1) 0%, rgba(210, 215, 218, 1) 53%, rgba(216, 219, 224, 1) 100% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efebef', endColorstr='#d8dbe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .cont_centrar { position: absolute; width: 320px; height: 320px; top: 50%; left: 50%; margin-left: -160px; margin-top: -160px; } #ellipse12948 { animation: rotate 5s infinite; animation-timing-function: linear; transform-origin: center center; transform-box: fill-box; } #rect12660 { animation: rotate 5s infinite; transform-origin: top center; animation-timing-function: linear; transform-box: fill-box; } @-webkit-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-o-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-moz-keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #circle4201 { transform-box: fill-box; transform: scale(0); opacity: 0; transform-origin: top center; animation-timing-function: linear; -webkit-animation: detectado, detectado, detectado, detectado, detectado; -webkit-animation-delay: 0s, 3s, 8s, 13s, 16s, 20s; -webkit-animation-duration: 3s; animation: detectado, detectado, detectado, detectado, detectado; animation-delay: 0s, 3s, 8s, 13s, 16s, 20s; animation-duration: 3s; } #circle4199 { transform: scale(0); opacity: 0; transform-origin: top center; animation-timing-function: linear; transform-box: fill-box; -webkit-animation: detectado, detectado, detectado, detectado, detectado; -webkit-animation-delay: 0s, 5s, 10s, 15s, 20s, 25s; -webkit-animation-duration: 3s; animation: detectado, detectado, detectado, detectado, detectado; animation-delay: 0s, 5s, 10s, 15s, 20s, 25s; animation-duration: 3.2s; } #path4191 { transform: scale(0); opacity: 0; transform-origin: top center; animation-timing-function: linear; transform-box: fill-box; -webkit-animation: detectado, detectado, detectado, detectado, detectado; -webkit-animation-delay: 0s, 5.3s, 10.3s, 15.3s, 20.3s, 25.3s; -webkit-animation-duration: 3s; animation: detectado, detectado, detectado, detectado, detectado; animation-delay: 0.5s, 5.5s, 10.5s, 15.5s, 20.5s, 25.5s; animation-duration: 3.2s; } #circle4193 { transform: scale(0); opacity: 0; transform-origin: top center; animation-timing-function: linear; transform-box: fill-box; -webkit-animation: detectado, detectado, detectado, detectado, detectado; -webkit-animation-delay: 1s, 6s, 11s, 16, 21s, 26s; -webkit-animation-duration: 3s; animation: detectado, detectado, detectado, detectado, detectado; animation-delay: 1s, 6s, 11s, 16s, 21s, 26s; animation-duration: 3.4s; } #circle4195 { transform: scale(0); opacity: 0; transform-origin: top center; animation-timing-function: linear; transform-box: fill-box; -webkit-animation: detectado, detectado, detectado, detectado, detectado; -webkit-animation-delay: 1.5s, 6.5s, 11.5s, 16.5s, 21.5s, 26.5s; -webkit-animation-duration: 3s; animation: detectado, detectado, detectado, detectado, detectado; animation-delay: 1.5s, 6.5s, 11.5s, 16.5s, 21.5s, 26.5s; animation-duration: 3.7s; } #circle4197 { transform: scale(0); opacity: 0; transform-origin: top center; animation-timing-function: linear; transform-box: fill-box; -webkit-animation: detectado, detectado, detectado, detectado, detectado; -webkit-animation-delay: 1.7s, 6.7s, 11.7s, 16.7s, 21.7s, 26.7s; -webkit-animation-duration: 3s; animation: detectado, detectado, detectado, detectado, detectado; animation-delay: 1.7s, 6.7s, 11.7s, 16.7s, 21.7s, 26.7s; animation-duration: 4s; } @-webkit-keyframes detectado { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } @-o-keyframes detectado { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } @-moz-keyframes detectado { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } @keyframes detectado { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } }
По началу его хотел в каталоге файлов разместить, но пока искал информацию, то нашел оригинальный дизайн радара , который в последствий размещен был. А чтоб не пропадали рабочие скрипты, то на форуме есть почти аналогичная категория.Демонстрация
Страна: (RU )