纯css实现一个时钟运转动画效果代码
代码语言:html
所属分类:动画
代码描述:纯css实现一个时钟运转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> * { margin: 0; padding: 0; border: 0; } html, body { min-height: 100%; } body { background-color: #00A99E; } .clock { position: relative; height: 200px; width: 200px; background: white; box-sizing: border-box; border-radius: 100%; border: 10px solid #67D2C8; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .clock .top { position: absolute; width: 3px; height: 8px; background: #262626; left: 0; right: 0; margin: 0 auto; } .clock .right { position: absolute; width: 8px; height: 3px; background: #262626; top: 0; bottom: 0; right: 0; margin: auto 0; } .clock .bottom { position: absolute; width: 3px; height: 8px; background: #262626; left: 0; right: 0; bottom: 0; margin: 0 auto; } .clock .left { position: absolute; width: 8px; height: 3px; background: #262626; top: 0; bottom: 0; left: 0; margin: auto 0; } .clock .center { height: 6px; width: 6px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: #262626; border-radius: 100%; } .clock .shadow { height: 200px; width: 200px; position: absolute; left: 60px; top: 60px; transform: rotate(135deg); background: linear-gradient(rgba(0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0