vue+jquery实现垂直滚动时间线飞入效果代码
代码语言:html
所属分类:其他
代码描述:vue+jquery实现垂直滚动时间线飞入效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>时间线</title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <style> body{ background-color: #F5F4F4 } .ui-timeLine { padding: 50px 0; position: relative; overflow: hidden; } .ui-timeLine>.item { display: block; position: relative; text-align: justify; text-justify: newspaper; word-break: break-all; padding-left: 50px; color: #fff; padding-right: 10px; } .ui-timeLine>.item>.box { padding: 5px 0; } .ui-timeLine>.item .cbox { position: relative; left: 100vw; transition: left 1s; padding: 10px; border-radius: 10px; background-image: linear-gradient(45deg, rgba(0, 200, 255, 0.4) 0%, rgba(132, 43, 171, 0.4) 100%); box-shadow: 3px 3px 8px #ccc; } .ui-timeLine>.item::after { content: ""; display: block; clear: both; } .ui-timeLine .dot { z-index: 100; display: inline-block; position: absolute; left: 25px; top: 0; padding: 3px; border: 3px solid #eee; border-radius: 20px; background-color: #fff; box-shadow: 3px 3px 8px #ccc; transition: .5s; } .ui-timeLine .active { border: 3px solid rgba(132, 43, 171, .8); } .ui-timeLine .line, .ui-timeLine>.activeLine { position: absolute; left: 29px; width: 4px; height: 100%; background-color: #eee; } .ui-timeLine .date { font-size: 14px; font-weight: 900; } .ui-timeLine .title { font-size: 16px; font-weight: 900; line-height: 30px; } .ui-timeLine .types>span { font-size: 10px; border-radius: 5px; padding: 2px 10px; margin-right: 10px; border: 1px solid #fff; } .ui-timeLine>.activeLine { background-color: rgba(0, 200, 255, .8); z-index: 50; top: 50px; height: 0; max-height: calc(100% - 80px); transition: height 1s; box-shadow: 3px 3px 2px #eee; } </style> </head> <body> <div class="ui-timeLine"> <a v-for="item in 15" class="item"> <div class="line"></div> <div class="dot"></div> <div clas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0