用CSS3怎样实现NES游戏机的动画效果?
发布时间：2021-12-31 13:53:22 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是用CSS实现NES游戏机的动画效果的内容。对大家学习CSS3使用有一定的帮助，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。 实现效果 实现代码 html input type=radio name=nes-size id=si
|
这篇文章给大家分享的是用CSS实现NES游戏机的动画效果的内容。对大家学习CSS3使用有一定的帮助，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。 实现效果 实现代码 html <input type="radio" name="nes-size" id="size1"> <label for="size1" class="size1" ></label> <input type="radio" name="nes-size" id="size2"> <label for="size2" class="size2"></label> <input type="radio" name="nes-size" id="size3" checked> <label for="size3" class="size3"></label> <input type="radio" name="nes-size" id="size4"> <label for="size4" class="size4"></label> <div id="nes"> <div class="nes-top"> <div class="lid"> <h1>Nintendo</h1> <h2>ENTERTAINMENT SYSTEM</h2> </div> <div class="cartridge-slot"> <div class="cartridge-slot-border"> </div> <div class="cartridge-slot-hole"></div> </div> </div> <div class="nes-bottom"> <div class="power-box"> <input type="checkbox" id="power" /> <div class="reset"></div> <label for="power" class="power"></label> <div class="light"></div> </div> </div> <div class="gamepads-slots"> <div class="gamepad-slot p1"></div> <div class="gamepad-slot p2"></div> </div> </div> css3 @import url(https://fonts.googleapis.com/css?family=Coda+Caption:800); body { background: #DB5A48; } #size1, #size2, #size3, #size4 { position: absolute; left: -9999px; } input:checked + .size1, input:checked + .size2, input:checked + .size3, input:checked + .size4 { box-shadow: inset 2px 3px 0px rgba(0, 0, 0, 0.34),inset -1px -1px 0px rgba(255, 255, 255, 0.22); background: #7A7077; } .size1 { position: absolute; width: 20px; height: 20px; background: #CDC8C5; left: 60px; top: 60px; border-radius: 50%; } .size2 { position: absolute; width: 40px; height: 40px; background: #CDC8C5; left: 90px; top: 50px; border-radius: 50%; } .size3 { position: absolute; width: 60px; height: 60px; background: #CDC8C5; left: 140px; top: 40px; border-radius: 50%; } .size4 { position: absolute; width: 80px; height: 80px; background: #CDC8C5; left: 220px; top: 30px; border-radius: 50%; } #size1:checked ~ #nes{ font-size:8px } #size2:checked ~ #nes{ font-size:12px } #size3:checked ~ #nes{ font-size:16px } #size4:checked ~ #nes{ font-size:20px } #nes { width: 45em; height: 15em; margin: 140px auto; position: relative; color: #B62F28; font-family: 'Coda Caption', sans-serif; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s; } #nes:after { content: ""; position: absolute; width: 80%; height: 0; -webkit-box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22); box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22); bottom: -4%; left: 10%; z-index: -1; border-radius: 50%; } #nes:before { content: ""; position: absolute; width: 99.4%; height: 0; top: -3%; left: 0.3%; border-bottom: 0.5em solid #C9C4C1; border-left: 2em solid rgba(0, 0, 0, 0); border-right: 2em solid rgba(0, 0, 0, 0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .nes-top { position: absolute; top: 0; left0; width: 45em; height: 7.4em; background: #cdc8c5; border-radius: 0.3em 0.3em 0 0; -webkit-box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353; box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353; border-top: 0.2em solid rgba(255, 255, 255, 0.32); border-left: 0.2em solid rgba(255, 255, 255, 0.32); border-right: 0.2em solid rgba(0, 0, 0, 0.05); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } h1 { font-size: 1.5em; position: absolute; top: 0.4em; left: 0.85em; } .lid h2 { font-size: 0.6em; position: absolute; top: 5.1em; left: 2.2em; } .lid { z-index: 1; width: 25em; height: 6em; background: #CDC8C5; position: absolute; left: 5em; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 0; -webkit-transform-origin:0 0 -6em; -moz-transform-origin:0 0 -6em; -o-transform-origin:0 0 -6em; -ms-transform-origin:0 0 -6em; transform-origin:0 0 -6em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-top: 0.2em solid rgba(255, 255, 255, 0.32); top: -0.2em; -webkit-box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41); box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41); border-right: 0.1em solid rgba(255, 255, 255, 0.26); border-bottom: 0.1em solid rgba(255, 255, 255, 0.26); border-radius: 0.15em; } .lid:before { content: ""; position: absolute; width: 20%; left: 40%; height: 0.2em; bottom: 0; background: #E7E7E7; background: #CDC8C5; background: -moz-linear-gradient(top, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205, 200, 197, 1)), color-stop(100%,rgba(231, 231, 231, 1))); background: -webkit-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%); background: -o-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%); background: -ms-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%); background: linear-gradient(to bottom, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc8c5', endColorstr='#e7e7e7',GradientType=0 ); box-shadow: 0.2em 0.05em 0.3em -0.1em rgba(0, 0, 0, 0.3); } .nes-top:hover .lid { -webkit-transform: rotateX(55deg); -moz-transform: rotateX(55deg); -o-transform: rotateX(55deg); -ms-transform: rotateX(55deg); transform: rotateX(55deg); -webkit-box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32); box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32); } .nes-top:before { content: ""; position: absolute; border-right: 0.8em solid #B8B8B8; top: -0.22em; left: 4.8em; border-top: 0.3em solid rgba(0, 0, 0, 0); z-index: 1; } .nes-top:after { content: ""; position: absolute; border-left: 0.8em solid #B8B8B8; top: -0.22em; left: 29.4em; border-top: 0.3em solid rgba(0, 0, 0, 0); } .lid:after { content: ""; width: 23.9em; height: 6.1em; background: #CDC8C5; position: absolute; left: 0.45em; top: -6em; -webkit-transform: rotateX(90deg) translateY(-3em) translateZ(-3em); -moz-transform: rotateX(90deg) translateY(-3em) translateZ(-3em); -o-transform: rotateX(90deg) translateY(-3em) translateZ(-3em); -ms-transform: rotateX(90deg) translateY(-3em) translateZ(-3em); transform: rotateX(90deg) translateY(-3em) translateZ(-3em); } .nes-bottom { width: 39em; height: 7.5em; background: #7A7077; position: absolute; bottom: 0; left: 3em; border-bottom: 0.2em solid rgba(255, 255, 255, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45); box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45); } .nes-bottom:after { border-bottom: 6em solid transparent; border-left: 3em solid #7A7077; content: ""; height: 1.5em; position: absolute; right: -3em; top: 0; } .nes-bottom:before { border-bottom: 6em solid transparent; border-right: 3em solid #7A7077; content: ""; height: 1.5em; position: absolute; left: -3em; top: 0; } .power-box { position: absolute; left: 1.4em; width: 11.5em; top: 0; height: 5.8em; border: 0.1em solid rgba(0, 0, 0, 0.05); border-top: 0; border-radius: 0.3em; border-top-right-radius: 0; border-right: 0.1em solid rgba(255, 255, 255, 0.05); -webkit-box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01); box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01); color: #AC2828; } .light { position: absolute; width: 0.6em; height: 0.6em; left: 0.6em; bottom: 1.3em; background-color: #504F4F; background-image: -webkit-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -webkit-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ); background-image: -moz-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -moz-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ); background-image: -o-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -o-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ); background-image: -ms-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -ms-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ); background-image: linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ); -webkit-background-size: 0.2em 0.2em; -moz-background-size: 0.2em 0.2em; background-size: 0.2em 0.2em; -webkit-box-shadow: -0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1); box-shadow: -0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } #power:checked ~ .light { background-image: -webkit-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -webkit-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF ); background-image: -moz-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -moz-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF ); background-image: -o-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -o-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF ); background-image: -ms-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -ms-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF ); background-image: linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF ); -webkit-box-shadow: inset 0 0 0.5em 0.2em #F1270B,0 0 0.5em #F1550B,-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3), 0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0.5em 0.2em #F1270B,0 0 0.5em #F1550B,-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3), 0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1); } #power:checked + .reset:active ~ .light, #power:checked + .reset:focus ~ .light { background-color: rgba(255, 255, 255, 0.06); background-image: linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ); box-shadow: none; } #power { position: absolute; left: -9999px; } .power,.reset { position: absolute; cursor: pointer; width: 6em; line-height: 3.8em; height: 2.8em; left: 3em; top: 5em; font-size: 0.6em; border-top: 0.5em solid rgba(0, 0, 0, 0.09); border-right: 0.5em solid rgba(0, 0, 0, 0.03); border-bottom: 0.5em solid rgba(255, 255, 255, 0.1); border-left: 0.5em solid rgba(255, 255, 255, 0.04); border-radius: 0.6em; } .reset { left: 11em; top: 5em; } .power:before,.reset:before { content: "POWER"; position: absolute; width: 94%; height: 95%; left: 3%; top: 10%; text-align: center; border-radius: 0.3em; border-top: 0.3em solid rgba(255, 255, 255, 0.09); border-right: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.04); background: #7A7077; -webkit-box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69); box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69); -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s; } （编辑：92站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
