Arquivo: estilo.css
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}
*{
font-family: 'Oswald', sans-serif;
}
html {
height: 100%;
}
body {
margin: 0;
background-color: #0D262D;
color: #fff;
height: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: solid 1px white;
}
td {
font-size: 1.6em;
padding: 10px;
}
li {
font-size: 1.6em;
}
.conteudo {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
}
.exercicio div {
font-size: 1.8em;
border: solid 5px #fff;
padding: 0px 40px;
margin: 10px;
}
.exercicio div:nth-of-type(1) {
background-color: darkgoldenrod;
}
.exercicio div:nth-of-type(2) {
background-color: crimson;
}
.exercicio div:nth-of-type(3) {
background-color: darkcyan;
}
.exercicio div:nth-of-type(4) {
background-color: darkorchid;
}
.exercicio div:nth-of-type(5) {
background-color: dodgerblue;
}
.exercicio div:nth-of-type(6) {
background-color: salmon;
}
.exercicio .destaque {
border: solid 10px greenyellow;
color: greenyellow;
font-weight: bold;
}
Arquivo: animacao2.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Animação #02</title>
<link rel='stylesheet' href='css/estilo.css'>
<script src='js/jquery.js'></script>
<style>
body {
position: relative;
background-color: #999;
color: #000;
}
div {
position: absolute;
display: inline;
border: solid 10px #000;
padding: 50px;
font-size: 3em;
background-color: crimson;
}
</style>
</head>
<body>
<div>Animar!</div>
<script>
//Função para alterar largura
function alterarLargura(valor, duracao, callback) {
$('div').animate({ width: `+=${valor}` }, duracao
, callback)
}
//função para mover na diagonal
function moverDiagonal(valor, duracao, callback) {
$('div').animate({ top: `+=${valor}`, left: `+=${valor}` }
, duracao, callback)
}
//função de girar
function girar(valor, duracao, callback) {
$('div').animate({ transform: `+=${valor}` }, {
step: function (valor) {
$(this).css('transform', `rotate(${valor}deg)`)
},
duration: duracao
}, 'linear', callback)
}
//chamando as funções
alterarLargura(300, 100, () => {
alterarLargura(-300, 'slow', () => {
moverDiagonal(300, 600, () => {
girar(3300, 3000)
})
})
})
</script>
</body>
Arquivo: jquery.js clique aqui para fazer o download
