Comment réaliser ce type d'effet ?
Bonjour,
J'aimerais réaliser ce même type de page :
http://kevinkalde.com
Je dispose de mon logo
quelqu'un pourrais m'expliquer le code à appliquer pour réaliser ceci ?
d'avance merci.
J'aimerais réaliser ce même type de page :
http://kevinkalde.com
Je dispose de mon logo
quelqu'un pourrais m'expliquer le code à appliquer pour réaliser ceci ?
d'avance merci.
3 réponses
-
tout est dans la source de la page en question
une div avec class logo
et le css
position : absolute, left : 50%; top:50%; pour centrer sur la page
.logo {
background: url(../img/logo.png);
height: 62px;
width: 57px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px;
-webkit-animation: logo 3s linear;
} -
Merci beaucoup de ton aide
Serait-il possible d'avoir le code pour ma page HTML, et CSS ? car j'ai un peu de mal à creer tout ça ...
D'avance je vous remercie. -
il suffit d'afficher le code source de la page en question :
pour le HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kevin Kalde - Web/UI Designer</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="logo"></div>
</body>
</html>
pour le CSS :
html {
margin: 0px; padding: 0px;
}
body {
background: url(../img/bg5.png); #414141
}
.logo {
background: url(../img/logo.png);
height: 62px;
width: 57px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px;
-webkit-animation: logo 3s linear;
}
@-webkit-keyframes logo {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
c'est pas bien de faire du copier / coller, mais vous pouvez vous en inspirer et l'adapter...
