jquery实现垂直聚焦滚动用户列表效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquery实现垂直聚焦滚动用户列表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no"> <style> html, body { min-height: 100%; line-height: 24px; } * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } .hide { display: none; } .lf { float: left; } .lr { float: right; } .red, .red a,.red a h5, .red a p { color: #FF0000 !important; } a { text-decoration: none; color: inherit; } .mr2 { margin-right: 1rem; } .ml2 { margin-left: 1rem; } .main-group { box-sizing: border-box; width: 100%; min-height: 100vh; padding: 0 5em; display: flex; align-items: center; justify-content: center; margin: 0 auto; background: linear-gradient(tobottom,#bea2e7 0%,#86b7e7 100% ); } .main-group .items-group { background: #fff; max-width: 460px; display: flex; align-items: center; justify-content: space-between; border-radius: 100px 20px 20px 100px; padding: 6px 20px 6px 6px; box-sizing: border-box; animation: animate 15s linear infinite; animation-delay: calc(3s * var(--delay)); position: absolute; opacity: 0; } .main-group .items-group:last-child { animation-delay: calc(-3s * var(--delay)); } .main-group .items-group.no-animation { animation-play-state: paused; } @keyframes animate { 0% { opacity: 0; transform: translateY(100%) scale(0.5); } 5%, 20% { opacity: 0.4; transform: translateY(100%) scale(0.7); } 25%, 40% { opacity: 1; z-index: 1; pointer-events: auto; transform: translateY(0%) scale(1); } 45%, 60% { opacity: 0.4; transform: translateY(-100%) scale(0.7); } 65%,100% { opacity: 0; transform: translateY(-100%) scale(0.5); } } .main-group .items-group .items-box { display: flex; align-items: center; /* justify-content: center; */ } .main-group .items-group .img { width: 90px; height: 90px; } .items-group .img img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 10px #888888; } .main-group .items-group .desc { margin-left: 20px; font-size: 12px; } .main-group .items-group .desc .name { font-size: 16px; font-weight: bold; } .main-group .items-group .follow-btn { border-radius: 16px; font-weight: bold; padding: 5px 26px; color: #fff; background: linear-gradient(to bottom,#bea2e7 0%,#86b7e7 100% ); } .main-group .items-group .del-follow { background: linear-gradient(to bottom,#1f1f1f 0%,#a8a8a8 100% ); } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> class Action { constructor(parameter) { this._data = parameter.data; this._main_box = parameter.main_box this.add_html(); } _sleep (time) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0