css3實現的滾動的檯球效果
分享一段程式碼例項,它實現了滾動的檯球效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .btn { display: inline-block; border: none; color: #FFFFFF; text-align: center; padding: 4px 2px; transition: all 0.5s; cursor: pointer; } .btn:focus { outline: none; } .btn-big:focus { outline: none; } .btn-big { display: inline-block; border-radius: 4px; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .btn1 { font-size: 10px; } .btn2 { font-size: 12px; } .btn3 { font-size: 16px; } .btn4 { font-size: 20px; } .btn5 { font-size: 24px; } .btn6 { font-size: 28px; } /*顏色*/ .bg-blue { background-color: #008CBA; } /* Blue */ .bg-red { background-color: #f44336; } /* Red */ .bg-gray { background-color: #e7e7e7; color: black; } /* Gray */ .bg-black { background-color: #555555; } /* Black */ .bg-green { background: #8BC34A; } .bg-FF9800 { background: #FF9800; } /*黃色*/ /*圓角*/ .bor-rad-2 { border-radius: 2px; } .bor-rad-4 { border-radius: 4px; } .bor-rad-8 { border-radius: 8px; } .bor-rad-12 { border-radius: 12px; } .bor-rad-50 { border-radius: 50%; } /*邊框*/ .bor-4CAF50 { background-color: white; color: black; border: 2px solid #4CAF50; } .bor-008CBA { background-color: white; color: black; border: 2px solid #008CBA; } .bor-f44336 { background-color: white; color: black; border: 2px solid #f44336; } .bor-e7e7e7 { background-color: white; color: black; border: 2px solid #e7e7e7; } .bor-555555 { background-color: white; color: black; border: 2px solid #555555; } .key1 span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .key1 span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .key1:hover span { padding-right: 25px; } .key1:hover span:after { opacity: 1; right: 0; animation: left 2s infinite; } @keyframes left { 0% { right: 70px; } 100% { right: -10px; } } .key2 { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .key2:after { content: ""; background: #90EE90; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%; opacity: 0; transition: all 0.8s; } .key2:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s; } .bor-none { border: none; } button:focus { outline: none; } .taiqiu1 { height: 100px; width: 100px; background: #FFEB3B; transform: rotateZ(15deg); box-shadow: 0px 10px 20px; border-radius: 50%; font-size: 2em; left: 356px; position: absolute; animation: taiqiu1 1s infinite; transform-origin: 50% 50%; } .taiqiu2 { height: 100px; width: 100px; background: #3A0992; transform: rotateZ(15deg); box-shadow: 0px 12px 20px; border-radius: 50%; font-size: 2em; position: absolute; animation: taiqiu2 0.9s infinite; left: 297px; top: 93px; } .taiqiu3 { height: 100px; width: 100px; background: rgba(233, 30, 99, 0.9); transform: rotateZ(15deg); box-shadow: 0px 14px 20px; border-radius: 50%; font-size: 2em; left: 400px; position: absolute; top: 90px; animation: taiqiu3 0.9s infinite; } .taiqiu4 { height: 100px; width: 100px; background: #673AB7; transform: rotateZ(15deg); box-shadow: 0px 16px 20px 0px; border-radius: 50%; font-size: 2em; position: absolute; left: 245px; top: 170px; animation: taiqiu4 0.9s infinite; } .taiqiu5 { height: 100px; width: 100px; background: #EF4C1E; transform: rotateZ(15deg); box-shadow: 0px 18px 20px; border-radius: 50%; font-size: 2em; position: absolute; left: 349px; top: 169px; animation: taiqiu5 0.9s infinite; } .taiqiu6 { height: 100px; width: 100px; background: #326F34; transform: rotateZ(15deg); box-shadow: 0px 10px 20px; border-radius: 50%; font-size: 2em; position: absolute; left: 452px; top: 171px; animation: taiqiu6 0.9s infinite; } .taiqiu7 { height: 100px; width: 100px; background: #945063; transform: rotateZ(15deg); box-shadow: 0px 20px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 239px; left: 198px; animation: taiqiu7 0.9s infinite; } .taiqiu8 { height: 100px; width: 100px; background: #181819; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; left: 306px; top: 250px; animation: taiqiu8 0.9s infinite; } .taiqiu9 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 251px; left: 411px; animation: taiqiu9 0.9s infinite; } .taiqiu10 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 251px; left: 515px; animation: taiqiu10 0.9s infinite; } .taiqiu11 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 320px; left: 146px; animation: taiqiu11 0.9s infinite; } .taiqiu12 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 320px; left: 254px; animation: taiqiu12 0.9s infinite; } .taiqiu13 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 320px; left: 361px; animation: taiqiu13 0.9s infinite; } .taiqiu14 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; animation: taiqiu14 0.9s infinite; top: 320px; left: 470px; } .taiqiu15 { height: 100px; width: 100px; background: #fff; transform: rotateZ(15deg); box-shadow: 0px 22px 20px; border-radius: 50%; font-size: 2em; position: absolute; top: 320px; left: 578px; animation: taiqiu15 1s infinite; } .padding { background: #fff; height: 40px; width: 40px; border-radius: 50%; position: relative; left: 10px; } .bg-E8D31B { background: #E8D31B; } .bg-0473CC { background: #0473CC; } .bg-E61800 { background: #E61800; } .bg-5D0C1A { background: #5D0C1A; } .bg-FBA100 { background: #FBA100; } .bg-1B524A { background: #1B524A; } .bg-38046B { background: #38046B; } .ban-padding { height: 100px; width: 60px; line-height: 80px; border-radius: 37% 41% 34% 41%; position: relative; left: 14px; top: -2px; color: #fff; } @keyframes toleft { from { transform: rotate(0deg); } 50% { transform: rotate(180deg); } to { transform: rotate(360deg); } } @keyframes taiqiu1 { 0% { left: 30px; } 100% { left: 356px; transform: rotate(360deg); } } @keyframes taiqiu2 { 0% { left: 30px; } 100% { left: 297px; transform: rotate(360deg); } } @keyframes taiqiu3 { 0% { left: 30px; } 100% { left: 400px; transform: rotate(360deg); } } @keyframes taiqiu4 { 0% { left: 30px; } 100% { left: 245px; transform: rotate(360deg); } } @keyframes taiqiu5 { 0% { left: 30px; } 100% { left: 349px; transform: rotate(360deg); } } @keyframes taiqiu6 { 0% { left: 30px; } 100% { left: 452px; transform: rotate(360deg); } } @keyframes taiqiu7 { 0% { left: 30px; } 100% { /* left: 239px;*/ transform: rotate(360deg); } } @keyframes taiqiu8 { 0% { left: 30px; } 100% { left: 306px; transform: rotate(360deg); } } @keyframes taiqiu9 { 0% { left: 30px; } 100% { left: 411px; transform: rotate(360deg); } } @keyframes taiqiu10 { 0% { left: 30px; } 100% { left: 515px; transform: rotate(360deg); } } @keyframes taiqiu11 { 0% { left: 30px; } 100% { left: 146px; transform: rotate(360deg); } } @keyframes taiqiu12 { 0% { left: 30px; } 100% { left: 254px; transform: rotate(360deg); } } @keyframes taiqiu13 { 0% { left: 30px; } 100% { left: 361px; transform: rotate(360deg); } } @keyframes taiqiu14 { 0% { left: 30px; } 100% { left: 470px; transform: rotate(360deg); } } @keyframes taiqiu15 { 0% { left: 30px; } 100% { left: 578px; transform: rotate(360deg); } } </style> </head> <body> <div> <button class="taiqiu1 bor-none"><div class="padding">1</div></button> <button class="taiqiu2 bor-none"><div class="padding">2</div></button> <button class="taiqiu3 bor-none"><div class="padding">3</div></button> <button class="taiqiu4 bor-none"><div class="padding">4</div></button> <button class="taiqiu5 bor-none"><div class="padding">5</div></button> <button class="taiqiu6 bor-none"><div class="padding">6</div></button> <button class="taiqiu7 bor-none"><div class="padding">7</div></button> <button class="taiqiu8 bor-none"><div class="padding">8</div></button> <button class="taiqiu9 bor-none"><div class="ban-padding bg-E8D31B">9</div></button> <button class="taiqiu10 bor-none"><div class="ban-padding bg-0473CC">10</div></button> <button class="taiqiu11 bor-none"><div class="ban-padding bg-E61800">11</div></button> <button class="taiqiu12 bor-none"><div class="ban-padding bg-5D0C1A">12</div></button> <button class="taiqiu13 bor-none"><div class="ban-padding bg-FBA100">13</div></button> <button class="taiqiu14 bor-none"><div class="ban-padding bg-1B524A">14</div></button> <button class="taiqiu15 bor-none"><div class="ban-padding bg-38046B">15</div></button> </div> </body> </html>
相關文章
- css3實現的立體滾動效果CSSS3
- CSS3實現的圓球放大縮小效果CSSS3
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- CSS3實現的div塊上下左右翻滾效果CSSS3
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- css3實現的紅心跳動效果CSSS3
- js實現的模擬滾動條效果JS
- 使用UICollectionView實現首頁的滾動效果UIView
- 影像平滑滾動效果的VC實現 (轉)
- 前端實現文字滾動效果前端
- css3實現網狀球體效果程式碼例項CSSS3
- CSS3滾動條效果程式碼CSSS3
- css3水平無縫滾動效果CSSS3
- css實現視差滾動效果CSS
- 實現隨著滾動條滾動,導航會自動切換的效果
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- 一個簡單的滾動數字的效果實現
- CSS3 實現兩端擺動的小球效果CSSS3
- 報表中怎樣實現滾動的公告效果
- unity 實現輪盤方式的按鈕滾動效果Unity
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- 巢狀滾動效果實現討論巢狀
- Delphi中TFlowPanel實現滾動條效果
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- 原生javascript實現的水平圖片無縫滾動效果JavaScript
- OverScroll彈性滾動和慣性滾動效果的實現原理——CoordinatorLayout+Behavior
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- css3實現的矩形切角效果CSSS3
- 使用純 CSS 實現滾動陰影效果CSS
- CSS實現兩個球相交的粘粘效果CSS
- 滑鼠雙擊頁面實現自動滾動效果
- css3實現的動態大白效果程式碼例項CSSS3
- 微信小程式功能之全屏滾動效果的實現程式碼微信小程式
- One Page Scroll – 實現蘋果風格的單頁滾動效果蘋果
- three.js實現的3D球狀拖動旋轉效果JS3D
- css3實現的旋轉的陀螺效果CSSS3
- CSS3滾動視差效果的製作技巧CSSS3