Web design and hosting, database, cloud and social media solutions that deliver business results
  • Solução de negócio
    • Automação Robótica de Processos
    • Programas
    • Serviços de banco de dados
      • Relatórios
      • Integração de dados
    • Design de Websites
      • Design de logotipo
      • Gateways de pagamento
      • Localização e Tradução Web
      • Otimização de sites
      • Segurança do site
      • Ferramentas Técnicas
    • Serviços Empresariais
      • Amazon Web Services
      • Serviços do Google Cloud
      • Microsoft Azure
    • Microsoft Office
    • Mídia Social
  • Sobre
    • Carreiras
      • Tradutor Inglês-Espanhol
      • Tradutor Inglês-Turco
      • Tradutor Inglês-Japonês
      • Tradutor Inglês-Português
    • Equipe
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
    • Portfolio
čeština (CS)Deutsch (DE)English (EN-GB)English (EN-US)Español (ES)Français (FR)हिंदी (HI)italiano (IT)日本語 (JA)polski (PL)Português (PT)русский (RU)Türk (TR)中国的 (ZH)

Criar CSS de rolagem

O deslocamento pode economizar muito espaço e pode ser manipulado de forma muito delicada no CSS3, juntamente com o poder da imagem do CSS Sprites e algumas matemáticas, transformaremos esta imagem abaixo no banner rotativo.
Este é o Sprite que usaremos como um plano de fundo para os links.
Social Media sprite image
Para criar um banner rotativo como este. Todos os links apontam para os canais de mídia social da Claytabase.

CSS

<style type="text/css">
/*Sprite Backgrounds*/
.smFbk64{background-position: 0px   -0px}
.smTwi64{background-position:-66px  -0px}
.smGoo64{background-position:-132px -0px}
.smLin64{background-position:-198px -0px}
.sm64{width:64px;height:64px;display:inline-block;overflow:hidden;background-image: url('https://www.gsclayton.net/System/Artwork/Articles/SocialMedia_64.png');background-repeat:no-repeat;}
.rnd50{border-radius:50%}
/*Moving Parts*/
.parentDiv{width:64px;height:64px;overflow:hidden;margin:auto}
.followDiv{width:320px;height:64px;position:relative;
animation:followDivSlide ease infinite 10s;-webkit-animation:followDivSlide ease infinite 10s;-moz-animation:followDivSlide ease infinite 10s;
-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}
@keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-webkit-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
@-moz-keyframes followDivSlide{from{left:0px;}15%{left:0px;}25%{left:-64px;}40%{left:-64px;}50%{left:-128px;}65%{left:-128px;}75%{left:-192px;}90%{left:-192px;}to{left:-256px;}}
</style>
/*HTML*/
<div class="parentDiv">
<
div class="followDiv"><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a><a class="sm64 rnd50 smTwi64" href="https://twitter.com/claytabase"></a><a class="sm64 rnd50 smGoo64" href="https://plus.google.com/+ClaytabaseCoUk"></a><a class="sm64 rnd50 smLin64" href="https://www.linkedin.com/company/claytabase-ltd"></a><a class="sm64 rnd50 smFbk64" href="https://www.facebook.com/Claytabase"></a></div>
</
div>

O Sprite

A imagem tem 8x64 de largura e imagens altas de 8x64 combinadas como uma imagem de 658px de largura e 196px de alta, só nos interessamos as primeiras 4 imagens no momento.
Criamos 4 classes CSS para cada uma delas para criar usando a propriedade de fundo abreviada.
Como você pode ver, a imagem tem um espaço de 2px entre cada imagem, então adicionamos isso à posição, -68px, etc.
Também podemos escolher 2 classes comuns para usar todos os itens, eles definem o raio de limite e o tamanho de cada item.

O Recipiente

Esta é uma div simples, que é exatamente a mesma largura e altura (64x64) como as imagens definidas acima, definimos o transbordamento para oculto para ocultar o resto da criança.
Exemplo Div Div.

A criança / crianças

Esta é a segunda div que é movida no CSS. Definimos a altura para 64px, mas desta vez a largura deve 64px * 4, o que nos dá um total de 256px.
Neste exemplo, queremos replicar o primeiro Sprite ao final, para evitar um súbito idiota entre o Facebook e Linked In, então ajuste a largura para 320px.

A animação

Shema CSS dfilement
Nossa animação, em seguida, move a div para posições de 0px, -64px, -128px, -192px e -256px para que apenas um item seja visível em qualquer ponto durante o movimento. Veja abaixo um exemplo, sem excesso, e no lado direito para uma ilustração de como o posicionamento move cada elemento.

Author

Helpful?

Please note, this commenting system is still in final testing.
Copyright Claytabase Ltd 2020

Registered in England and Wales 08985867

RSSLoginLink Política de CookiesSitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.comClaytabase Ltd, Unit 3d, Rink Road Industrial Estate, PO33 2LT, United Kingdom
As configurações neste site são definidas para permitir todos os cookies. Estes podem ser alterados em nossa página de configurações e políticas de cookie. Ao continuar a usar este site, você concorda com o uso de cookies.
Ousia Logo
Logout
Ousia CMS Loader