红绿灯交通灯动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #1abc9c; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .container { background-color: #2c3e50; border-radius: 50px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 15px 0; height: 200px; width: 70px; } .circle { background-color: rgba(0, 0, 0, 0.3); border-radius: 100%; position: relative; height: 40px; width: 40px; } .circle::after { border-right: 4px solid rgba(255, 255, 255, 0.6); border-radius: 100%; content: ' '; position: absolute; top: 5px; left: 0px; width: 30px; height: 30px; } .circle.red { background-color: #c0392b; box-shadow: 0 0 20px 5px #c0392b; } .circle.yellow { background-color: #f1c40f; box-shadow: 0 0 20px 5px #f1c40f; } .circle.green { background-color: green; box-shadow: 0 0 20px 5px green; } /* INSERT CSS HERE */ /* SOCIAL PANEL CSS */ .social-panel-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out; } .social-panel-container.visible { transform: translateX(-10px); } .social-panel { background-color: #fff; border-radius: 16px; box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); border: 5px solid #001F61; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Muli'; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px); } .social-panel button.close-btn { border: 0; color: #97A5CE; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-panel button.close-btn:focus { outline: none; } .social-panel p { background-color: #001F61; border-radius: 0 0 10px 10px; color: #fff; font-size: 14px; line-height: 18px; padding: 2px 17px 6px; position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-panel p i { margin: 0 5px; } .social-panel p a { color: #FF7500; text-decoration: none; } .social-panel h4 { margin: 20px 0; color: #97A5CE; font-family: 'Muli'; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-panel ul { display: flex; list-style-type: none; padding: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0