CSS3 方塊不間斷彈跳效果
分享一段程式碼例項,它利用CSS3實現了方塊不斷的彈跳效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> html,body { margin: 0; background: #bbd149; height: 100%; display: flex; justify-content: center; align-items: center; } .box { height: 50px; width: 50px; position: relative; } .box::before { content: ''; height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%; position: absolute; top: 67px; left: 0; animation: shadow .5s linear infinite; } .box::after { border-radius: 5px; background: #fff; animation: rotate .5s linear infinite; content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 50px; } @keyframes shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.2); } } @keyframes rotate { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(10px) rotate(22.5deg); } 50% { transform: translateY(20px) scale(1.1, 0.9) rotate(45deg); border-bottom-right-radius: 50px; } 75% { transform: translateY(10px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } </style> </head> <body> <div class="box"></div> </body> </html>
程式碼實現了預期效果,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼html,body { margin: 0; background: #bbd149; height: 100%; display: flex; justify-content: center; align-items: center; }
採用彈性佈局,這樣的話,並且設定它內部專案水平垂直居中。
[CSS] 純文字檢視 複製程式碼.box { height: 50px; width: 50px; position: relative; }
底部陰影和頂部跳動元素的容器。
並且採用相對定位,那麼它的定位子元素位移就以它為參考物件。
[CSS] 純文字檢視 複製程式碼.box::before { content: ''; height: 8px; width: 50px; background: #000; opacity: .2; border-radius: 50%; position: absolute; top: 67px; left: 0; animation: shadow .5s linear infinite; }
通過偽元素選擇器新增底部陰影。
高度和寬度分別8px和50px,尺寸符合視覺效果。
然後通過動畫設定其尺寸不斷的增加和縮小,實現了頂部元素不斷變化投影跟隨變化的視覺效果。
[CSS] 純文字檢視 複製程式碼.box::after { border-radius: 5px; background: #fff; animation: rotate .5s linear infinite; content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 50px; }
通過偽元素選擇器新增上面跳動的元素。
與底部陰影一樣的道理,只不過動畫執行過程有所區別而已。
[CSS] 純文字檢視 複製程式碼@keyframes shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.2); } }
設定元素由原來寬度放倒原來的1.2被寬度,再還原到原來寬度。
[CSS] 純文字檢視 複製程式碼50% { transform: translateY(20px) scale(1.1, 0.9) rotate(45deg); border-bottom-right-radius: 50px; }
模擬元素觸碰的時候,由於壓力導致寬度變大,高度變小,右下部為圓角效果。
二.相關閱讀:
(1).display: flex參閱display:flex彈性佈局一章節。
(2).相對定位參閱CSS position:relative 相對定位一章節。
(3).絕對定位參閱CSS position:absolute 絕對定位一章節。
(4).border-radius參閱CSS3 border-radius一章節。
(5).animation參閱CSS3 animation一章節。
(6).::after參閱CSS E::after 偽物件選擇器一章節。
(7).@keyframes參閱CSS3 @keyframes一章節。
(8).transform參閱CSS3 transform一章節。
相關文章
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- CSS3核取方塊打勾美化效果CSSS3
- CSS3 3D方塊效果程式碼CSSS33D
- CSS3文字不斷流光滑過效果CSSS3
- css3實現不斷延長的斜線效果CSSS3
- CSS3跳動的紅心效果CSSS3
- css3自定義checkbox核取方塊打勾效果程式碼例項CSSS3
- CSS3時間軸效果CSSS3
- 原生js實現的點選彈出螢幕居中對話方塊效果JS
- css3滑鼠懸浮小球彈性效果CSSS3
- CSS3彈球效果程式碼例項CSSS3
- CSS3 checkbox核取方塊和radio單選框美化效果CSSS3
- css3實現div簡單跳躍效果CSSS3
- Java在Swing中如何實現彈出一個對話方塊的效果?Java
- TWebBrowser禁止彈出Alert對話方塊Web
- javascript中的彈出對話方塊JavaScript
- JavaScript彈出儲存對話方塊JavaScript
- css3美化checkbox核取方塊CSSS3
- css3立方體效果程式碼例項CSSS3
- CSS3立方體3D旋轉效果CSSS33D
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- js實現的單行文字不間斷無縫滾動效果JS
- 16種很讚的 CSS3 & SVG 創意彈窗效果CSSS3SVG
- jQuery核取方塊全選和全不選效果jQuery
- javascript核取方塊全選和反選效果JavaScript
- CSS帶有箭頭的對話方塊效果CSS
- Java 中彈出對話方塊的幾種方式Java
- 給應用程式加個彈出對話方塊
- jQuery不斷閃動的文字效果jQuery
- Js+CSS間斷和不間斷文字滾動程式碼JSCSS
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- 只用html5和css3的modal對話方塊HTMLCSSS3
- 關於bootstrap彈出二級對話方塊的使用boot
- js核取方塊全選和取消全選效果JS
- JavaScript 核取方塊全選和取消全選效果JavaScript
- jquery實現checkbox核取方塊全選效果jQuery
- CSS3 螺旋旋轉黑白相間條紋效果CSSS3
- Aluma Insights:1/6的成年SVOD使用者在應用之間不斷跳轉