止于至善

仅使用 CSS 创建一个具有无限滚动轮播的动画，无需 JavaScript。首先是无限滚动轮播动画效果在我们常见的开发中都是借用 JavaScript 实现，如果纯粹使用 CSS，我觉得还是一个比较有趣的。动画向左移动直到隐藏使用 transform: translateX(-100%)，这里的动画是在动画结束时，第一组元素刚好全部隐藏。第二组元素本来是完全隐藏，在执行 transform: translateX(-100%)，动画结束时，刚好从隐藏状态全部显示出来。

本文介绍 CSS 的自定义属性（变量）来实现样式、动画等 CSS 的复用。都是知道在 CSS 和 JS 复用一个很重要的事情，比如 JS 的函数封装，各个设计模式的使用等等，CSS 中样式的复用，同样重要。MDN 使用 CSS 自定义属性（变量）自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;

学习使用 CSS 函数 clamp 函数，此函数不但能作为区间取值，还可以作为一种判断；此效果采用的纯 CSS 实现，减少了 JS 操作判断；需要待解决问题，就是临界值 200px 的时候，刚好 200px 不应该显示按钮，超出200px才显示，这个目前还在思考解决办法。

使用伪元素配合 CSS 函数计算，减少 DOM 的创建和控制；减少了 JS 的计算量，只用单纯的监听位置和移出，其他计算都交给 CSS 的函数完成，原生 JS 直接减少到 11 行代码，如果使用 vue 或者 react 库 JS 的监听代码量更少；熟练的使用 CSS 一些函数，能够使我们更加便捷的实现很多以前需要 JS 才能实现的复杂特效，所以细学 CSS 还是很有必要的，不断学习前进。

整体来说就是显示或隐藏的之间进行切换，clip: rect 方法这里我没有实现，所以后边学习到这个 CSS 属性的时候再实现；本来想的是完全使用 CSS 实现，包括 input 的滑动监听，但是由于很久没有看 CSS 的属性，对监听那些不是很熟悉，所以这一篇博客就不实现了，后边边学习边实现对应的应用效果；为什么写这篇博客呢？就是前两天看到一个使用纯 CSS 实现各种效果的专栏，包括滚动监听等，我才发现原来现在CSS都已经这么强大了。

2. 无限旋转3. 停止动画4. 实现className的切换1. JS 实现播放和暂停的切换HTMLJS2. JQUERY 实现3. VUE 实现JS5. 总结注意：此文章只是单纯实现音乐图标的旋转和暂停的切换，没有对背景音乐的暂停和播放进行处理；css3 的动画功能很强大，但是同时需要我们处理好不同浏览器的兼容性处理！WXRUI体验二维码我的博客，欢迎交流！我的CSDN博客，欢迎交流！微信小程序专栏前端笔记专栏微信小程序实现部分高德地图功能的DEMO下载微

圣杯布局实现两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。 这里改进只是对布局进行改进，会将中间栏放到最后渲染！HTML代码<div id="main-content"> <div id="main-left">left容器</div> <div id="main-right">right容器</div> <div id=&quot

双飞翼布局的起源双飞翼布局介绍-始于淘宝UED双飞翼布局解决的问题 两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。其实双飞翼布局就是在圣杯布局的原理上进行完善，实现相同效果的完美布局！双飞翼布局原理HTML代码<div id="content"> <div id="main-wrap"><div id="main"></div></div> &lt

圣杯布局的起源In Search of the Holy Grail圣杯布局解决的问题 两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。圣杯布局的原理HTML代码<div class="content"> <div class="center col"> </div> <div class="left col"> </div>

引入showdown.js<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>通过showdown转换var converter = new showdown.Converter();//转换为HTMLvar html = converter.makeHtml(markdownText);/

sticky定义position:sticky定义， eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。sticky特点sticky属性有以下几个特点：

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)2、描述一下渐进增强和优雅降级之间的不同吗?...

通过window.location对象获取对应的属性1、设置或获取对象指定的文件名或路径（pathname） window.location.pathname2、设置或获取整个 URL 为字符串（href） window.location.href3、设置或获取与 URL 关联的端口号码（port） window.location.port4、设置或获取 U...

history对象包含用户在浏览器窗口中访问过的URLhistory对象是window对象的一部分，也就是说可以window.history进行访问1、history对象的属性（length） console.log(history.length);通过history.length直接返回浏览器历史列表中URL的数量 2、history对象的方法back() ...

转载地址：https://my.oschina.net/u/2457218/blog/782822一、问题在本地引入了Font Awesome 字体图标，网页未部署到服务上（在本地直接访问，部署到nginx服务器，火狐浏览器能显示）目录结构：引入方式：&lt;link href="../css/font-awesome.css" rel="stylesheet" type...