在前后端分离的开发模式中less是将样式编译成css随项目一起打包的，而传统模板页面引用的less是将样式编译后动态插入到head标签中，同时保存在localStorage中，如果引用的less是加上版本号的，比如这样： <link rel="stylesheet/less" type="text/css" href="/theme/default/static/style/style.less?cc5e3bb904cb1b4801a73aefc25625bc"> 那么每次有新的版本都会生成缓存存入localStorage，久而久之会产生一大……

.parent{ margin:0 auto; position:relative; width:100px; height:100px; left:0; animation:parent 1s linear 0s infinite alternate; } .child{ position: absolute; height:100px; width:10px; box-sizing:border-box; border:1px solid #135790; border-radius: 50%; animation:chi……

@keyframes wiggle{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.5)}100%{transform:rotate(360deg) scale(1)}}.loader{margin: 0 auto;display: inline-block;text-align: center;height: 50px;}.loader::after, .loader::before{box-sizing: border-box;content: "";width:……

假装是一张图片 假装是一张图片 假装是一张图片 假装是一张图片 假装是一张图片   如上示例，5张图片轮播，实现原理： 1、基本结构：ul宽度设置为500%，每个li宽度为20%，ul的left每次递减100%； 2、首先给ul指定一个动画，整个动画30秒，延迟3秒开始动画，无限循环：animation:banner 30s 3s infinite; 3、动画的原理：每张图片的间隔是20%的时间（6秒），预留了3%的时间给图片快速滚动。 <!-- 这是主要的html结构 --> <div class……