saber 酱的抱枕

Fly me to the moon

10/22
2016
学习

使用CSS3的user-select属性禁止选择元素

saber 撰写 无回复 1,740次查看

前段时间看到一个网站屏蔽了选择操作，禁用JavaScript也无效，后来终于发现是这个网页上设置了user-select属性，禁止了用户选取网页上的元素。

user-select是css3的属性，可以设置允许用户选择哪些元素以及是否允许选择等。现在要使用user-select属性，还需要加私有前缀，如下：

-ms-user-select
-moz-user-select
-webkit-user-select

-ms-user-select 可设置 4 个值：
auto – 如果该元素包含可编辑的文本（如输入元素或可编辑内容的元素），则可以选择文本。否则，元素内容是否可选择由父节点的值决定。
none – 不可以选择文本
text – 可以选择文本
element – 可以选择文本，但选择范围受元素边界的约束

-moz-user-select和-webkit-user-select：
auto   默认值，用户可以选中元素中的内容
none  用户不能选择元素中的任何内容
text   用户可以选择元素中的文本
element  文本可选，但仅限元素的边界内(只有IE和FF支持)
all   在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。

-moz-user-select还有个私有的值：-moz-none，它表示元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。

Read More →

使用CSS3的user-select属性禁止选择元素

10/14
2016
学习

使用css3动画给评论头像增加旋转效果

saber 撰写 7条回复 5,144次查看

刚才我给评论区头像添加了鼠标经过旋转的效果，是使用css3动画做的。

在css样式表里先定义一个旋转的动画，然后在鼠标经过头像时触发动画：

@keyframes rotate_once{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.comment-meta .avatar:hover{
	animation: rotate_once .5s;
}

有时候必须结合JavaScript事件播放动画的时候，可以先把animation那句放到一个单独的class名里，然后通过JavaScript来动态添加、删除改动画的className，来达到播放动画或去除动画的效果。

示例：

element.addEventListener("mouseover",function(){
	element.className=nowClassName+" rotate_once";
	element.addEventListener("animationend",function(){
		element.className=nowClassName;
	})
});

鼠标经过元素时添加rotate_once这个className，播放动画。动画播放完毕之后再去掉这个className。

这里有个知识点，就是JavaScript里有三个能监听动画播放的事件：

animationStart 动画开始执行
animationEnd 动画执行结束
animationIteration  重复动画开始执行（只有重复动画才会触发）

使用css3动画给评论头像增加旋转效果

08/24
2016
学习

HTML5中input标签的placeholder属性

saber 撰写 无回复 1,631次查看

网页上的输入框里经常会预设浅色的文字用来提示用户应该输入什么内容。当用户开始填写内容时，预设的文字就消失，文字颜色也变成正常的颜色。如果用户清除了填写的内容，则恢复成预设的样式。

这个效果以前经常用JavaScript来做，现在HTML5中对一些input标签添加了placeholder属性，实现了类似的效果。

我们可以通过placeholder属性的值来规定预设值。预设文字是浅色的，在用户开始输入时也会隐藏。

我们可以通过以下选择器来设置所有placeholder文字的样式：

::-webkit-input-placeholder{color:#0c0;}
::-moz-placeholder{color:#0c0;}
:-ms-input-placeholder{color:#0c0;}

IE10才开始支持placeholder属性。而且它的选择器前面只有一个冒号（这个我没测试过）。

这是个很美好的属性，不过兼容性还有点坑。来个示例：

HTML5中input标签的placeholder属性

10/24
2014
学习

css3的渐变

saber 撰写 无回复 1,209次查看

这是一个常规的线性渐变，其在chrome下代码如下： 

background:-webkit-gradient(linear, 0% 0%, 00% 100%, from(yellow), to(orange));

不要担心这些语法会让你看花眼，我也是这样的！只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(color))
结束的颜色? (to(color))

调整了起始点和终点的样式：

同上chrome下的代码：

background:-webkit-gradient(linear, 20% 10%, 10% 90%, from(yellow), to(orange));

为了兼容性考虑可以在渐变之前写一个纯色背景；颜色可以用rbg/rgba格式或16进制颜色

包含ff的代码请看这里

css3的渐变

10/7
2014
学习

css3动画过渡效果的实验

saber 撰写 无回复 1,023次查看

之前给本站的一些a链接设置了旋转效果(鼠标经过左侧a元素即可看到)，里面用到了一个属性：
transition:all .5s;
意即动画效果的过渡时间为0.5秒。

以前我很好奇一些网站的a标签在鼠标经过的时候会缓慢变色而不是立即变色，刚才忽然想起了这个属性，试了一试果然奏效，即使不是旋转变形这类CSS3的新属性也有效果。

后来想起更早之前还试验过一个鼠标经过的时候图片透明度缓变的效果，是用js做的。也用transition属性试验了一下，果然能够实现这个效果，想当初费了多大劲，我真想以头抢地啊。不过css的伪类没有鼠标离开的状态，无法实现透明度缓慢恢复到1，这算是个缺陷吧吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试过渡效果</title>
</head>
<body>
    <img src="http://www.saber.love/wp-content/uploads/2014/08/head.png" alt="">
    <br>
    <a href="#" id="demo">saber酱可爱无敌</a>
    <style type="text/css">
    	a{font-size: 40px;color: #444;}
		a:hover{color: #1BB40E;transition:all .6s;}
		img:hover{opacity: 0.4;transition:all .5s;}
	</style>
</body>
</html>

看看下面这个例子：

代码如下：

<div class="css3at"></div>
    <style type="text/css">
    	.css3at{ width: 100px;height: 100px;border: 6px solid #F27B33; border-radius: 100px; margin: 0 auto;}
		.css3at:hover{width: 70px; height: 70px;transition:all .5s; }
	</style>

css3动画过渡效果的实验

10/4
2014
学习

css3的旋转动画一例

saber 撰写 7条回复 2,296次查看

今天在看某网站的时候发现鼠标经过用户头像，会产生360°旋转的效果，我意识到这应该是个css3的动画效果。可是css3我也没怎么实践过，于是审查元素，最后发现了代码。

对某一元素或者选择器设置：

a:hover{
transition:all .5s;/*所有动画效果过渡时间为0.5秒*/
-webkit-transform:rotate(360deg);/*旋转360度*/
}

刚开始我确实对所有的a标签这样设置了，结果极其丧病，后来去掉了正文部分的旋转效果。

css3的旋转动画一例

1 2