css实现理发店理发杆子旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现理发店理发杆子旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Secular+One&display=swap'> <style> body { height: 100vh; margin: 0; display: grid; place-items: center; } .outer-sign { width: 75px; height: 250px; position: relative; } .pole-top { width: 85px; height: 30px; background: gainsboro; position: absolute; top: -30px; left: -5px; z-index: 50; border-radius: 8px; box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2); } .pole-top-extra { position: absolute; width: 80px; height: 10px; background: gainsboro; top: -37.5px; left: -2.5px; z-index: 45; border-top-left-radius: 8px; border-top-right-radius: 8px; box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2); } .pole-top-circle { width: 65px; height: 65px; background: #bebebe; position: absolute; z-index: 25; top: -60px; left: 5px; border-radius: 50%; } .pole-bottom { width: 85px; height: 30px; background: gainsboro; position: absolute; bottom: -30px; left: -5px; z-index: 50; border-radius: 4px 4px 8px 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); } .pole-bottom-extra { position: absolute; width: 80px; height: 10px; background: gainsboro; bottom: -37.5px; left: -2.5px; z-index: 45; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); } .pole-bottom-circle { width: 65px; height: 65px; background: #bebebe; position: absolute; z-index: 25; bottom: -60px; left: 5px; border-radius: 50%; } .barber-pole { position: absolute; display: flex; justify-content: center; height: 250px; width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0