div+css布局实现红绿灯动画效果
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现红绿灯动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0px; background: #fca701; display: flex; align-items: center; justify-content: center; height: 100vh; } .traffic-light { position: relative; background: #222; border-radius: 10px; padding: 16px; box-shadow: inset 0 0 0px 5px #2a2a2a; } .light-red, .light-yellow, .light-green { position: relative; margin: 16px; width: 100px; height: 100px; border-radius: 50%; background: repeating-linear-gradient(#333, #443 5px); animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: step-end; } .light-red { animation-name: lightUpRed; } .light-yellow { animation-name: lightUpYellow; } .light-green { animation-name: lightUpGreen; } @keyframes lightUpRed { 0% { background: repeating-linear-gradient(#f00, #e00 5px); box-shadow: 0 0 40px #f00; z-index: 1; } 35% { background: repeating-linear-gradient(#443, #333 5px); box-shadow: none; z-index: 0; } } @keyframes lightUpYellow { 80% { background: repeating-linear-gra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0