search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

用CSS實現擲骰子效果,從這代碼便看出他是程序員中的賭神

我又來了,今天做個小東西,用CSS3做一個骰子玩一玩,具體的代碼我全貼出來了,你們自己也試試。

抽獎或遊戲之類的動畫很多時候用到擲骰子,一般採用gif圖片格式實現動畫效果。gif圖片占內存較大,用戶體驗不好,下面用css3實現的擲骰子效果,骰子點數、面和轉動效果都是有css,css3完成的。

效果圖如下

製作過程如下:

一、製作六個面,如下圖:

完全用css寫出來,為了使其更加真實,可以讓點數的圓圈加一些陰影,這一步比較簡單。

二、將六個面拼成一個骰子

這一步需要用到css3的transform中rotate和translate。下面的css代碼會纖細講到。

這裡還是要說一下我自己建的前端javascript學習裙:657-137-906,不說別的,能進我群的沒兩把刷子怎麼可能呢,當然小白我也挺歡迎,畢竟整天有人大神大神的叫,哈哈,也挺爽,不定期分享乾貨。想學到東西的都可以來,歡迎初學和進階中的小夥伴

三、讓骰子動起來

這一步需要用到css3的animation。詳細看下面css代碼。

1.模板如下:

2.css

最後,我還要說一個問題,最近老有初學者問我,學前端要會英語嗎??要數學很好嗎?如果是的我不學了,在這裡我可以告訴大家,英語和數學只能決定你的高度,和學習的能力,並不是說你英語和數學不好,前端就學不好。



熱門推薦

本文由 yidianzixun 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦