{"id":9867,"student_id":1486,"content":"{\"html\":\"\u003cdiv class=\\\"container\\\"\u003e\\n \u003cdiv class=\\\"subcontainer\\\"\u003e\\n \u003cdiv class=\\\"half\\\"\u003e\\n \u003cdiv class=\\\"droplet\\\"\u003e\u003c/div\u003e\\n \u003cdiv class=\\\"splah\\\"\u003e\\n \u003cdiv class=\\\"splash-container\\\"\u003e\\n \u003cdiv class=\\\"circle\\\"\u003e\u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003cdiv class=\\\"half\\\"\u003e\\n \u003cdiv class=\\\"droplet\\\"\u003e\u003c/div\u003e\\n \u003cdiv class=\\\"splah\\\"\u003e\\n \u003cdiv class=\\\"splash-container\\\"\u003e\\n \u003cdiv class=\\\"circle\\\"\u003e\u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n\u003c/div\u003e\",\"css\":\"@keyframes up {\\n\\t0% {\\n\\t\\ttop: -135px;\\n\\t}\\n\\n\\t100% {\\n\\t\\ttop: 135px;\\n\\t}\\n}\\n\\n@keyframes down {\\n\\t0% {\\n\\t\\tbottom: 135px;\\n\\t}\\n\\n\\t100% {\\n\\t\\tbottom: -135px;\\n\\t}\\n}\\n\\n@keyframes rotate {\\n\\tfrom {\\n\\t\\ttransform: rotate(0);\\n\\t}\\n\\n\\tto {\\n\\t\\ttransform: rotate(360deg);\\n\\t}\\n}\\n\\n@keyframes jump {\\n\\t0% {\\n\\t\\tbottom: -30px;\\n\\t}\\n\\n\\t50% {\\n\\t\\tbottom: -30px;\\n\\t}\\n\\n\\t100% {\\n\\t\\tbottom: 135px;\\n\\t}\\n}\\n\\n@keyframes fade {\\n\\t0% {\\n\\t\\topacity: 0;\\n\\t}\\n\\n\\t50% {\\n\\t\\topacity: 0;\\n\\t}\\n\\n\\t51% {\\n\\t\\topacity: 1;\\n\\t}\\n\\n\\t100% {\\n\\t\\topacity: 1;\\n\\t}\\n}\\n\\n@keyframes spin1 {\\n\\t0% {\\n\\t\\ttransform: rotate(0);\\n\\t}\\n\\n\\t75% {\\n\\t\\ttransform: rotate(0);\\n\\t}\\n\\n\\t100% {\\n\\t\\ttransform: rotate(360deg);\\n\\t}\\n}\\n\\n@keyframes spin2 {\\n\\t0% {\\n\\t\\ttransform: rotate(0);\\n\\t}\\n\\n\\t75% {\\n\\t\\ttransform: rotate(0);\\n\\t}\\n\\n\\t100% {\\n\\t\\ttransform: rotate(-360deg);\\n\\t}\\n}\\n\\n@keyframes dolphin {\\n\\t0% {\\n\\t\\ttransform: rotate(45deg);\\n\\t}\\n\\n\\t75% {\\n\\t\\ttransform: rotate(45deg);\\n\\t}\\n\\n\\t100% {\\n\\t\\ttransform: rotate(-70deg);\\n\\t}\\n}\\n\\n@keyframes splash {\\n\\t0% {\\n\\t\\ttransform: scale(1, 0);\\n\\t}\\n\\n\\t75% {\\n\\t\\ttransform: scale(1, 0);\\n\\t}\\n\\n\\t100% {\\n\\t\\ttransform: scale(1, 1);\\n\\t}\\n}\\n\\n@keyframes slide1 {\\n\\t0% {\\n\\t\\ttransform: translate(0);\\n\\t}\\n\\n\\t52% {\\n\\t\\ttransform: translate(0);\\n\\t}\\n\\n\\t100% {\\n\\t\\ttransform: translate(-75px);\\n\\t}\\n}\\n\\n@keyframes slide2 {\\n\\t0% {\\n\\t\\ttransform: translate(0);\\n\\t}\\n\\n\\t52% {\\n\\t\\ttransform: translate(0);\\n\\t}\\n\\n\\t100% {\\n\\t\\ttransform: translate(75px);\\n\\t}\\n}\\n\\nbody, html {\\n\\twidth: 100%;\\n\\theight: 100%;\\n}\\n\\nbody {\\n\\tmargin: 0;\\n}\\n\\n.container {\\n\\toverflow: hidden;\\n\\tposition: relative;\\n\\twidth: 600px;\\n\\theight: 300px;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\tmargin-left: -300px;\\n\\tmargin-top: -150px;\\n}\\n\\n.container .subcontainer {\\n\\tposition: absolute;\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\tanimation: rotate 4s linear infinite;\\n}\\n\\n.container .subcontainer *, .container .subcontainer *:before, .container .subcontainer *:after {\\n\\tposition: absolute;\\n\\tcontent: \\\"\\\";\\n\\tdisplay: block;\\n}\\n\\n.container .subcontainer .half {\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\toverflow: hidden;\\n}\\n\\n.container .subcontainer .half .splash {\\n\\theight: 60px;\\n\\twidth: 150px;\\n\\tbottom: 0;\\n\\tmargin-bottom: -3px;\\n\\tleft: 50%;\\n\\tmargin-left: -75px;\\n\\toverflow: hidden;\\n}\\n\\n.container .subcontainer .half .splash .splash-container {\\n\\theight: 100%;\\n\\twidth: 100%;\\n\\ttransform-origin: bottom center;\\n}\\n\\n.container .subcontainer .half .splash .splash-container .circle {\\n\\tleft: 50%;\\n\\ttop: 30%;\\n\\twidth: 27.27273px;\\n\\theight: 27.27273px;\\n\\tmargin-top: -13.63636px;\\n\\tmargin-left: -13.63636px;\\n\\tborder-radius: 50%;\\n}\\n\\n.container .subcontainer .half .splash .splash-container:before, .container .subcontainer .half .splash .splash-container:after {\\n\\theight: 70%;\\n\\twidth: 50%;\\n}\\n\\n.container .subcontainer .half .splash .splash-container:before {\\n\\tleft: 0;\\n\\tbottom: 0;\\n\\tborder-bottom-right-radius: 100%;\\n\\tmargin-left: -13.63636px;\\n}\\n\\n.container .subcontainer .half .splash .splash-container:after {\\n\\tright: 0;\\n\\tbottom: 0;\\n\\tborder-bottom-left-radius: 100%;\\n\\tmargin-right: -13.63636px;\\n}\\n\\n.container .subcontainer .half .droplet {\\n\\twidth: 30px;\\n\\theight: 30px;\\n\\tleft: 50%;\\n\\tmargin-left: -15px;\\n}\\n\\n.container .subcontainer .half .droplet:before, .container .subcontainer .half .droplet:after {\\n\\tbackground-size: 100% 100%;\\n}\\n\\n.container .subcontainer .half:nth-child(1) {\\n\\tbox-shadow: 0 -150px 0 150px #42e2f4;\\n\\tbackground-color: #42e2f4;\\n\\tmargin-top: -25%;\\n\\tanimation: up 1s infinite alternate ease-in-out;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .splash {\\n\\tanimation: slide1 1s infinite linear;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .splash .splash-container {\\n\\tanimation: splash 1s infinite -.25s alternate;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .splash .splash-container .circle {\\n\\tbackground-color: #eeeeee;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .splash .splash-container:before, .container .subcontainer .half:nth-child(1) .splash .splash-container:after {\\n\\tbox-shadow: 0 29.27273px 0 27.27273px #eeeeee;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .droplet {\\n\\tanimation: jump 1s infinite alternate;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .droplet:before, .container .subcontainer .half:nth-child(1) .droplet:after {\\n\\theight: 100%;\\n\\twidth: 100%;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .droplet:before {\\n\\tborder-radius: 50%;\\n\\tbackground-color: #eeeeee;\\n\\tanimation: fade 4s infinite;\\n}\\n\\n.container .subcontainer .half:nth-child(1) .droplet:after {\\n\\tbackground-image: url(\\\"data:image/svg+xml;utf8,\u003csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'\u003e\u003cpath fill='#eeeeee' d='M0,10L5,0L10,10Z'/\u003e\u003c/svg\u003e\\\");\\n\\tanimation: fade 4s infinite -2s, spin1 4s infinite -2.5s linear;\\n}\\n\\n.container .subcontainer .half:nth-child(2) {\\n\\tbox-shadow: 0 -150px 0 150px #eeeeee;\\n\\tbottom: 0;\\n\\tmargin-bottom: -25%;\\n\\tbackground-color: #eeeeee;\\n\\ttransform: rotate(180deg);\\n\\tanimation: down 1s infinite alternate ease-in-out;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .splash {\\n\\tanimation: slide2 1s infinite -1s linear;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .splash .splash-container {\\n\\tanimation: splash 1s infinite -1.25s alternate;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .splash .splash-container .circle {\\n\\tbackground-color: #42e2f4;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .splash .splash-container:before, .container .subcontainer .half:nth-child(2) .splash .splash-container:after {\\n\\tbox-shadow: 0 29.27273px 0 27.27273px #42e2f4;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .droplet {\\n\\tanimation: jump 1s infinite -1s alternate;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .droplet:before {\\n\\theight: 200%;\\n\\twidth: 200%;\\n\\tleft: -50%;\\n\\tbackground-image: url(\\\"https://koding.school/project_assets/ce58bb1ea535016e7546963bd1e607d1.svg\\\");\\n\\tanimation: fade 4s infinite -1s, dolphin 4s infinite -1.5s ease-in-out;\\n}\\n\\n.container .subcontainer .half:nth-child(2) .droplet:after {\\n\\theight: 100%;\\n\\twidth: 100%;\\n\\tbackground-color: #42e2f4;\\n\\tanimation: fade 4s infinite -3s, spin2 4s infinite -3.5s linear;\\n}\",\"js\":\"\"}","created_at":"2017-08-25T11:58:48.861+08:00","updated_at":"2020-03-21T13:03:30.724+08:00","name":"叩叮跳水","language":"web","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/9867/4768fad9b18a67fe6ff586b23bdc0ebc.jpg"},"parent_id":null,"plugin":null,"description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":450,"hashid":"4y3sggwn","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}
[]
橘蘋學習平台
橘蘋學習平台
我的作品
檢視專案頁
匯出
複製
匯入
刪除
下載 Android APP (APK)
截圖
前往網站頁面
1:1:1
1:1
full
用手機掃描下方 QRCode 進行安裝
或您也可以
下載 APK
到這台電腦
用手機掃描下方 QRCode 進行安裝
或您也可以
下載 APK
到這台電腦