angular实现自适应响应式带入场动画的时间线时间轴效果代码
代码语言:html
所属分类:响应式
代码描述:angular实现自适应响应式带入场动画的时间线时间轴效果代码,往下滚动时间轴动画入场。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #33a9d4; color: #297cb9; } .sq-money { background-color: #297cb9; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; padding: 1.25rem; overflow: hidden; text-align: center; width: 100%; z-index: 99999; } .sq-money__budget { color: #fff; margin: 0 0 0 -4rem; position: relative; } .sq-money__budget__amount { position: absolute; top: 0; } .sq-money__budget__amount.ng-enter, .sq-money__budget__amount.ng-leave { transition: 0.3s ease-in-out all; } .sq-money__budget__amount.ng-enter { opacity: 0; top: -100%; } .sq-money__budget__amount.ng-enter-active { opacity: 1; top: 0; } .sq-money__budget__amount.ng-leave { opacity: 1; top: 0; } .sq-money__budget__amount.ng-leave-active { opacity: 0; top: 100%; } .sq-container { margin: 8rem auto 0; max-width: 30rem; padding: 2.5rem; } .sq-timeline { position: relative; text-align: center; } .sq-timeline:before { background-color: #299bc4; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0px 0px 2px 1px rgba(41, 124, 185, 0.4); content: ""; display: block; height: calc(100% - 4px); left: 50%; margin-left: -3px; position: absolute; width: 6px; z-index: 9; } .sq-timeline__item { clear: both; margin-bottom: 8rem; position: relative; zindex: 999; } .sq-timeline__item:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .sq-timeline__item--animate .sq-timeline__item__date { transform: scale(1); } .sq-timeline__item--animate .sq-timeline__item__info { opacity: 1; right: 0; } .sq-timeline__item--animate .sq-timeline__item__info--left { left: 0; } .sq-timeline__item__date { background-color: #46bea3; border: 0.25rem solid #fff; border-radius: 50%; box-shadow: inset 0px 3px 2px 1px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0, 0, 0, 0.2); color: #fff; display: inline-block; line-height: 4; font-weight: bold; height: 4rem; left: 50%; margin-left: -2.25rem; text-align: center; position: absolute; transform: scale(0.5); transition: all 0.3s ease-out; width: 4rem; z-index: 99; } .sq-timeline__item__date--outgoing { background-color: #f89a3e; } .sq-timeline__item__info { background-color: #fff; border-radius: 0.75rem; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2); display: inline-block; float: right; max-width: 8rem; padding: 1.25rem; position: relative; opacity: 0; right: -50%; transition: all 0.4s ease-out; } .sq-timeline__item__info--left { left: -50%; float: left; right: auto; } .sq-timeline__item__info:after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0.75rem 1rem 0.75rem 0; border-color: transparent #fff transparent transparent; position: absolute; left: -0.75rem; margin-top: -0.75rem; top: 50%; zindex: 999; } .sq-timeline__item__info--left:after { border-width: 0.75rem 0 0.75rem 1rem; border-color: transparent transparent transparent #fff; left: auto; right: -0.75rem; } .sq-timeline__item__info__description { margin-right: 0.5rem; } .sq-timeline__item__info__amount { color: #46bea3; font-weight: bold; white-space: nowrap; } .sq-timeline__item__info__amount--outgoing { color: #c14b9b; } </style> </head> <body> <!-- partial:index.partial.html --> <div ng-app="app" ng-controller="TimelineController as ctrl"> <div class="sq-money"> <h2 class="sq-money__budget"> Budget £ <span ng-animate-swap="ctrl.total" class="sq-money__budget__amount" ng.........完整代码请登录后点击上方下载按钮下载查看
网友评论0