纯css实现星级评分效果使用说明_效果基础知识入门

效果效果图如下,纯css实现超酷炫的星级评分动画效果实现思路5个类型为radio的input,label标签修改样式背景图为星星label标签给每个星星鼠标停留时加注名字点击星星有放大旋转的动画dom结构用form实现<input type="radio" id="rate5" name="rating" va

纯css实现星级评分效果使用说明

效果

效果图如下,纯css实现超酷炫的星级评分动画效果

纯css实现星级评分效果使用说明_效果基础知识入门

纯css实现星级评分效果使用说明_效果基础知识入门

纯css实现星级评分效果使用说明_效果基础知识入门

实现思路

  1. 5个类型为radio的input,label标签修改样式背景图为星星
  2. label标签给每个星星鼠标停留时加注名字
  3. 点击星星有放大旋转的动画

dom结构

用form实现

<form>
    <div class="star">
        <input type="radio" id="rate5" name="rating" value="5">
        <label for="rate5" title="Amazing"></label>

        <input type="radio" id="rate4" name="rating" value="4">
        <label for="rate4" title="Good"></label>

        <input type="radio" id="rate3" name="rating" value="3">
        <label for="rate3" title="Average"></label>

        <input type="radio" id="rate2" name="rating" value="2">
        <label for="rate2" title="Not good"></label>

        <input type="radio" id="rate1" name="rating" value="1">
        <label for="rate1" title="Terrible"></label>
    </div>
</form>

css样式

css按步骤来实现,

1、星星图片样式

首先是星星图片嘛~

纯css实现星级评分效果使用说明_效果基础知识入门

.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,按着步骤来,你也可以在你的页面上实现酷炫的星级评分效果咯~

海计划公众号
(0)
上一篇 2020/03/26 23:30
下一篇 2020/03/26 23:30

您可能感兴趣的内容

  • cocoscreator 防止button连击多次触发事件入门攻略_事件使用帮助

    很多时候,ui上面的button都只需要单击触发一次,当用户快速连续点击时就有可能出现非意料的事情,解决这个问题很简单,只要规定button在指定间隔时间内只能触发一次就行。将下面的代码保存为ButtonSafe.js, 只需要给每个button控件添加下面的脚本并指定间隔时间即可防止重复点击。/*** Created by skyxu on 2018/9/

    2020/03/23
  • 一张图理清 Vue 3.0 的响应式系统小白帮助_响应式基础知识教程

    随着 Vue 3.0 Pre Alpha 版本的公布,我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统,而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多,网上的分析文章也有一堆,但是要想清晰地理解响应式原理的具体实现过程,还是挺费脑筋的事情。经过一天的研究和整理,我把其响应式系统的原理总

    2020/03/23
  • ypppt菜鸟教程_高质量的免费PPT模板下载网站

    ypppt菜鸟教程 官方网址:http://www.ypppt.com/ 简介描述:高质量的免费PPT模板下载网站 优品PPT模板网是一家专注于分享高质量的免费PPT模板下载网站,…

    2020/03/10
  • JVM 发生 OOM 的 8 种原因、及解决办法入门攻略_java入门基础知识

    1. Java 堆空间发生频率:5颗星造成原因1、无法在 Java 堆中分配对象 2、吞吐量增加 3、应用程序无意中保存了对象引用,对象无法被 GC 回收 4、应用程序过度使用 finalizer。finalizer 对象不能被 GC 立刻回收。finalizer 由结束队列服务的守护线程调用,有时 finalizer 线程的处理能力无法跟上结束队列的增长解

    2020/03/30
  • CSS定位Position属性小白攻略_属性小白知识

    用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题;这就要用到Position属性。 Position属性有四个值:static、fixed、absolute和relative。后面两个值在布局中的定位里是经常用到的,顾名思义:● absolute是指绝对定位即将对象从文档流中拖出,使用left,right,top,bottom等属

    2020/03/20
  • 从.env文件中为Node.js加载环境变量入门攻略_变量基础知识

    使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。存储环境变量的一种方法是将它们放在 .env 文件中。这些文件允许你指定各种环境变量及其相应的值。在大多数情况下,你不希望将 .env 文件添加到源代码控制中(即Git)。因此,应该将它的文件名添加到 .gitignore 文件中,以

    2020/03/29
  • JavaScript中怎么调用函数?基础知识入门_函数小白入门

    JavaScript怎么调用函数?其实在JavaScript中函数有4种调用方式。下面本篇文章就来给大家介绍一下JavaScript函数的4种调用方式,希望对大家有所帮助。JavaScript函数有4种调用方式,每种方式的不同在于 this 的初始化。this 关键字this 是保留关键字。一般而言,在Javascript中,this指向函数执行时的当前对象

    2020/03/20
  • 低效程序员的 5 个坏习惯基础入门_程序员使用帮助

    有些程序员比其他程序员更优秀。事实上,程序员群体也符合一个普遍的统计分布规律:只有少数人真的是聪明绝顶,有一些人很优秀,而大多数人至少算是能力尚可,有一些人几乎没啥能耐,还有一些人真的糟糕透顶。这也就是说, 一个优秀的 程序员 和一个糟糕的程序员,它们之间的差别并不一定是编码技能。事实上,这个差异存在于一些更基本的东西中,即个人的坏习惯。众所周知,人们在生活

    2020/03/26
  • js中的相等==入门基础教程_运算基础知识入门

    概述今天学习 jest,看文档的时候发现 jest 用到了 Object.is(),以前没有见过,所以记录下来,供以后开发时参考,相信对其他人也有用。Object.is如果下列任何一项相同,则 Object.is(value1, value2) 返回 true:两个值都是 undefined两个值都是 null两个值都是 true 或者都是 false两个值

    2020/03/26
  • 站长之家基础知识_为站长提供常用站长工具

    站长之家基础知识 官方网址:http://www.webmasterhome.cn/ 简介描述:为站长提供常用站长工具 站长之家提供网站综合信息查询,包括搜索引擎收录查询,反向链接…

    2020/03/06
  • 男生怎样做容易追到女生,帮你快速追上女神基础知识入门_福利菜鸟教程下载

    小编教你快速追上你的女神。一起来学习一下吧!首先,在你决定追女生之前先要确认她有没有男朋友然后还要了解女生的星座、爱好、三围、喜欢的偶像以及喜欢吃些什么等问题调查完之后就开始追记住一定要做到三点坚持不要脸坚持不要脸这些事情完成后,就开始去追吧!1制造偶遇 ​从她身边的人下手。收拢她的好朋友,知道她随时爱去哪里,来制造偶遇.2.帮助她解决生活中的一些事情

    2020/03/23
  • 程序员客栈基础入门_领先的程序员自由工作平台

    程序员客栈基础入门 官方网址:https://www.proginn.com/ 简介描述:领先的程序员自由工作平台 程序员客栈是领先的程序员自由工作平台,未来互联网企业用人方式。提…

    2020/03/06
  • node-postgres【pg】指南教程_在nodejs中用来连接PostgreSql数据库的模块

    node-postgres【pg】指南教程 官方网址:https://node-postgres.com GitHub:https://github.com/brianc/node…

    2020/03/06
  • TypeScript基础类型与联合类型基础知识_类型小白入门

    TypeScript对它的学习其实是在前年就开始了,后面一直没有机会在项目中使用,直到最近我司开发小程序,使用京东的taro才算真正了。使用的过程中,发现对其基本知识点并没有通透,所以才想到要记录学习的过程。在使用的过程中,它最大的特点其实就是数据类型的定义。基础类型的定义字符串类型let name: string = ‘Mondo’布尔类型let isDo

    2020/03/29
  • vue封装websocket心跳包小白帮助_websocket使用帮助

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。这套代码可以拿过去直接用 一些注意我会在下

    2020/03/23
  • eruda使用教程_一个专为手机网页前端设计的调试面板

    eruda使用教程 官方网址:https://eruda.liriliri.io/ GitHub:https://github.com/liriliri/eruda 简介描述:一个…

    2020/03/06