在前后端分离的开发模式中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:……

如下视频，在谷歌浏览器（chrome）中给video标签加上了autoplay属性，但是无法生效。 原因是谷歌浏览器在高版本中对于自动播放的视频有一个新的政策，默认不允许自动播放视频，哪怕是在Javascript中使用文档加载后播放也不行（window.onload = function(){ document.querySelector('video').play(); }），需要特定的条件，一个是给视频添加点击事件，另一个条件是允许静音播放，也就是说需要在video标签中加上muted属性，视频才能自动播放；原因在于自动播放的另一个特定条件（媒体参与……

vue插件和组件的区别 使用插件的方式包装组件和直接注册全局组件其实是一样的，都是注册组件。不同的是，一般组件我们是作为页面的某一块结构，按需引用，但是有些应用场景你可能会用到也可能用不到，总之就是你不知道什么时候会用到，总不能在每个页面都引用吧。再一个，控制组件需要传递props，也就是说每次引用都需要写方法才能达到控制的目的。 所以一般组件就不适合轻提示、加载动画、模态框这种随时需要的功能，所以需要把组件包装成插件，直接添加到页面上（一般是插入到body），再通过在vue的原型上添加全局功能，使用自定义的方法（api）来控制组件。 vue的组件是组件……

假装是一张图片 假装是一张图片 假装是一张图片 假装是一张图片 假装是一张图片   如上示例，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……

HTML锚点平滑滚动 1、给html元素加上：style="scroll-behavior: smooth;" 2、<a href="目标元素的ID">锚点返回顶部</a> 原生JS平滑滚动 document.querySelector('.header').scrollIntoView({ behavior:'smooth' })……

效果演示：进入文章页面后随意点击。 (function(texts, colors, class_name){ document.addEventListener('click', function(e){ var span = document.createElement('span'); clearInterval(span.timer); span.innerHTML = texts[parseInt(Math.random()*texts.length)]; span.style = 'position:absolute;poi……