Olá mais uma vez o assunto é HTML5 gostaria de apresentar algo mais complexo mas assim como muitos ou todos estou em fase de aprendizado e devido a escassês de informações consegui somente alguns efetos basicos utilizando HTML5, CSS3 e um pouco de javascript para produzir o efeito desse texto eu utilizei o seguinte CSS
/*Aqui nós criamos a animação com o nome apresentacao vale lembrar que os quadros da função keyframes é definido pelo tempo primeiro nós declaramos quais os atributos iniciais do frame logo depois definimos os atributos que o elemento deve conter ao chegar a certa percentagem(de tempo). Exemplo: se a animação durar 10 segundos quando tivermos em 30% logicamente vamos estar em 3 segundos*/ @-webkit-keyframes apresentacao { from { -webkit-transform: rotateY(-180deg) rotateX(-180deg); margin-top:170px; } 30%{ margin-top:-300px; -webkit-transform: rotateY(-180deg) rotateX(-180deg); } 50%{ margin-top:-300px; } 100% { margin-left:0px; margin-top:0px; -webkit-transform: rotateZ(0deg); } }Agora só falta criar uma forma de chamar a apresentação então criei uma classe CSS
.apresentacao{ -webkit-animation-name: apresentacao; /*Declaro qual apresentação vou chamar ao utilizar a classe */ -webkit-animation-duration: 8s;/*quanto tempo ela deve durar */ -webkit-animation-iteration-count: 1; /* quantidade de loops(repetições) */ -webkit-animation-timing-function: ease-in-out; /*Mais detalhes */ -webkit-animation-direction: alternate; /*Mais detalhes */ }Coloquei somente os dois link's porque acho que são os unicos precise de Mais detalhes
Click aqui para ver tudo.
Para produzir esse efeito basta utilizar esta CSS
Para produzir esse efeito basta utilizar esta CSS
.EsconderTexto{ opacity: 1; -webkit-transition-property: width, height; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; border: 2px solid #000; width: 170px; height:20px; overflow:hidden; }e esse script
<script>if(addEventListener){ ob = document.querySelector('#texto'); ob.addEventListener('click', function () { if(ob.style.width != "500px"){ ob.style.width="500px"; ob.style.height="550px"; } else{ ob.style.width="170px"; ob.style.height="20px"; } }, true); } </script>Forma de Uso
<div id="texto" class="EsconderTexto" > escrever aqui o seu texto </div>
Passe o mouse para desbotar o elemento
CSS
Bom com isso ja da pra se ter uma noção do que esta por virCSS
.desbotar { opacity: 1; -webkit-transition: opacity 2s linear; } .desbotar:hover { opacity: 0.2; }
Nenhum comentário:
Postar um comentário