html5超酷苹果风格,CSS3 苹果应用商店风格的5星评价组件
CSS
语言:
CSSSCSS
确定
body {
background: #000;
}
.review-holder {
position: relative;
clear: both;
display: inline-block;
left: calc(50% - 50px);
margin-top: 10%;
}
.review:hover span {
color: red;
}
.review:hover span:before {
content: "\e600";
}
.review span {
-webkit-box-reflect: below -8px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.3)));
float: left;
padding: 0 2px;
color: #fff;
cursor: pointer;
}
.review span:after {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
}
.review span:hover:after {
content: attr(data-description);
position: absolute;
left: calc(100% + 10px);
white-space: nowrap;
color: #fff;
}
.review span:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e601";
font-family: 'apple';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.review span:hover ~ span {
color: #fff;
}
.review span:hover ~ span:before {
content: "\e601";
}
@font-face {
font-family: 'apple';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6SAysAAAC8AAAAYGNtYXAaVcxYAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZqrfI3MAAAFwAAAA1GhlYWQD07CSAAACRAAAADZoaGVhB4UDxwAAAnwAAAAkaG10eAoAAHoAAAKgAAAAGGxvY2EAkgBOAAACuAAAAA5tYXhwAAkAGAAAAsgAAAAgbmFtZa5zCdEAAALoAAABM3Bvc3QAAwAAAAAEHAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAQPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYB//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQA9AAoDwwOPAAkAAAETIQUTJQUTJSECAHoBSf70X/7q/upf/vQBSQOP/qjK/p3V1QFjygAAAAACAD0ACgPDA48ACgAVAAABIQsBIQUDJQUDJQUHNycXNxc3BxcnA8P+t3p6/rcBDF8BFgEWXwEM/j2aP5K1ODi0kT+aAjcBWP6oyv6d1dUBY8r0gLd1Bc/PBXW3gAAAAAABAAAAAQAADdS5fF8PPPUACwQAAAAAANB5NgMAAAAA0Hk2AwAAAAADwwOPAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAPDAAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAgAAAAQAAD0EAAA9AAAAAAAKABQAHgA6AGoAAAABAAAABgAWAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEACgAAAAEAAAAAAAIADgA5AAEAAAAAAAMACgAgAAEAAAAAAAQACgBHAAEAAAAAAAUAFgAKAAEAAAAAAAYABQAqAAEAAAAAAAoANABRAAMAAQQJAAEACgAAAAMAAQQJAAIADgA5AAMAAQQJAAMACgAgAAMAAQQJAAQACgBHAAMAAQQJAAUAFgAKAAMAAQQJAAYACgAvAAMAAQQJAAoANABRAGEAcABwAGwAZQBWAGUAcgBzAGkAbwBuACAAMQAuADAAYQBwAHAAbABlYXBwbGUAYQBwAHAAbABlAFIAZQBnAHUAbABhAHIAYQBwAHAAbABlAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASIAAsAAAAABDwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDpIDK2NtYXAAAAFoAAAATAAAAEwaVcxYZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAANQAAADUqt8jc2hlYWQAAAKQAAAANgAAADYD07CSaGhlYQAAAsgAAAAkAAAAJAeFA8dobXR4AAAC7AAAABgAAAAYCgAAemxvY2EAAAMEAAAADgAAAA4AkgBObWF4cAAAAxQAAAAgAAAAIAAJABhuYW1lAAADNAAAATMAAAEzrnMJ0XBvc3QAAARoAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gEDwP/A/8ADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAf/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAPQAKA8MDjwAJAAABEyEFEyUFEyUhAgB6AUn+9F/+6v7qX/70AUkDj/6oyv6d1dUBY8oAAAAAAgA9AAoDwwOPAAoAFQAAASELASEFAyUFAyUFBzcnFzcXNwcXJwPD/rd6ev63AQxfARYBFl8BDP49mj+StTg4tJE/mgI3AVj+qMr+ndXVAWPK9IC3dQXPzwV1t4AAAAAAAQAAAAEAAA3UuXxfDzz1AAsEAAAAAADQeTYDAAAAANB5NgMAAAAAA8MDjwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADwwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAIAAAAEAAA9BAAAPQAAAAAACgAUAB4AOgBqAAAAAQAAAAYAFgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAoAAAABAAAAAAACAA4AOQABAAAAAAADAAoAIAABAAAAAAAEAAoARwABAAAAAAAFABYACgABAAAAAAAGAAUAKgABAAAAAAAKADQAUQADAAEECQABAAoAAAADAAEECQACAA4AOQADAAEECQADAAoAIAADAAEECQAEAAoARwADAAEECQAFABYACgADAAEECQAGAAoALwADAAEECQAKADQAUQBhAHAAcABsAGUAVgBlAHIAcwBpAG8AbgAgADEALgAwAGEAcABwAGwAZWFwcGxlAGEAcABwAGwAZQBSAGUAZwB1AGwAYQByAGEAcABwAGwAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("woff");
font-weight: normal;
font-style: normal;
}
html5超酷苹果风格,CSS3 苹果应用商店风格的5星评价组件相关推荐
- html表单模板属性,HTML5超酷响应式表单美化模板插件
这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件.表单的整体效果使用扁平化风格,使用media queries来为各种屏幕创建响应式效果.在大屏幕上,整个表单分三列显示,当屏幕小到一定程度 ...
- HTML5超酷新特性WebSockets初体验
人人网Web前端开发工程师暴风彬彬(网名),在个人网站彬Go上发表了一篇博文<HTML5 WebSockets 基础使用教程>,和大家一起分享了如何利用HTML5超酷新特性WebSocke ...
- php插入html动态背景,HTML5超酷响应式视频背景动画特效
简要教程 这是一款HTML5超酷响应式视频背景动画特效.该视频背景可以将视频自适应屏幕的大小,制作出炫酷的动态视频背景效果. 使用方法 在页面中引入bideo.js文件. HTML结构 该视频背景动画 ...
- 8个超酷炫的仿苹果应用的HTML5动画
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
- html5超酷单页面,精选10款超酷的HTML5/CSS3菜单
原标题:精选10款超酷的HTML5/CSS3菜单 今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用 ...
- 16款最佳HTML5超酷动画演示及源码
1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...
- css标签3d,超酷的js+css3实现的3D标签云特效
此作品是一款超酷的3D标签云 核心功能代码如下: function doPosition(){ var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHei ...
- Html5图片翻页制作,HTML5超酷名片盒风格3D翻页图片画廊
在前面我们讲解了一个使用纯CSS制作3D百叶窗效果,今天我们要来制作一个类似名片盒的3D翻页图片画廊.在这个效果中,我们将使用一个HTML5 range输入框元素来控制图片画廊的前后翻页.这个rang ...
- 超酷!纯CSS3烧烤动画实现教程
今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...
最新文章
- Java锁详解之改进读写锁StampedLock
- JBPM学习笔记(1)
- leetcode1290. 二进制链表转整数 刷新认知,最简单算法题
- helpdesk2 foxmail和outlook互导问题
- C++ 的 allocator类 提供类型化的内存分配以及对象的分配和撤销
- iOS Json解析框架之MJExtension使用详解
- Java中的volatile的作用和synchronized作用
- 用递归和非递归实现斐波那契数列
- windows环境elasticsearch安装IK分词器
- 游戏开发新手快速入门指南
- python计算圆锥体积和表面积_圆柱和圆锥表面积和体积的计算练习
- 手机不能访问html文件,手机如何解决禁止访问网页
- ps读写ddr3里面的数据 zynq_DDR3读写数据调试
- 手机拍证件照的工具哪个好用
- 如何将多个excel表格合并成一个_怎么将多个pdf文件合并成一个?
- 新零售saas小程序如何探索数字化门店的破局之路?
- 微贷七年之痒:重线下、追科技、争存量,能否赢未来?
- 服务器集群有哪些类型
- 搭建nexus私服:nexus-3.19.1-01
- 易语言EIDE助手(内测体验版),更便捷好用的易语言助手。
热门文章
- worpdress3.4版本去掉分类目录前缀category
- 方舟找不到玩过的服务器,方舟怎么找以前玩过的服务器 | 手游网游页游攻略大全...
- Oracle数据量多大走索引,为什么大于等于不走索引?等于就走索引?数据量都差不多...
- 【车辆CAN通讯系列】1 CAN通讯基础——物理层概述
- 奶爸日记 - 戒掉抱着睡的习惯
- 店口镇残疾人之家开展山水花卉盆景制作培训活动
- 网页交互设计基本概念
- 阿里云移动研发平台体验报告
- 浅谈wheel滚轮事件(兼容触摸板多次触发)
- 2021年N1叉车司机模拟考试及N1叉车司机复审模拟考试