html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码 | 您所在的位置:网站首页 › html闹钟代码 › html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码 |
效果图 各位朋友大家好,今天给大家带来的是 《HTML5+CSS3闹钟动画特效源码》 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到群文件 废话不多说,上源码 body { background: #8fd5d5; } .contain-clock { position: relative; margin: -100px auto; width: 155px; height: 200px; -webkit-animation: alarm-2 1ms infinite; animation: alarm-2 1ms infinite; } .face-1 { position: absolute; top: 23px; left: 23px; z-index: 3; background: white; border-radius: 50%; width: 109px; height: 109px; } .face-2 { position: relative; margin: 200px auto; z-index: 2; background: white; border: 15px solid #ed6e46; border-radius: 50%; width: 125px; height: 125px; } .line { position: absolute; left: 50%; margin-left: -3px; background: gray; width: 6px; height: 126px; } .line-2 { left: 63px; transform: rotate(90deg); -webkit-transform: rotate(90deg) translate3d(0, 0, 0); } .line-3 { margin-left: -1px; transform: rotate(30deg); -webkit-transform: rotate(30deg) translate3d(0, 0, 0); width: 2px; } .line-4 { margin-left: -1px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg) translate3d(0, 0, 0); width: 2px; } .line-5 { margin-left: -1px; transform: rotate(60deg); -webkit-transform: rotate(60deg) translate3d(0, 0, 0); width: 2px; } .line-6 { margin-left: -1px; transform: rotate(-60deg); -webkit-transform: rotate(-60deg) translate3d(0, 0, 0); width: 2px; } .hour { position: absolute; top: 50%; left: 50%; z-index: 5; margin-left: -4px; background: #f8b65b; transform-origin: top; -webkit-transform-origin: top; transform: rotate(90deg); -webkit-transform: rotate(90deg); border-radius: 50px; width: 8px; height: 35px; } .minute { position: absolute; top: 5px; left: 55px; z-index: 3; margin-left: -4px; background: #f8b65b; border-radius: 50px; transform-origin: bottom; -webkit-transform-origin: bottom; width: 8px; height: 50px; animation: tick-tock 3600s steps(60, end) infinite; -webkit-animation: tick-tock 3600s steps(60, end) infinite; } .second { position: absolute; top: 5px; left: 56px; z-index: 5; margin-left: -2px; background: #333333; border-radius: 50px; transform-origin: bottom; -webkit-transform-origin: bottom; width: 2px; height: 50px; animation: tick-tock 60s steps(60, end) infinite; -webkit-animation: tick-tock 60s steps(60, end) infinite; } .center { position: absolute; top: 62px; z-index: 20; margin-top: -15px; left: 55px; margin-left: -8px; border-radius: 50%; background: #ed6e46; width: 16px; height: 16px; } .arm { position: absolute; top: -50px; left: 73px; z-index: 1; background: gray; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); border-radius: 50px; width: 10px; height: 230px; } .arm-2 { left: 71px; transform: rotate(30deg); -webkit-transform: rotate(30deg); } .bell { position: absolute; top: -30px; z-index: 2; background: #ed6e46; border-radius: 50% 50% 10% 10%; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); width: 65px; height: 35px; } .bell-2 { left: 90px; transform: rotate(30deg); -webkit-transform: rotate(30deg); } .hammer { position: absolute; top: -25px; left: 76px; z-index: 1; background: gray; width: 3px; height: 30px; -webkit-animation: alarm 8ms infinite; animation: alarm 8ms infinite; } .hammer:before { content: ''; display: block; position: absolute; left: -6px; background: gray; border-radius: 50px; width: 15px; height: 5px; } .handle { position: absolute; top: -68px; left: 32px; border: 8px solid gray; border-radius: 50px 50px 0 0; width: 75px; height: 30px; } .handle:after { content: ''; display: block; position: absolute; top: 26px; background: #8fd5d5; width: 75px; height: 15px; } @keyframes tick-tock { to { transform: rotate(360deg); } } @-webkit-keyframes tick-tock { to { -webkit-transform: rotate(360deg) translate3d(0, 0, 0); } } @-webkit-keyframes alarm { from { -webkit-transform-origin: bottom right; -webkit-transform: rotate(15deg); } to { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-15deg); } } @keyframes alarm { from { transform-origin: bottom right; transform: rotate(15deg); } to { transform-origin: bottom left; transform: rotate(-15deg); } } @-webkit-keyframes alarm-2 { from { -webkit-transform: rotate(1deg); } to { -webkit-transform: rotate(-1deg); } } @keyframes alarm-2 { from { transform: rotate(1deg); } to { transform: rotate(-1deg); } } |
CopyRight 2018-2019 实验室设备网 版权所有 |