搜索到
19
篇与
html5
的结果
-
JavaScript执行document.write()原有控件消失 JavaScript执行document.write()原有控件消失{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/56-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <meta charset="utf8"> <body> <input type="button" value="点我" onclick="document.write('按钮消失')" style="position: absolute;width: 200px;height: 100px;left: 0;right: 0;top: 0;bottom: 0;;margin: auto;"> </body> </html>document.write()执行时，将重写当前页面，原有内容全部消失，只会留下document.write()所写内容 -
htm5+css3绘制立体面环形旋转 htm5+css3绘制立体面环形旋转{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/48-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>立体布局</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; border: 0; } /* 加入远近关系，使画面更真实，防止两边旋转90度面不显示 */ body{ perspective: 1000px; } .box{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform-style: preserve-3d; transform: rotate3d(1, 0, 0, -30deg); transform-style: preserve-3d; animation: donghua 5s 0.2s linear infinite; /* 加入远近关系之后，增加距离顶部高度 */ margin-top: 200px; } @keyframes donghua { 0% { transform: rotateX(0); } 100% { transform: rotateX(360deg); } } .box div{ width: 100px; height: 200px; font-size: 5em; text-align: center; position: absolute; line-height: 200px; } .box div:nth-child(1){ border: 10px solid red; } .box div:nth-child(2){ background-color: rgb(255, 238, 0); transform: translateZ(200px); } .box div:nth-child(3){ background-color: rgb(255, 187, 0); transform: translateZ(-200px); } .box div:nth-child(4){ background-color: rgb(60, 255, 0); transform: translateZ(175px) translateX(100px) rotateY(30deg); } .box div:nth-child(5){ background-color: rgb(60, 134, 85); transform: translateZ(100px) translateX(175px) rotateY(60deg); } .box div:nth-child(6){ background-color: rgb(0, 255, 234); transform: translateX(200px) rotateY(90deg); } .box div:nth-child(7){ background-color: rgb(0, 204, 255); transform: translateX(-200px) rotateY(90deg); } .box div:nth-child(8){ background-color: rgb(0, 110, 255); transform: translateZ(175px) translateX(-100px) rotateY(-30deg); } .box div:nth-child(9){ background-color: rgb(111, 0, 255); transform: translateZ(100px) translateX(-175px) rotateY(-60deg); } .box div:nth-child(10){ background-color: rgb(255, 0, 200); transform: translateZ(-175px) translateX(-100px) rotateY(30deg); } .box div:nth-child(11){ background-color: rgb(255, 0, 98); transform: translateZ(-175px) translateX(100px) rotateY(-30deg); } .box div:nth-child(12){ background-color: rgb(0, 225, 255); transform: translateZ(-100px) translateX(-175px) rotateY(60deg); } .box div:nth-child(13){ background-color: rgb(43, 37, 4); transform: translateZ(-100px) translateX(175px) rotateY(-60deg); } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
-
html5+css3绘制嵌套展开旋转立方体 html5+css3绘制嵌套展开旋转立方体{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/28-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>嵌套展开旋转立方体</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; border: 0; } .warp { width: 200px; height: 200px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; transform: rotate3d(1, 1, 0, -30deg); transform-style: preserve-3d; animation: donghua 5s 0.2s linear infinite; /* 旋转动画 */ } /* 旋转动画 */ @keyframes donghua { 0% { transform: rotateY(0) rotateX(30deg); } 100% { transform: rotateY(360deg) rotateX(30deg); } } .warp1 { width: 100px; height: 100px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; transform: rotate3d(1, 1, 0, 0); transform-style: preserve-3d; } .warp .box { width: 200px; height: 200px; font-size: 250px; text-align: center; position: absolute; line-height: 200px; } .warp1 .box { width: 100px; height: 100px; font-size: 125px; text-align: center; position: absolute; line-height: 100px; } .warp .box:nth-child(1) { background: rgba(255, 0, 0, 0.6); transform: translateZ(100px); } .warp .box:nth-child(2) { background: rgba(0, 255, 0, 0.6); transform: translateZ(-100px) rotateY(180deg); } .warp .box:nth-child(3) { background: rgba(0, 0, 255, 0.6); transform: translateX(-100px) rotateY(-90deg); } .warp .box:nth-child(4) { background: rgba(255, 255, 0, 0.6); transform: translateX(100px) rotateY(90deg); } .warp .box:nth-child(5) { background: rgba(255, 100, 100, 0.6); transform: translateY(-100px) rotateX(90deg); } .warp .box:nth-child(6) { background: rgba(255, 0, 255, 0.6); transform: translateY(100px) rotateX(-90deg); } .warp1 .box:nth-child(1) { background: rgba(220, 20, 60, 1); transform: translateZ(50px); } .warp1 .box:nth-child(2) { background: rgba(220, 20, 60, 1); transform: translateZ(-50px) rotateY(180deg); } .warp1 .box:nth-child(3) { background: rgba(220, 20, 60, 1); transform: translateX(-50px) rotateY(-90deg); } .warp1 .box:nth-child(4) { background: rgba(220, 20, 60, 1); transform: translateX(50px) rotateY(90deg); } .warp1 .box:nth-child(5) { background: rgba(220, 20, 60, 1); transform: translateY(-50px) rotateX(90deg); } .warp1 .box:nth-child(6) { background: rgba(220, 20, 60, 1); transform: translateY(50px) rotateX(-90deg); } .warp:hover > div:nth-child(1) { animation: donghua1 5s linear infinite; } .warp:hover > div:nth-child(2) { animation: donghua2 5s linear infinite; } .warp:hover > div:nth-child(3) { animation: donghua3 5s linear infinite; } .warp:hover > div:nth-child(4) { animation: donghua4 5s linear infinite; } .warp:hover > div:nth-child(5) { animation: donghua5 5s linear infinite; } .warp:hover > div:nth-child(6) { animation: donghua6 5s linear infinite; } @keyframes donghua1 { 0% { transform: rotateZ(0) translateZ(200px); } 100% { transform: rotateZ(360deg) translateZ(200px); } } @keyframes donghua2 { 0% { transform: rotateZ(0) translateZ(-200px) rotateY(180deg); } 100% { transform: rotateZ(360deg) translateZ(-200px) rotateY(180deg); } } @keyframes donghua3 { 0% { transform: rotateX(0) translateX(-200px) rotateY(-90deg); } 100% { transform: rotateX(360deg) translateX(-200px) rotateY(-90deg); } } @keyframes donghua4 { 0% { transform: rotateX(0) translateX(200px) rotateY(90deg); } 100% { transform: rotateX(360deg) translateX(200px) rotateY(90deg); } } @keyframes donghua5 { 0% { transform: rotateY(0) translateY(-200px) rotateX(90deg); } 100% { transform: rotateY(360deg) translateY(-200px) rotateX(90deg); } } @keyframes donghua6 { 0% { transform: rotateY(0) translateY(200px) rotateX(-90deg); } 100% { transform: rotateY(360deg) translateY(200px) rotateX(-90deg); } } </style> </head> <body> <div class="warp"> <div class="box">⚀</div> <div class="box">⚁</div> <div class="box">⚂</div> <div class="box">⚃</div> <div class="box">⚄</div> <div class="box">⚅</div> <div class="warp1"> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> <div class="box">☯</div> </div> </div> </body> </html>
-
html5+css3绘制旋转立方体 html5+css3绘制旋转立方体{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/26-1.html" type="secondary" content="预览"/}<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>立方体</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; border: 0; } .warp { width: 200px; height: 200px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; position: absolute; transform: rotate3d(1, 1, 0, -30deg); transform-style: preserve-3d; animation: donghua 5s 0.2s linear infinite; } @keyframes donghua { 0% { transform: rotateY(0) rotateX(30deg); } 100% { transform: rotateY(360deg) rotateX(30deg); } } .warp div { width: 200px; height: 200px; font-size: 250px; text-align: center; position: absolute; line-height: 200px; } .warp div:nth-child(1) { background: rgba(255, 0, 0, 0.6); transform: translateZ(100px); } .warp div:nth-child(2) { background: rgba(0, 255, 0, 0.6); transform: translateZ(-100px) rotateY(180deg); } .warp div:nth-child(3) { background: rgba(0, 0, 255, 0.6); transform: translateX(-100px) rotateY(-90deg); } .warp div:nth-child(4) { background: rgba(255, 255, 0, 0.6); transform: translateX(100px) rotateY(90deg); } .warp div:nth-child(5) { background: rgba(255, 100, 100, 0.6); transform: translateY(-100px) rotateX(90deg); } .warp div:nth-child(6) { background: rgba(255, 0, 255, 0.6); transform: translateY(100px) rotateX(-90deg); } </style> </head> <body> <div class="warp"> <div>⚀</div> <div>⚁</div> <div>⚂</div> <div>⚃</div> <div>⚄</div> <div>⚅</div> </div> </body> </html>
