【玩转前端】-前端效果之纯css的评分

熟读唐诗三百首,不会作诗也会诹。

差不多每个行业做久了,就能孰能生巧了吧?

今天和大家分享没有js的纯CSS打造的效果世界。

222.gif

当然,我们是在干掉IE的前提下。

呵呵,这年头,谁还管IE呀!~

据美国科技博客网站Mashable报道,微软开通了一家名为“IE6倒计时”(IE6Countdown)的网站,以呼吁全球网民停止使用时间已长达10年的微软IE6浏览器。

QQ截图20170719175003.png

IE6的坑太深,今天就是给它造坟墓的时刻了。

用了css选择器,腰也不酸了,腿也不疼了,幸福指数直线UP了。

言归正传,今天分享的----前端效果之纯CSS的评分。

你需要get的技能包:

1.HTML标签:

fieldset 元素可将表单内的相关元素分组。

input 如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

2.CSS选择器:

:before 在元素的内容之前插入内容。

:checked 选择每个被选中的 <常为input> 元素。

:not(:checked) 选择非 选中 元素的每个元素。

:active 选择活动链接。

:hover 选择鼠标指针位于其上的链接。

> 选择父元素 前 元素的所有 后 元素。

~ 选择前面有 前 元素的每个 后 元素。

下面来开始DO IT:如果你开通快写功能,只要一个!按一下Tab就出来了HTML框架

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端效果之纯css的评分</title>
</head>
<body>

</body>
</html>

在body标签中写出如下结构:

快写div.star-rating>fieldset>(input[id=start$][value=$][type=radio][name=rating]+label[for=start$][title=]{$ star})*5然后按Tab键

<div class="star-rating">
<fieldset>
<input type="radio" id="start1" value="1" name="rating">
<label for="start1" title="">1 star</label>
<input type="radio" id="start2" value="2" name="rating">
<label for="start2" title="">2 star</label>
<input type="radio" id="start3" value="3" name="rating">
<label for="start3" title="">3 star</label>
<input type="radio" id="start4" value="4" name="rating">
<label for="start4" title="">4 star</label>
<input type="radio" id="start5" value="5" name="rating">
<label for="start5" title="">5 star</label>
</fieldset>
</div>

最重要的部分就是css部分了,敲黑板啦!~

.star-rating {
  margin: 50px auto;
}
.star-rating > fieldset {
  border: none;
  display: inline-block;
}
.star-rating > fieldset:not(:checked) > input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}
.star-rating > fieldset:not(:checked) > label {
  float: right;
  width: 1em;
  padding: 0 .05em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 200%;
  color: yellow;
}
.star-rating > fieldset:not(:checked) > label:before {
  content: '☆  ';
}

首先最外层是为了好看,加了一个居中的效果。

然后是fieldest标签,表单自带边框样式,所以需要清除border。

后面就是给Input剪掉,clip:rect(0,0,0,0);

label设置排版,浮动向右,内边距,不换行,默认颜色等,

给label的前置before添加内容,即五角星的形状。

.star-rating > fieldset:not(:checked) > label:hover,
.star-rating > fieldset:not(:checked) > label:hover ~ label {
  color: orange;
  text-shadow: 0 0 3px #1abc9c;
}
.star-rating > fieldset:not(:checked) > label:hover:before,
.star-rating > fieldset:not(:checked) > label:hover ~ label:before {
  content: '☆  ';
}
.star-rating > fieldset > input:checked ~ label:before {
  content: '☆  ';
  color:orange;
}
.star-rating > fieldset > label:active {
  position: relative;
  top: 2px;
}

下面处理感应时的效果。

感应时,颜色改变。

因为点击事件触发时,label标签对应的input标签会被选中,

当input的checked成立时,label颜色发生变化,就成就了css控制评分的效果啦!~

body {
  background: #262829;
  color: #95a5a6;
  text-align: center;
}

为了效果清晰,我们给body设置成黑色,这是把感应做成动画。具体样子,自己试试去吧!~

222.gif

今天先玩到这里,我们下期再约!~~

1条评论