MyShopi Logo animation

Developer
Adrien Clerbois
Size
2,316 Kb
Views
6,072
  1. MyShopi Logo animation Previews
  2. MyShopi Logo animation HTML Codes
  3. MyShopi Logo animation CSS Codes

How do I make an myshopi logo animation?

What is a myshopi logo animation? How do you make a myshopi logo animation? This script and codes were developed by Adrien Clerbois on 30 December 2022, Friday.

MyShopi Logo animation Previews
IQ Test

MyShopi Logo animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>myShopi Logo animation</title> <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://i.icomoon.io/public/6b47a415d3/myShopifont/style.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapp"> <div class="text"> <h1>my<span>Shopi</span></h1> </div> <div class="logo"> <span class="myshopi-icon-logo-account"></span> </div>
</div>
</body>
</html>

MyShopi Logo animation - Script Codes CSS Codes

body{	margin: 0;	padding: 0;	background-color: #7ac323; font-family: 'Oswald';
}
.wrapp{	position: absolute;	top: 50%;	left: 50%;	width: 600px;	height: 300px;	margin: -150px 0 0 -300px;	-webkit-perspective: 30px;	-webkit-transform: translateX(0px);	-webkit-animation: wrapp 400ms 800ms ease-in forwards;	-moz-perspective: 30px;	-moz-transform: translateX(0px);	-moz-animation: wrapp 400ms 800ms ease-in forwards;	-ms-perspective: 30px;	-ms-transform: translateX(0px);	-ms-animation: wrapp 400ms 800ms ease-in forwards;	perspective: 30px;	transform: translateX(0px);	animation: wrapp 400ms 800ms ease-in forwards;
}
.text{	position: absolute;	top: 50%;	left: 50%;	width: 0px;	height: 60px;	margin: -30px 0 0 -160px;	overflow: hidden;	-webkit-transform: translateX(0px);	-webkit-animation: text 400ms 800ms linear forwards;	-moz-transform: translateX(0px);	-moz-animation: text 400ms 800ms linear forwards;	-ms-transform: translateX(0px);	-ms-animation: text 400ms 800ms linear forwards;	transform: translateX(0px);	animation: text 400ms 800ms linear forwards;
}
h1{	float: right;	font-family: "Oswald", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;	font-weight: normal;	color: #fff;	padding: 0;	margin: 0;	width: 320px;	height: 60px;	font-size: 50px;	line-height: 50px;
}
h1 > span{ color: #70796d;
}
.logo{	position: absolute;	top: 50%;	left: 50%;	width: 90px;	height: 90px;	margin: -45px 0 0 -45px;	background-color: 0;	-webkit-transform: translateX(0px) rotateY(10deg);	-webkit-animation: logo 500ms 300ms ease-out forwards;	-moz-transform: translateX(0px) rotateY(10deg);	-moz-animation: logo 500ms 300ms ease-out forwards;	-ms-transform: translateX(0px) rotateY(10deg);	-ms-animation: logo 500ms 300ms ease-out forwards;	transform: translateX(0px) rotateY(10deg);	animation: logo 500ms 300ms ease-out forwards;
}
.logo .top-left{	position: absolute;	top: 0;	left: 0;	width: 44px;	height: 44px;	border-right: solid 2px #90da15;	border-bottom: solid 2px #90da15;
}
.logo .bottom-right{	position: absolute;	bottom: 0;	right: 0;	width: 44px;	height: 44px;	border-left: solid 2px #90da15;	border-top: solid 2px #90da15;
}
.logo > span{ font-size: 5.5em; color: white;
}
@-webkit-keyframes logo { from {	-webkit-transform: translateX(0px) rotateY(10deg); } to {	-webkit-transform: translateX(0px) rotateY(-10deg); }
}
@-webkit-keyframes text { from {	width: 0px;	-webkit-transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	-webkit-transform: translateX(240px); }
}
@-webkit-keyframes wrapp { from {	-webkit-transform: translateX(0px); } to {	-webkit-transform: translateX(-200px); }
}
@-moz-keyframes logo { from {	-moz-transform: translateX(0px) rotateY(10deg); } to {	-moz-transform: translateX(0px) rotateY(-10deg); }
}
@-moz-keyframes text { from {	width: 0px;	-moz-transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	-moz-transform: translateX(240px); }
}
@-moz-keyframes wrapp { from {	-moz-transform: translateX(0px); } to {	-moz-transform: translateX(-200px); }
}
@-ms-keyframes logo { from {	-ms-transform: translateX(0px) rotateY(10deg); } to {	-ms-transform: translateX(0px) rotateY(-10deg); }
}
@-ms-keyframes text { from {	width: 0px;	-ms-transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	-ms-transform: translateX(240px); }
}
@-ms-keyframes wrapp { from {	-ms-transform: translateX(0px); } to {	-ms-transform: translateX(-200px); }
}
@keyframes logo { from {	transform: translateX(0px) rotateY(10deg); } to {	transform: translateX(0px) rotateY(-10deg); }
}
@keyframes text { from {	width: 0px;	transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	transform: translateX(240px); }
}
@keyframes wrapp { from {	transform: translateX(0px); } to {	transform: translateX(-200px); }
}
MyShopi Logo animation - Script Codes
MyShopi Logo animation - Script Codes
Home Page Home
Developer Adrien Clerbois
Username AClerbois
Uploaded December 30, 2022
Rating 3
Size 2,316 Kb
Views 6,072
Do you need developer help for MyShopi Logo animation?

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!

Adrien Clerbois (AClerbois) Script Codes
Name
Masonry - layoutComplete
Orgagodeon
Viewer and markers selectors v2 DEMO
Meters
Viewer
Windows 8 logo animation
Viewer and markers selection from jQuery UI
Viewer and markers selectors v2
Shine Effect
Audi Ring animation CSS
Create amazing sales emails 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!