MyShopi Logo animation

Size
2,316 Kb
Views
6,072

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

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
Create amazing art & images 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!