adobe dreamweaver
新建html文档。
书写hmtl代码。
书写css代码。body { background: #7FA3C7; font-family: 'Chewy', cursive; text-align: center; font-size: 50px; color: white; overflow: hidden; }#ping { position: absolute; top: 30px; left: -80px; opacity: 0; animation: animPing 2s linear infinite; }#pong { position: absolute; top: 30px; right: -90px; opacity: 0; animation: animPing 2s 1s linear infinite; }@keyframes animPing { 0% { opacity: 0.8;} 35%, 100% { opacity: 0;}}#pingpong { margin: 0 auto; margin-top: 100px; position: relative; width: 380px; height: 150px; }#table { position: absolute; top: 30px; left: 0px; border-bottom: 80px solid #fff; border-left: 80px solid transparent; border-right: 80px solid transparent; height: 0; width: 220px; }#table:before { display: block; content: ' '; position: absolute; top: 1px; left: -78px; border-bottom: 78px solid #2E4E80; border-left: 78px solid transparent; border-right: 78px solid transparent; height: 0; width: 220px; }#table:after { display: block; content: ' '; position: absolute; top: 80px; left: -80px; height: 20px; width: 380px; background: #192A44; }#line { position: absolute; width: 280px; top: 30px; left: -30px; border-bottom: solid 1px white; }#net-top { position: absolute; top: -25px; margin-left: 106px; margin-right: 106px; width: 8px; height: 25px; background: #333; }#net-top:before { display: block; content: ' '; position: absolute; top: -3px; width: 4px; border-left: solid 2px transparent; border-right: solid 2px transparent; border-bottom: solid 3px rgb(115, 115, 115); }#net-middle { position: absolute; top: -20px; left: 109px; width: 2px; height: 80px; background: white; }#net-bottom { position: absolute; top: 65px; left: 104px; width: 12px; height: 43px; background: #333; z-index: 1; }#net-bottom:before { display: block; content: ' '; position: absolute; top: -8px; width: 10px; border-left: solid 1px transparent; border-right: solid 1px transparent; border-bottom: solid 8px rgb(115, 115, 115); }#net-shadow { position: absolute; left: 111px; border-bottom: 80px solid rgba(0, 0, 0, 0.2); border-right: 30px solid transparent; height: 0; width: 20px; }#c1, #c2 { position: absolute; width: 300px; height: 300px; }#c3, #c4 { position: absolute; width: 150px; height: 150px; }#c1 { top: 0; left: 0; animation: rotateC1 2s linear infinite; }#c2 { top: 0; left: 80px; animation: rotateC2 2s linear infinite; }#c3 { top: 40px; left: -10px; animation: rotateC3 2s linear infinite; }#c4 { top: 40px; right: -10px; animation: rotateC4 2s linear infinite; }
书写css3代码。@keyframes rotateC1 { 0% { opacity: 1; transform: rotate(-44deg);} 35% { opacity: 1; transform: rotate(52deg);} 36%, 100% { opacity: 0;}}@keyframes rotateC2 { 0%, 49% { opacity: 0;} 50% { opacity: 1; transform: rotate(44deg);} 85% { opacity: 1; transform: rotate(-52deg);} 86%, 100% { opacity: 0;}}@keyframes rotateC3 { 0%, 84% { opacity: 0;} 85% { opacity: 1; transform: rotate(39deg);} 100% { opacity: 1; transform: rotate(-15deg);}}@keyframes rotateC4 { 0%, 34% { opacity: 0;} 35% { opacity: 1; transform: rotate(-39deg);} 50% { opacity: 1; transform: rotate(15deg);} 51%, 100% { opacity: 0;}}#b1, #b2, #b3, #b4 { position: absolute; width: 10px; height: 10px; background: white; border-radius: 10px; }#b1, #b2 { top: -5px; left: 145px; }#b3, #b4 { top: -5px; left: 70px; }
代码整体结构。
查看效果。