Icon Fonts and CSS3 Animations

Developer
Paul Demers
Size
3,288 Kb
Views
52,624
  1. Icon Fonts and CSS3 Animations Previews
  2. Icon Fonts and CSS3 Animations HTML Codes
  3. Icon Fonts and CSS3 Animations CSS Codes

How do I make an icon fonts and css3 animations?

A demo of creating a logo using an icon font. A sprinkle of CSS3 animations on hover for good measure.. What is a icon fonts and css3 animations? How do you make a icon fonts and css3 animations? This script and codes were developed by Paul Demers on 28 August 2022, Sunday.

Icon Fonts and CSS3 Animations Previews
IQ Test

Icon Fonts and CSS3 Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon Fonts and CSS3 Animations</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Oleo+Script'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"> <div class="intro">
<h1>Icon Fonts and CSS3 Animations</h1> <p>A demo of creating a logo using an icon font. A sprinkle of CSS3 animations on hover for good measure.</p>
</div>
<hr />
<div class="logo"> <span class="inner" aria-hidden="true" data-icon="&#x69;"></span> <span class="ring" aria-hidden="true" data-icon="&#x72;"></span>
</div>
</div>
</body>
</html>

Icon Fonts and CSS3 Animations - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png) repeat;
}
body { color: #222;
}
.intro { text-align: center; display: block; padding-bottom: 0.5em; margin: 0 auto;
}
h1, h2 { font-family: "Oleo Script"; text-shadow: white 1px 1px 0; color: #274b6a;
}
.content { width: 90%; margin: 0 auto;
}
@font-face { font-family: "pd"; src: url("https://dl.dropbox.com/u/272916/codepen/iconFont/pd.eot") format("eot"), url("https://dl.dropbox.com/u/272916/codepen/iconFont/pd.eot?#iefix") format("embedded-opentype"), url("https://dl.dropbox.com/u/272916/codepen/iconFont/pd.woff") format("woff"), url("https://dl.dropbox.com/u/272916/codepen/iconFont/pd.ttf") format("truetype"), url("https://dl.dropbox.com/u/272916/codepen/iconFont/pd.svg#pd") format("svg"); font-weight: normal; font-style: normal;
}
[data-icon]:before { font-family: "pd"; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;
}
.logo { width: 8em; height: 8em; margin: 2em auto; cursor: pointer; position: relative;
}
.logo .ring, .logo .inner { position: absolute; font-size: 8em; color: #274b6a; display: inline-block; line-height: 0; /* Hardware acceleration FTW! */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0);
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(10deg); }
}
@-webkit-keyframes spinrev { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-10deg); }
}
@keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(10deg); }
}
@keyframes spinrev { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-10deg); }
}
.logo:hover .ring { -webkit-animation: spin 1s ease; -moz-animation: spin 1s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.logo:hover .inner { -webkit-animation: spinrev 1s ease; -moz-animation: spinrev 1s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@media all and (min-width: 65em) { .logo .ring, .logo .inner { font-size: 10em; }
}
Icon Fonts and CSS3 Animations - Script Codes
Icon Fonts and CSS3 Animations - Script Codes
Home Page Home
Developer Paul Demers
Username demersdesigns
Uploaded August 28, 2022
Rating 3.5
Size 3,288 Kb
Views 52,624
Do you need developer help for Icon Fonts and CSS3 Animations?

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!

Paul Demers (demersdesigns) Script Codes
Name
Half Circle Hover Effect
Project Timeline
Fancy Radios, Checkboxes, and Selects
Fun with transition
Air Quality Gauge
Fullscreen Overlay
Fancy Select Demo
Populate Login with User Avatar
Icon Font Social Icons
Animated Gradient Text Backgrounds
Create amazing video scripts 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!