標籤:css3 art blank 邊框 ado 技術 相同 理論 知識
轉載請標明出處:http://blog.csdn.net/lmj623565791/article/details/34120047
創意來自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同學給我發的範例,感覺非常不錯,只是實在想不出來實際的用處。可是效果非常炫~
:
知識點:
1、perspective ,transform 的複習
2、css3 backgroud實現格格背景。即面上的小格格
3、 @-webkit-keyframes 實現動畫
HTML:
<body><div class="stage"> <div class="cube"> <div class="font"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </div></div></body>
前面的3D商品展示中已經說過怎樣製作正方體,而且那個上面還有數字。理論上說比這個複雜,儘管木有這個炫~這裡就不多說了。
CSS:
html { background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%); background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%); height: 100%; } .stage { -webkit-perspective: 1000px; width: 20em; height: 20em; left: 50%; top: 50%; margin-left: -10em; margin-top: -10em; position: absolute; } .cube { position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(-20deg) rotateY(-20deg); } .cube * { background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px); -webkit-background-size: 2.5em 2.5em; background-color: rgba(0, 0, 0, 0.5); position: absolute; width: 100%; height: 100%; border: 2px solid rgba(54, 226, 248, 0.5); -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4); } .font { -webkit-transform: translateZ(10em); } .back { -webkit-transform: rotateX(180deg) translateZ(10em); } .left { -webkit-transform: rotateY(-90deg) translateZ(10em); } .right { -webkit-transform: rotateY(90deg) translateZ(10em); } .top { -webkit-transform: rotateX(90deg) translateZ(10em); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(10em); }
相同:stage作為舞台。cube設定子項目的效果為3d,然後每一個面都進行旋轉和設定translateZ然後形成立方體。
為每一個面設定backgroud設定小格格的代碼:
background: -webkit-linear-gradient( left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient( top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px); -webkit-background-size: 2.5em 2.5em;
背景設定,從左至右的3像素的條條,從上到下的3像素的條條。然後設定背景大小為2.5em 2.5em 。然後將背景反覆顯示。效果例如以下(我加入了邊框):
如今的完整效果:
能夠看到立方體已經成型了,最後加入上動畫即可了,不要認為動畫非常複雜,事實上非常easy~
定義一個動畫幀:
@-webkit-keyframes spin { from { -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); transform: translateZ(-10em) rotateX(0) rotateY(0deg); } to { -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); } }
名字為spin。開始時 translateZ(-10em) rotateX(0) rotateY(0deg); 結束時 : translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同一時候繞著x,y軸360度旋轉。
最後給我們的立方體加上此animation屬性:
.cube { -webkit-animation: 6s spin linear infinite; position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(-20deg) rotateY(-20deg); }
設定時間為動畫時間 6s , 動畫 spin , 速度為勻速linear , 無限迴圈 infinite ;
關於更加仔細的參數設定,能夠參考w3cSchool~以後我也會寫單獨介紹CSS3的屬性的部落格~
好了,最終的效果就已經完畢了~
對於原網站的樣子,有點細微的區別:
由於它額外給每一個面加入了一個放射狀漸層,那麼我們加入上:
.cube *:before { display: block; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%); content: ‘‘; height: 100%; width: 100%; position: absolute; }
利用before這個虛擬元素,然後設定放射狀漸層~~如今最終一致了~
原始碼點擊下載
HTML5 CSS3 誘人的執行個體: 3D立方體旋轉動畫