Hoje o assunto não é bem um tutorial e sim uma pequena amostra de como brincar com CSS3 é legal!
Vamos criar um texto animado com uma rolagem bem bacana:
Inicialmente vamos criar nosso arquivo HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Animação de Texto</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<div class='content'>
<div class='visible'>
<p>Hello</p>
<ul>
<li>world !</li>
<li>codigo !</li>
<li>simples !</li>
<li>.net !</li>
</ul>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
Iremos adicionar no nosso CSS os efeitos de animação:
body {
width: 100%;
height: 100%;
position: fixed;
background-color: #34495e;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 35px;
line-height: 40px;
font-family: 'Muli';
color: #ecf0f1;
height: 160px;
overflow: hidden;
}
.visible {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.visible:before {
content: '[';
left: 0;
line-height: 40px;
}
.visible:after {
content: ']';
position: absolute;
right: 0;
line-height: 40px;
}
.visible:after, .visible:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
animation: 2s linear 0s normal none infinite opacity;
}
p {
display: inline;
float: left;
margin: 0;
}
ul {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
animation: 6s linear 0s normal none infinite change;
}
ul li {
line-height: 40px;
margin: 0;
}
@keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes change {
0%, 12%, 100% {
transform: translateY(0);
}
17%,29% {
transform: translateY(-25%);
}
34%,46% {
transform: translateY(-50%);
}
51%,63% {
transform: translateY(-75%);
}
68%,80% {
transform: translateY(-50%);
}
85%,97% {
transform: translateY(-25%);
}
}
Viu só que bacana? Futuramente no blog iremos falar sobre animações, utilização de seletores de css e muito mais.
Se quiser o código fonte está bem aqui!.
Um grande abraço a todos e até a próxima!
