純CSS3實現3D跳動小球
阿新 • • 發佈：2019-01-18
1 <!--[if IE]><style>.main-keleyi-com{display:none;}#ballWrapper_keleyi_com{display:none;}</style><![endif]--> 2 <style type="text/css">/* 程式碼整理：柯樂義 keleyi.com */ 3 * { 4 margin:0; 5 padding:0; 6 } 7 #ballWrapper_keleyi_com { 8 width: 140px; 9 height:300px; 10 position: fixed; 11 left: 50%; 12 top: 35%; 13 margin-left: -70px; 14 z-index: 100; 15 -webkit-transform: scale(1); 16 -moz-transform: scale(1); 17 -ms-transform: scale(1); 18 -o-transform: scale(1); 19 transform: scale(1); 20 -webkit-transition: all 5s linear 0s; 21 -moz-transition: all 5s linear 0s; 22 transition: all 5s linear 0s; 23 cursor: pointer; 24 } 25 #ballWrapper_keleyi_com:active { 26 -webkit-transform: scale(0); 27 -moz-transform: scale(0); 28 -ms-transform: scale(0); 29 -o-transform: scale(0); 30 transform: scale(0); 31 cursor: pointer; 32 } 33 #ball{ 34 width: 140px; 35 height: 140px; 36 border-radius: 70px; 37 background: rgb(187,187,187); 38 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 39 background: -moz-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 40 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(187, 187, 187, 1)), color-stop(99%, rgba(119, 119, 119, 1))); 41 background: -webkit-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 42 background: -o-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 43 background: -ms-linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 44 background: linear-gradient(top, rgba(187, 187, 187, 1) 0%, rgba(119, 119, 119, 1) 99%); 45 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777', GradientType=0 ); 46 box-shadow: inset 0 -5px 15px rgba(255, 255, 255, 0.4), inset -2px -1px 40px rgba(0, 0, 0, 0.4), 0 0 1px #000; 47 position: absolute; 48 top: 0; 49 z-index: 11; 50 -webkit-animation: jump 1s infinite; 51 -moz-animation: jump 1s infinite; 52 -o-animation: jump 1s infinite; 53 -ms-animation: jump 1s infinite; 54 animation: jump 1s infinite; 55 cursor: pointer; 56 }/* 程式碼整理：柯 樂 義 k e l e y i.com */ 57 #ball::after { 58 content: ""; 59 width: 80px; 60 height: 40px; 61 position: absolute; 62 left: 30px; 63 top: 10px; 64 z-index: 10; 65 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 66 background: -moz-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 67 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(232, 232, 232, 1)), color-stop(1%, rgba(232, 232, 232, 1)), color-stop(100%, rgba(255, 255, 255, 0))); 68 background: -webkit-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 69 background: -o-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 70 background: -ms-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 71 background: linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%); 72 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff', GradientType=0 ); 73 border-radius: 40px / 20px; 74 } 75 #ballShadow { 76 position: absolute; 77 left: 50%; 78 bottom: 0; 79 z-index: 10; 80 margin-left: -30px; 81 width: 60px; 82 height: 75px; 83 background: rgba(20, 20, 20, .1); 84 box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1); 85 border-radius: 30px / 40px; 86 -webkit-transform: scaleY(.3); 87 -moz-transform: scaleY(.3); 88 -ms-transform: scaleY(.3); 89 -o-transform: scaleY(.3); 90 transform: scaleY(.3); 91 -webkit-animation: shrink 1s infinite; 92 -moz-animation: shrink 1s infinite; 93 -o-animation: shrink 1s infinite; 94 -ms-animation: shrink 1s infinite; 95 animation: shrink 1s infinite; 96 } 97 98 /* Animations */ 99 100 @-webkit-keyframes jump { 101 0% { 102 top: 0; 103 -webkit-animation-timing-function: ease-in; 104 } 105 40% { 106 } 107 50% { 108 top: 140px; 109 height: 140px; 110 -webkit-animation-timing-function: ease-out; 111 } 112 55% { 113 top: 160px; 114 height: 120px; 115 border-radius: 70px / 60px; 116 -webkit-animation-timing-function: ease-in; 117 } 118 65% { 119 top: 120px; 120 height: 140px; 121 border-radius: 70px; 122 -webkit-animation-timing-function: ease-out; 123 } 124 95% { 125 top: 0; 126 -webkit-animation-timing-function: ease-in; 127 } 128 100% { 129 top: 0; 130 -webkit-animation-timing-function: ease-in; 131 } 132 } 133 @-moz-keyframes jump { 134 0% { 135 top: 0; 136 -moz-animation-timing-function: ease-in; 137 } 138 40% { 139 } 140 50% { 141 top: 140px; 142 height: 140px; 143 -moz-animation-timing-function: ease-out; 144 } 145 55% { 146 top: 160px; 147 height: 120px; 148 border-radius: 70px / 60px; 149 -moz-animation-timing-function: ease-in; 150 } 151 65% { 152 top: 120px; 153 height: 140px; 154 border-radius: 70px; 155 -moz-animation-timing-function: ease-out; 156 } 157 95% { 158 top: 0; 159 -moz-animation-timing-function: ease-in; 160 } 161 100% { 162 top: 0; 163 -moz-animation-timing-function: ease-in; 164 } 165 } 166 @-o-keyframes jump { 167 0% { 168 top: 0; 169 -o-animation-timing-function: ease-in; 170 } 171 40% { 172 } 173 50% { 174 top: 140px; 175 height: 140px; 176 -o-animation-timing-function: ease-out; 177 } 178 55% { 179 top: 160px; 180 height: 120px; 181 border-radius: 70px / 60px; 182 -o-animation-timing-function: ease-in; 183 } 184 65% { 185 top: 120px; 186 height: 140px; 187 border-radius: 70px; 188 -o-animation-timing-function: ease-out; 189 } 190 95% { 191 top: 0; 192 -o-animation-timing-function: ease-in; 193 } 194 100% { 195 top: 0; 196 -o-animation-timing-function: ease-in; 197 } 198 } 199 @-ms-keyframes jump { 200 0% { 201 top: 0; 202 -ms-animation-timing-function: ease-in; 203 } 204 40% { 205 } 206 50% { 207 top: 140px; 208 height: 140px; 209 -ms-animation-timing-function: ease-out; 210 } 211 55% { 212 top: 160px; 213 height: 120px; 214 border-radius: 70px / 60px; 215 -ms-animation-timing-function: ease-in; 216 } 217 65% { 218 top: 120px; 219 height: 140px; 220 border-radius: 70px; 221 -ms-animation-timing-function: ease-out; 222 } 223 95% { 224 top: 0; 225 -ms-animation-timing-function: ease-in; 226 } 227 100% { 228 top: 0; 229 -ms-animation-timing-function: ease-in; 230 } 231 } 232 @keyframes jump { 233 0% { 234 top: 0; 235 animation-timing-function: ease-in; 236 } 237 50% { 238 top: 140px; 239 height: 140px; 240 animation-timing-function: ease-out; 241 } 242 55%