輕描淡寫的博客

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。1、黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscal

第一眼看到这个题目，这两个名词都不熟悉，回头查了相关资料，看了下，实际自己之前用过，但是不知道原来有这么两个好听的名字。先看两个例子：.transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }.transition{ 　　 transition: all .5s;.

<div id="mapbox"></div>#mapbox{ pointer-events:none; }

只需要在animate.css的开头找到.animated{ }进行修改即可：.animated { -webkit-animation-duration: 1s; animation-duration: 2s; // 动画执行时间 -webkit-animation-fill-mode: both; animation-fill-mode: both;}但其实有更好的方法，只需在要执行动画的div设置stye：<div style="animati

nav{ position: -webkit-sticky; // 兼容 position:sticky; top:0px; } 注意top、bottom 的生效距离由最近一个overflow属性是hidden scroll auto或 overlay 的祖先元素决定。 父元素为overflow:hidden时，由于容器内无法滚动，所以实际上也无法生效。 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。 父元素的高度不能低于s...

实现三角形的绘制很简单。第一步：新建一个div。<div class="kailong"></div>第二步：为盒子添加样式。1.向上.kailong{ width:0; height:0; border-right:50px solid transparent; border-left:50px solid transparent; border-bottom:50px solid red;}2.向下.k...