Pew

Developer
Hornebom
Size
4,685 Kb
Views
28,336
  1. Pew Previews
  2. Pew HTML Codes
  3. Pew CSS Codes

How do I make an pew?

A coded rebound of a dribbble shot by Adam Grason http://dribbble.com/shots/1491661-Pew-Pew-Pew-WIP?list=searches&tag=pew&offset=0. What is a pew? How do you make a pew? This script and codes were developed by Hornebom on 12 August 2022, Friday.

Pew Previews
IQ Test

Pew - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pew</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
A coded rebound of a dribbble shot by Adam Grason
http://dribbble.com/shots/1491661-Pew-Pew-Pew-WIP?list=searches&tag=pew&offset=0
-->
<div class="pew"> <div class="orion_1"> <span class="starline"></span> <span class="starline"></span> <span class="starline"></span> <span class="starline"></span> </div> <div class="orion_2"> <span class="starline"></span> <span class="starline"></span> <span class="starline"></span> <span class="starline"></span> </div> <div class="rockwrap"> <svg version="1.1"	x="0px" y="0px" width="498px" height="485px" viewBox="-31.088 -3.307 498 485" overflow="visible" enable-background="new -31.088 -3.307 498 485" xml:space="preserve" class="rocket" preserveAspectRatio="xMinYMin meet"> <style type="text/css" > <![CDATA[ path#Flame1 { -webkit-animation:turbo 0.25s 0s infinite; animation:turbo 0.25s 0s infinite; } path#Flame2 { -webkit-animation:turbo 0.25s 0.15s infinite; animation:turbo 0.25s 0.15s infinite; } path#Flame3 { -webkit-animation:turbo 0.25s 0.1s infinite; animation:turbo 0.25s 0.1s infinite; } @-webkit-keyframes turbo { 0%, 100% {opacity:0;} 50% {opacity:1;} } @keyframes turbo { 0%, 100% {opacity:0;} 50% {opacity:1;} } path.shadow { opacity:0.9; -webkit-transform:translateX(0) translateY(0); transform:translateX(0) translateY(0); -webkit-animation:tilt 2.5s infinite; animation:tilt 2.5s infinite; } @-webkit-keyframes tilt { 0%, 100% {opacity:0.9;-webkit-transform:translateX(0) translateY(0);} 50% {opacity:0.75;-webkit-transform:translateX(1%) translateY(1%);} } @keyframes tilt { 0%, 100% {opacity:0.9;} 50% {opacity:0.7;} } ]]> </style>
<defs>
</defs>
<path class="shadow" fill="#051218" d="M387.812,278.461v-57.538h-7.326v50.317l-46.259-45.592v-16.596h-8.163v15.648	h-50.855l-3.044-27.999h31.922l-35.671-34.485l-11.532-106.06c0.005-0.181,0.009-0.363,0.009-0.546	c0-9.982-8.092-18.075-18.075-18.075s-18.076,8.093-18.076,18.075h-0.007l-11.607,106.752l-35.52,34.338h31.787l-3.044,27.999	h-50.855v-15.648h-8.163v16.596L97.072,271.24v-50.317h-7.326v57.538l-68.951,67.956H40.89l85.401-38.22h17.04v14.934h8.163v-14.934	h41.776l-2.361,21.713l7.891-3.637v37.465h12.778l-2.409,12.522h-10.207v3.76h-0.027v3.761h8.786l-0.841,4.372h-3.783v3.761h3.059	l-2.221,11.543h69.959l-2.221-11.543h3.059v-3.761h-3.783l-0.841-4.372h8.786v-3.761h0.026v-3.76h-10.26l-2.409-12.522h12.507	v-37.465l7.89,3.637l-2.361-21.713h41.776v14.934h8.163v-14.934h17.04l85.401,38.22h20.094L387.812,278.461z"/>
<linearGradient id="Flame1_2" gradientUnits="userSpaceOnUse" x1="218.146" y1="431.6104" x2="218.146" y2="359.0631">	<stop offset="0" style="stop-color:#EC7E41;stop-opacity:0"/>	<stop offset="0.5399" style="stop-color:#EC7E41"/>	<stop offset="0.9939" style="stop-color:#FFD67B"/>
</linearGradient>
<path id="Flame1" fill="url(#Flame1_2)" d="M249.89,397.138c0,32.891-20.288,80.104-31.744,80.104	c-11.281,0-31.744-47.213-31.744-80.104c0-32.889,14.212-39.002,31.744-39.002C235.678,358.136,249.89,364.249,249.89,397.138z"/>
<linearGradient id="Flame2_2" gradientUnits="userSpaceOnUse" x1="218.146" y1="412.584" x2="218.146" y2="358.1386">	<stop offset="0" style="stop-color:#EC7E41;stop-opacity:0"/>	<stop offset="0.5399" style="stop-color:#EC7E41"/>	<stop offset="0.9939" style="stop-color:#FFD67B"/>
</linearGradient>
<path id="Flame2" fill="url(#Flame2_2)" d="M249.89,397.138c0,32.891-20.288,80.104-31.744,80.104	c-11.281,0-31.744-47.213-31.744-80.104c0-32.889,14.212-39.002,31.744-39.002C235.678,358.136,249.89,364.249,249.89,397.138z"/>
<linearGradient id="Flame3_2" gradientUnits="userSpaceOnUse" x1="218.146" y1="450.334" x2="218.146" y2="358.1492">	<stop offset="0" style="stop-color:#EC7E41;stop-opacity:0"/>	<stop offset="0.5399" style="stop-color:#EC7E41"/>	<stop offset="0.9939" style="stop-color:#FFD67B"/>
</linearGradient>
<path id="Flame3" fill="url(#Flame3_2)" d="M249.89,397.138c0,32.891-20.288,80.104-31.744,80.104	c-11.281,0-31.744-47.213-31.744-80.104c0-32.889,14.212-39.002,31.744-39.002C235.678,358.136,249.89,364.249,249.89,397.138z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="217.8491" y1="326.041" x2="218.12" y2="365.9432">	<stop offset="0" style="stop-color:#76765A"/>	<stop offset="1" style="stop-color:#6B6A54"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="193.606,311.526 242.633,311.526 253.099,365.919 183.14,365.919 "/>
<rect x="182.302" y="350.615" fill="#76765A" width="71.635" height="3.76"/>
<rect x="182.302" y="354.375" fill="#545343" width="71.635" height="3.76"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="178.0044" y1="295.3262" x2="217.9839" y2="295.3262">	<stop offset="0" style="stop-color:#BAAE88"/>	<stop offset="1" style="stop-color:#A6A27D"/>
</linearGradient>
<rect x="178.004" y="264.452" fill="url(#SVGID_2_)" width="39.979" height="61.749"/>
<rect x="217.984" y="264.452" fill="#BAAE88" width="39.979" height="61.749"/>
<polygon fill="#BAAE88" points="367.018,240.924 367.018,183.386 359.691,183.386 359.691,233.704 312.471,187.164 217.984,187.164	217.984,270.659 330.473,270.659 415.874,308.879 435.968,308.879 "/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0" y1="246.1328" x2="217.9839" y2="246.1328">	<stop offset="0" style="stop-color:#BAAE88"/>	<stop offset="1" style="stop-color:#A6A27D"/>
</linearGradient>
<polygon fill="url(#SVGID_3_)" points="123.497,187.164 76.276,233.704 76.276,183.386 68.95,183.386 68.95,240.924 0,308.879	20.094,308.879 105.496,270.659 217.984,270.659 217.984,187.164 "/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="199.9463" y1="18.0752" x2="236.0967" y2="18.0752">	<stop offset="0" style="stop-color:#BAAE88"/>	<stop offset="1" style="stop-color:#A6A27D"/>
</linearGradient>
<circle fill="url(#SVGID_4_)" cx="218.021" cy="18.075" r="18.075"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="181.9722" y1="16.8262" x2="205.2015" y2="283.0239">	<stop offset="0" style="stop-color:#B85B2F"/>	<stop offset="1" style="stop-color:#EC7E41"/>
</linearGradient>
<polygon fill="url(#SVGID_5_)" points="199.939,18.075 217.984,18.075 217.984,270.309 170.114,292.373 "/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="214.2456" y1="268.3872" x2="284.562" y2="-19.1569">	<stop offset="0" style="stop-color:#B85B2F"/>	<stop offset="1" style="stop-color:#EC7E41"/>
</linearGradient>
<polygon fill="url(#SVGID_6_)" points="236.028,18.075 217.984,18.075 217.984,270.309 265.854,292.373 "/>
<polygon fill="#181B24" points="224.177,30.057 212.154,30.057 203.781,91.147 206.921,104.768 218.12,104.768 229.318,104.768	232.458,91.147 "/>
<rect x="122.536" y="171.516" fill="#EC7E41" width="8.164" height="114.078"/>
<rect x="305.269" y="171.516" fill="#EC7E41" width="8.164" height="114.078"/>
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="220.1772" y1="129.4927" x2="259.7304" y2="164.651">	<stop offset="0" style="stop-color:#A6A27D"/>	<stop offset="1" style="stop-color:#BAAE88"/>
</linearGradient>
<polygon fill="url(#SVGID_7_)" points="218.12,96.162 283.292,159.166 218.12,159.166 "/>
<polygon fill="#BAAE88" points="217.984,96.162 152.812,159.166 217.984,159.166 "/>
<rect x="178.167" y="338.722" fill="#76765A" width="79.959" height="3.76"/>
<rect x="178.14" y="342.482" fill="#545343" width="79.959" height="3.76"/>
</svg> </div>
</div>
<footer> A coded rebound of a dribbble <a href="http://dribbble.com/shots/1491661-Pew-Pew-Pew-WIP?list=searches&tag=pew&offset=0">shot</a> by <a href="http://dribbble.com/adamgrason?page=1">Adam Grason</a>
</footer>
</body>
</html>

Pew - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:400);
*, *:before, *:after { margin:0; padding:0; box-sizing:border-box;
}
html, body {width:100%;height:100%;}
body { background:url("https://dl.dropboxusercontent.com/u/330966/static/noise.png") #0e181d; overflow-x:hidden; padding:0 1rem; font-family: 'Lato', sans-serif;
}
.pew { position:relative; width:100%; height:90%; max-width:30rem; margin:10% auto 20% auto; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
}
div[class^="orion"] { position:absolute; top:0; left:0; height:0; border-radius:50%; border:2px dashed #f8e9c0; box-shadow:inset 0 0 10px 15px #0e181d;
}
.orion_1 { width:300%; padding-bottom:300%; -webkit-transform:translateX(-33.33%) translateY(-33.33%); transform:translateX(-33.33%) translateY(-33.33%);
}
.orion_2 { width:100%; padding-bottom:100%;
}
div[class^="orion"]:before,
div[class^="orion"]:after { content:''; position:absolute; left:50%; border-radius:50%; z-index:333;
}
.orion_1:before,
.orion_1:after { top:-0.75%; left:50%; margin-left:-0.75%; width:1.5%; height:1.5%; -webkit-transform-origin:50% 3330%; transform-origin:50% 3330%;
}
.orion_1:before { background:#a3a07d; -webkit-animation:planet 60s linear infinite; animation:planet 60s linear infinite;
}
.orion_1:after { background:#ec8042; -webkit-animation:planet 40s linear reverse infinite; animation:planet 40s linear reverse infinite;
}
.orion_2:before,
.orion_2:after { top:-2.7%; left:50%; margin-left:-2.5%; width:5%; height:5%; -webkit-transform-origin:50% 1050%; transform-origin:50% 1050%;
}
.orion_2:before { background:#a6a27d; -webkit-animation:planet 10s linear infinite; animation:planet 10s linear infinite;
}
.orion_2:after { background:#ec8042; -webkit-animation:planet 20s linear reverse infinite; animation:planet 20s linear reverse infinite;
}
@-webkit-keyframes planet { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes planet { 0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
.starline { position:absolute; display:block; top:50%; left:50%; width:70.71%; padding-bottom:70.71%; border:1px dashed rgba(95,88,82,0.5); border-radius:0 100%; z-index:111;
}
div[class^="orion"] .starline:nth-child(1) { -webkit-transform:translateX(-50%) translateY(-50%) rotate(0deg); transform:translateX(-50%) translateY(-50%) rotate(0deg);
}
div[class^="orion"] .starline:nth-child(2) { -webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg); transform:translateX(-50%) translateY(-50%) rotate(45deg);
}
div[class^="orion"] .starline:nth-child(3) { -webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg); transform:translateX(-50%) translateY(-50%) rotate(90deg);
}
div[class^="orion"] .starline:nth-child(4) { -webkit-transform:translateX(-50%) translateY(-50%) rotate(135deg); transform:translateX(-50%) translateY(-50%) rotate(135deg);
}
.rockwrap { display:inline-block; position:relative; width:70%; margin:15%; padding-bottom:70%; vertical-align:middle; overflow:hidden; z-index:999;
}
.rocket { display:inline-block; position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transform:translateX(0) translateY(0); transform:translateX(0) translateY(0); -webkit-animation:hover 2.5s linear infinite; animation:hover 2.5s linear infinite;
}
@-webkit-keyframes hover { 0%, 100% {-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);} 50% {-webkit-transform:translateX(-1%) translateY(-1%);transform:translateX(-1%) translateY(-1%);}
}
@keyframes hover { 0%, 100% {-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);} 50% {-webkit-transform:translateX(-1%) translateY(-1%);transform:translateX(-1%) translateY(-1%);}
}
footer { position:relative; padding:2em 1em; text-align:center; color:#f8e9c0; font-size:1.2em; font-weight:400; z-index:999;
}
footer a { position:relative; text-decoration:none; color:#ec8042;
}
footer a:before { content:''; position:absolute; right:80%; bottom:-3px; width:20%; height:1px; background:#ec8042; opacity:0; -webkit-transition:opacity 0.05s 0.35s, right 0.15s 0.3s, width 0.15s; transition:opacity 0.05s 0.35s, right 0.15s 0.3s, width 0.15s;
}
footer a:hover:before { right:0; width:100%; opacity:1; -webkit-transition:opacity 0s, right 0.15s, width 0.15s 0.2s; transition:opacity 0s, right 0.15s, width 0.15s 0.2s;
}
Pew - Script Codes
Pew - Script Codes
Home Page Home
Developer Hornebom
Username Hornebom
Uploaded August 12, 2022
Rating 4.5
Size 4,685 Kb
Views 28,336
Do you need developer help for Pew?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hornebom (Hornebom) Script Codes
Name
Animated Ghost Button
Dancing Joseph Butler
Css3 transitions
CSS Slime Attack
Lamp
Z-index playground
Wanderer
PPDC Button
CodePen MeetUp Germany
MovieScript
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!