Develop Denver Logo

Developer
Jack Rugile
Size
3,813 Kb
Views
16,192
  1. Develop Denver Logo Previews
  2. Develop Denver Logo HTML Codes
  3. Develop Denver Logo CSS Codes
  4. Develop Denver Logo JS Codes

How do I make an develop denver logo?

This is a simple animation of the Develop Denver logo. Can't wait to go!Seem to having an issue in Safari, where the D never animates in. Can anyone confirm/give a solution?. What is a develop denver logo? How do you make a develop denver logo? This script and codes were developed by Jack Rugile on 27 December 2022, Tuesday.

Develop Denver Logo Previews
IQ Test

Develop Denver Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Develop Denver Logo</title> <link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { height: 100%;
}
body { background: radial-gradient(#fff, #bbb); font: 400 100% 'Raleway', sans-serif;
}
.dd { animation: circleGrow 500ms 500ms forwards, circleScale 950ms 500ms forwards ; background: #333; border-radius: 50%; color: #fff; font-size: 1.3em; height: 0; left: 50%; opacity: 0; overflow: hidden; position: absolute; text-decoration: none; top: 50%; width: 0;
}
.letter { display: block; height: 10em; left: 0; line-height: 10em; opacity: 0; position: absolute; text-align: center; top: 0; width: 10em;
}
.d { animation: dLetter 250ms 1000ms forwards; left: 1.75em;
}
.v { animation: vLetter 250ms 1150ms forwards; left: -1.75em;
}
.l { animation: lLetter 250ms 1300ms forwards; top: 1.65em;
}
.p { animation: pLetter 250ms 1450ms forwards; top: -1.65em;
}
.line { background: #fff; display: block; height: 6em; left: 50%; margin: -3em 0 0 0; opacity: 1; position: absolute; top: 50%; width: 0.075em;
}
.nwse { animation: nwse 250ms 1600ms forwards; transform: translate(-7.5em, -7.5em) rotateZ(-45deg);
}
.nesw { animation: nesw 250ms 1850ms forwards; transform: translate(-7.5em, 7.5em) rotateZ(45deg);
}
.replay { background: rgba(0, 0, 0, 0.5); border-radius: 0.2em; color: #fff; display: block; font-size: 0.9em; left: 0.75em; opacity: 0.5; padding: 0.5em 0.75em; position: absolute; text-decoration: none; transition: 300ms; top: 0.75em;
}
.replay:hover,
.replay:focus { opacity: 1;
}
@keyframes circleGrow { to { height: 10em; margin: -5em 0 0 -5em; opacity: 1; width: 10em; }
}
@keyframes circleScale { 50% { transform: scale(1.1); }, 100% { transform: scale(1); }
}
@keyframes dLetter { to { left: -1.75em; opacity: 1; }
}
@keyframes vLetter { to { left: 1.75em; opacity: 1; }
}
@keyframes lLetter { to { opacity: 1; top: -1.65em; }
}
@keyframes pLetter { to { opacity: 1; top: 1.65em; }
}
@keyframes nesw { to { transform: rotateZ(45deg); opacity: 1; }
}
@keyframes nwse { to { transform: rotateZ(-45deg); opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="dd"> <span class="letter d">D</span> <span class="letter v">V</span> <span class="letter l">L</span> <span class="letter p">P</span> <span class="line nesw"></span> <span class="line nwse"></span>
</div>
<a href="#" class="replay">Replay</a> <script src="js/index.js"></script>
</body>
</html>

Develop Denver Logo - Script Codes CSS Codes

html,
body { height: 100%;
}
body { background: radial-gradient(#fff, #bbb); font: 400 100% 'Raleway', sans-serif;
}
.dd { animation: circleGrow 500ms 500ms forwards, circleScale 950ms 500ms forwards ; background: #333; border-radius: 50%; color: #fff; font-size: 1.3em; height: 0; left: 50%; opacity: 0; overflow: hidden; position: absolute; text-decoration: none; top: 50%; width: 0;
}
.letter { display: block; height: 10em; left: 0; line-height: 10em; opacity: 0; position: absolute; text-align: center; top: 0; width: 10em;
}
.d { animation: dLetter 250ms 1000ms forwards; left: 1.75em;
}
.v { animation: vLetter 250ms 1150ms forwards; left: -1.75em;
}
.l { animation: lLetter 250ms 1300ms forwards; top: 1.65em;
}
.p { animation: pLetter 250ms 1450ms forwards; top: -1.65em;
}
.line { background: #fff; display: block; height: 6em; left: 50%; margin: -3em 0 0 0; opacity: 1; position: absolute; top: 50%; width: 0.075em;
}
.nwse { animation: nwse 250ms 1600ms forwards; transform: translate(-7.5em, -7.5em) rotateZ(-45deg);
}
.nesw { animation: nesw 250ms 1850ms forwards; transform: translate(-7.5em, 7.5em) rotateZ(45deg);
}
.replay { background: rgba(0, 0, 0, 0.5); border-radius: 0.2em; color: #fff; display: block; font-size: 0.9em; left: 0.75em; opacity: 0.5; padding: 0.5em 0.75em; position: absolute; text-decoration: none; transition: 300ms; top: 0.75em;
}
.replay:hover,
.replay:focus { opacity: 1;
}
@keyframes circleGrow { to { height: 10em; margin: -5em 0 0 -5em; opacity: 1; width: 10em; }
}
@keyframes circleScale { 50% { transform: scale(1.1); }, 100% { transform: scale(1); }
}
@keyframes dLetter { to { left: -1.75em; opacity: 1; }
}
@keyframes vLetter { to { left: 1.75em; opacity: 1; }
}
@keyframes lLetter { to { opacity: 1; top: -1.65em; }
}
@keyframes pLetter { to { opacity: 1; top: 1.65em; }
}
@keyframes nesw { to { transform: rotateZ(45deg); opacity: 1; }
}
@keyframes nwse { to { transform: rotateZ(-45deg); opacity: 1; }
}

Develop Denver Logo - Script Codes JS Codes

(function() { var lines, replay, resetAnimation; resetAnimation = function(e) { var clone, elem, i, lines, results; e.preventDefault(); lines = document.querySelectorAll('.dd'); i = lines.length; results = []; while (i--) { elem = lines[i]; clone = elem.cloneNode(true); results.push(elem.parentNode.replaceChild(clone, elem)); } return results; }; replay = lines = document.querySelector('.replay'); replay.addEventListener('click', resetAnimation);
}).call(this);
Develop Denver Logo - Script Codes
Develop Denver Logo - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded December 27, 2022
Rating 4.5
Size 3,813 Kb
Views 16,192
Do you need developer help for Develop Denver Logo?

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!

Jack Rugile (jackrugile) Script Codes
Name
In View Detector
Canvas Color Smoke
Canvas Parallax Skyline
Rainbow Loader
CSS3 Pseudo Sound Bars
Canvas Waterfall
Canvas Orbital Trails
Canvas Parallax Mountains
Canvas Fireworks
CSS Vinyl Record
Create amazing Facebook ads 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!