js+css实现飞行飞机时钟显示走动效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现飞行飞机时钟显示走动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> svg{ border:4px solid lightblue; border-radius:50%; height:300px; width:300px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0%25' style='stop-color:%23fff;stop-opacity:0' /%3E%3Cstop offset='60%25' style='stop-color:%23fff;stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:%23fff;stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='grad2' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0%25' style='stop-color:%23fff;stop-opacity:0.99' /%3E%3Cstop offset='10%25' style='stop-color:%23fff;stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:%23fff;stop-opacity:0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cfilter id='sky'%3E%3CfeTurbulence baseFrequency='0.00625' numOctaves='9' seed='51' /%3E%3CfeColorMatrix type='hueRotate' values='0'%3E%3Canimate attributeName='values' from='0' to='360' dur='60s' repeatCount='indefinite' /%3E%3C/feColorMatrix%3E%3CfeColorMatrix values='2.8 0.5 -4.5 1 4.6 -0.3 2.1 -3 0 3.5 2.8 -1.4 -0.2 4.3 3.5 -4.9 -0.9 4.5 3.9 -2' /%3E%3C/filter%3E%3Cfilter id='sea'%3E%3CfeTurbulence baseFrequency='0.006 0.2' numOctaves='9' seed='51' /%3E%3CfeColorMatrix type='hueRotate' values='0'%3E%3Canimate attributeName='values' from='0' to='360' dur='60s' repeatCount='indefinite' /%3E%3C/feColorMatrix%3E%3CfeColorMatrix values='2.8 0.5 -4.5 1 4.6 -0.3 2.1 -3 0 3.5 2.8 -1.4 -0.2 4.3 3.5 -4.9 -0.9 4.5 3.9 -2' /%3E%3CfeGaussianBlur stdDeviation='1' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='rgb(67,177,219)' class='bgRect' /%3E%3Crect width='100%25' height='100%25' filter='url(%23sky)' /%3E%3C/svg%3E"); } #time{ position:absolute; top:calc(50% - 180px); left:50%; transform:translate(-50%,-50%); width:200px; /* background:red; */ font-family:'Roboto', sans-serif; font-weight:bold; } #timeHour{ height:40px; width:40px; position:absolute; top:50%; left:20%; transform:translate(-50%,-50%); background:blue; border-radius:50%; text-align:center; line-height:40px; color:#fff; font-size:150%; } #timeMin{ height:40px; width:40px; position:absolute; top:50%; left:40%; transform:translate(-50%,-50%); background:purple; border-radius:50%; text-align:center; line-height:40px; color:#fff; font-size:120%; } #timeSeconds{ height:40px; width:40px; position:absolute; top:50%; left:60%; transform:translate(-50%,-50%); background:green; border-radius:50%; text-align:center; line-height:40px; color:#fff; font-size:80%; } #timeMs{ height:40px; width:40px; position:absolute; top:50%; left:80%; transform:translate(-50%,-50%); background:#000; border-radius:50%; text-align:center; line-height:40px; color:#fff; font-size:50%; } #col1, #col2, #col3{ height:40px; width:40px; position:absolute; top:50%; left:30%; transform:translate(-50%,-50%); text-shadow: 0px 0px 3px #FFF; text-align:center; line-height:40px; color:#000; font-size:20px; z-index:5; } #col2{ left:50%; } #col3{ left:70%; } </style> </head> <body > <div id="time"> <span id="timeHour"></span> <span id="col1">:</span> <span id="timeMin"></span> <span id="col2">:</span> <span id="timeSeconds"></span> <span id="col3">:</span> <span id="timeMs"></span> </div> <svg viewBox="0 0 200 200"> <g id="hour"> <path fill="rgba(255,255,255,0.4)" d="M 100 30 A 1 1 90 0 0 100 161 A 1 1 90 0 1 100 44 Z" /> <path class="plane" fill="lightgray" d="M 97 37 C 98 39 100 38 103 39 C 108 40 136 41 141 40 C 143 39 144 38 144 37 C 144 36 143 35 141 34 C 136 33 108 34 103 35 C 100 36 98 35 97 37 Z" /> <path class="tailR" fill="blue" d="M 99 35 L 105 34 L 101 29 C 100 28 99 28 99 29 Z" /> <path class="wingR" fill="blue" d="M 119 33 L 129 33 L 127 31 C 127 31 128 31 128 29 C 128 28 127 28 124 28 L 122 25 C 123 25 123 22 122 22 L 119 22 L 114 16 C 113 15 110 16 110 17 Z" /> <path class="tailL" fill="blue" d="M 99 45 C 99 46 100 46 101 45 L 105 40 L 99 39 Z" /> <path class="wingL" fill="blue" d="M 119 41 L 110 57 C 110 58 113 59 114 58 L 119 52 L 122 52 C 123 52 123 49 122 49 L 124 46 C 127 46 128 46 128 45 C 128 43 127 43 127 43 L 129 41 Z" /> </g> <g id="minute"> <path transform="translate(50 50) sc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0