效果
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <section> <!-- 箭头动画css --> <div class="leftJT1"> <div class="list"> <div class="cc rowup"> <div class="s"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="s"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> </div> <i class="iconfont icon-weibiaoti1-copy"></i> </div> <div class="leftJT2"> <div class="list"> <div class="cc rowup"> <div class="s"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="s"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> </div> <i class="iconfont icon-weibiaoti1-copy"></i> </div> </section> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | section { width: 600px; height: 300px; border: 1px solid red; } /* // 箭头动画 */ @mixin jianTou($top, $left, $bjColor) { position: absolute; top: $top; left: $left; width: 4px; height: 30%; transform: rotate(90deg); >i { position: absolute; left: -1.2rem; top: -5px; display: block; color: $bjColor; font-size: 2rem; transform: rotate(-90deg); } @keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -240px, 0); transform: translate3d(0, -240px, 0); } } .list { width: 4px; margin: 10px auto; position: relative; height: 200px; overflow: hidden; } .list .rowup { -webkit-animation: 5s rowup linear infinite normal; animation: 5s rowup linear infinite normal; position: relative; color: white; >div { >div { height: 20px; background-color: $bjColor; margin-top: 4px; } } } } .leftJT1 { position: relative; @include jianTou(0%,17%,#ffb571); } .leftJT2 { position: relative; @include jianTou(10%,17%,red); } |
粘贴复制一把梭~~~
赞 (5)
iweb 阿里云免费国内VPS_送高校在读大学生12个月免费国内VPS云服务器
« 上一篇 2020年2月7日 pm9:12
Vue三级导航菜单、二级导航菜单-demo下载
下一篇 » 2020年3月12日 pm9:55
