css实现图标排列左右滚动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现图标排列左右滚动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/css.gg.icons.css"> <style> body { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; padding: 0; margin: 0; box-sizing: border-box; background: #111; } h1 { color: #ddd; font-family: Roboto, sans-serif; font-weight: 500; } p { color: #ccc; font-family: Roboto, sans-serif; font-weight: 700; margin-bottom: 50px; } .container-marqueeTools { overflow-x: hidden; } .marqueeToolWrapper { display: flex; align-items: center; justify-content: center; width: 200vw; height: 4rem; -webkit-margin-after: 1rem; margin-block-end: 1rem; } .marqueeTool { display: flex; align-items: center; justify-content: center; background: #1a1a1a; height: 4rem; min-inline-size: clamp(100px, 150px, 20em); margin: 10px; border-radius: 50px; } .marqueeTool:hover { background: #1d1d1d; } .marqueeTool-icon { color: #cccccc; transform: scale(1.5); } .FirstRow { -webkit-animation: Scroll 60s linear infinite; animation: Scroll 60s linear infinite; } .SecondRow { -webkit-animation: Scroll 60s linear infinite; animation: Scroll 60s linear infinite; animation-direction: reverse; } @-webkit-keyframes Scroll { 0% { transform: translateX(-50vw); -webkit-transform: translateX(-50vw); } 100% { transform: translateX(50vw); -webkit-transform: translateX(50vw); } } @keyframes Scroll { 0% { transform: translateX(-50vw); -webkit-transform: translateX(-50vw); } 100% { transform: translateX(50vw); -webkit-transform: translateX(50vw); } } </style> </head> <body> <!-- partial:index.partial.html --> <h1>CSS Only marquee</h1> <p>Down with JavaScript! CSS is Simple AF! <br> (Using clamp to keep mobile consistency)</p> <div class="container-marqueeTools"> <div class="marqueeToolWrapper FirstRow"> <div class="marqueeTool marqueeItem"><i class="gg-microsoft marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-unsplash marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-figma marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-trello marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-pexels marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-stark marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-shutterstock marqueeTool-icon"></i></div> <div class="marqueeTool marqueeItem"><i class="gg-bmw marqueeTool-icon"></i></div> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0