css
CSS 样式书写顺序及规范
在项目中，大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来…
css箭头循环动画
效果 HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869section {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);}粘贴复制一把梭~~~
