html css星级评分,纯css实现星级评分效果

效果

效果图如下

星级评分

实现思路：

5个类型为radio的input，abel标签修改样式背景图为星星

label标签给每个星星鼠标停留时加注名字

点击星星有放大旋转的动画

dom结构

用form实现

css样式

css按步骤来实现

1、星星图片样式

首先是星星图片嘛~

星星

.star{

display: block;

position: relative;

width: 150px;

height: 60px;

padding: 0;

border: none;

}

.star > input{

position: absolute;

margin-right: -100%;

opacity: 0;

}

.star > label{

position: relative;

display: inline-block;

float: right;

width: 30px;

height: 30px;

color: transparent;

background-image: url("../rotate-star/images/starIcon.png");

background-repeat: no-repeat;

}

2、点击星星的时候，灰星星变黄星星，顺便把input点击的外边框去掉，巨丑

.star > input:focus + label{

outline: none;

}

.star > input:checked~label,

.star > input:focus~label,

.star > input:hover~label{

background-position: 0 -30px;

}

3、通过before伪元素，新增一个隐藏着的星星，来做旋转放大的动画

.star > label:before{

display: none;

position: absolute;

content: " ";

width: 30px;

height: 30px;

background-image: url("../rotate-star/images/starIcon.png");

background-repeat: no-repeat;

bottom: 0;

}

.star > input:checked + label:before{

display: block;

animation-name: rotateStar;

animation-duration: 1s;

animation-fill-mode: forwards;

}

@keyframes rotateStar{

0%{

transform: scale(1) rotate(0);

}

95%{

transform: scale(4) rotate(90deg);

opacity: 0;

}

100%{

transform: scale(1) rotate(0);

opacity: 0;

}

OK，按着步骤来，你也可以在你的页面上实现酷炫的星级评分效果咯~

html css星级评分,纯css实现星级评分效果相关推荐

html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
[css] 怎样用纯CSS实现禁止鼠标点击事件？
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...
查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码这是前端开发博客的正文点击展开全文将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码纯css实现wif ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
马自达css滑动按钮,纯css的滑块开关按钮
之前在项目中使用滑块开关按钮,纯css写的,不考虑兼容低版本浏览器,先说下原理: 使用 checkbox 的选中 checked 属性改变css 伪类样式, 一定要使用-webkit-appeara ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

html css星级评分,纯css实现星级评分效果

html css星级评分,纯css实现星级评分效果相关推荐

最新文章

热门文章