TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda CSS -pyörivä kuutio -widget?

4

CSS on peto, varsinkin kun olet oppimisvaiheessa, on hauskaa harjoitella erilaisia ​​ominaisuuksia. CSS -webkit -animaatio -ominaisuuksia on mielenkiintoista pelata luodaksesi houkuttelevia animaatioita sivustollesi. Tässä artikkelissa luomme yksinkertaisen CSS -pyörivän kuution widgetin käyttämällä avainkehyksiä.

Aiheeseen liittyviä: HTML -opetusohjelma aloittelijoille.

Mikä on pyörivä kuutio?

Pyörivä kuutio näyttää alla olevalta.

Voit esitellä tekstiä tai kuvia kuution kuudella pinnalla ja ohjata pyörimisnopeutta, jotta katsojat ymmärtävät kiertämisen aikana. Voit esimerkiksi esitellä tuotekuviasi kauppasivulla, jolloin jokainen kuva linkittää vastaavalle tuotesivulle.

Widgetin osat

Widgetissä on kaksi osaa – CSS ja HTML. On suositeltavaa sijoittaa CSS -osa verkkosivun otsikko -osion sisään ja HTML -osa rungon sisälle.

1 CSS widgetille

Alla on pyörivän kuutio -widgetin CSS. Määritämme ensin laatikon, lisäämme kuusi sivua ja pyöritämme laatikkoa webkit -avainkehysten animaatiolla.

<style type="text/css"> #box div { position: absolute; height: 250px; width: 250px; border: 1px solid lightgrey; background: rgba(255,200,100,0.8); text-align: center; font-size: 200px; } #box { -webkit-animation-name: animation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; margin:80; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 125px 125px 0; } #box .one { -webkit-transform: translateZ(125px); } #box .two { -webkit-transform: rotateX(-90deg) translateZ(125px); } #box .three { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px); } #box .four { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px); } #box .five { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px); } #box .six { -webkit-transform: rotateY(90deg) translateZ(125px); } @-webkit-keyframes animation { from,to{} 16% { -webkit-transform: rotateY(-90deg);} 33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);} 50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);} 66% { -webkit-transform: rotateY(135deg) rotateX(135deg);} 83% { -webkit-transform: rotateX(135deg);} } </style>

2 Widgetin HTML

Alla on widgetin HTML -koodi, sinun on korvattava kuvat omilla kuva -URL -osoitteillasi.

<div id="view" style="width:350px; height:250px; margin:80px auto 0 auto;"> <div id="box"> <div class="one"><img src="https://img.webnots.com/2016/09/A-One.png"></div> <div class="two"><img src="https://img.webnots.com/2016/09/B-Two.png"></div> <div class="three"><img src="https://img.webnots.com/2016/09/C-Three.png"></div> <div class="four"><img src="https://img.webnots.com/2016/09/D-Four.png"></div> <div class="five"><img src="https://img.webnots.com/2016/09/E-Five.png"></div> <div class="six"><img src="https://img.webnots.com/2016/09/F-Six.png"></div> </div> </div>

Widgetin mukauttaminen

Voit muokata widgetiä tarpeidesi mukaan ja alla on muutamia vaihtoehtoja:

  • Laatikon kokoa käytetään 250 x 250 kuvapistettä ja translateZ: tä käytetään puolet leveydestä 125 pikseliä. Jos haluat muuttaa laatikon kokoa, muista muuttaa molemmat parametrit vastaavasti.
  • Varmista, että käytät samankokoisia kuvia kuin laatikossa. Tässä esimerkissä olemme käyttäneet 250 x 250 pikselin kuvia laatikon kaikilla sivuilla. Voit myös käyttää mitä tahansa tekstiä kuvan tai tekstin / kuvayhdistelmän sijasta eri kasvoilla.
  • Pyörimisnopeus määritellään CSS: ssä 6 sekunniksi muodossa "-webkit-animation-duration: 6s;". Voit lisätä tai vähentää pyörimisnopeutta tarpeen mukaan.
  • Käytä avainkehyksen animaatioprosentin arvoja muuttaaksesi muunnosnopeutta.
  • Laatikon sijainti määritetään käyttämällä inline -tyyliä HTML -koodissa 350px leveys, 250px korkeus ja 180px marginaali. Voit säätää näitä arvoja sijoittaaksesi kuution oikein verkkosivullesi.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja