html点赞代码java_17种 HTML5字体图标点赞动画特效源码
今天给大家展示分享的是
17种 HTML5字体图标点赞动画特效源码!
这里就不一一给大家上图了,大家自己去体验一下
代码过长需要文档版源码来我的前端群581549454,已上传到群文件
废话不多说上源码
.icobutton {
font-size: 3em;
position: relative;
margin: 0;
padding: 0;
color: #c0c1c3;
border: 0;
background: none;
overflow: visible;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.icobutton .fa {
display: block;
padding: 0 0.1em;
}
.icobutton__text {
font-size: 0.75em;
position: absolute;
top: 100%;
left: -50%;
width: 200%;
text-align: center;
line-height: 1.5;
color: #a6a6a6;
}
.icobutton__text--side {
top: 0;
left: 100%;
width: 100%;
width: auto;
padding: 0 0 0 0.25em;
}
.icobutton svg {
left: 0;
}
.icobutton:hover,
.icobutton:focus {
outline: none;
}
.icobutton--unicorn svg {
fill: #c0c1c3;
}
CSS源码2:
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?rretjt');
src:url('../fonts/icomoon.eot?#iefixrretjt')
format('embedded-opentype'),
url('../fonts/icomoon.woff?rretjt') format('woff'),
url('../fonts/icomoon.ttf?rretjt') format('truetype'),
url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica,
Arial, sans-serif;
counter-reset: gridcounter;
color: #000;
background: #f9f9f9;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: #999;
outline: none;
}
a:hover,
a:focus {
color: #000;
outline: none;
}
.special-link {
position: relative;
color: #f64040;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.special-link svg {
left: 0;
}
.special-link:hover,
.special-link:focus {
color: #D52828;
}
.zzsc-container{
margin: 0 auto;
overflow: hidden;
}
.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }
.bgcolor-4 { background: #2f3238; color: #fff; }
.bgcolor-5 { background: #df6659; color: #521e18; }
.bgcolor-6 { background: #2fa8ec; }
.bgcolor-7 { background: #d0d6d6; }
.bgcolor-8 { background: #3d4444; color: #fff; }
.bgcolor-9 { background: #ef3f52; color: #fff;}
.bgcolor-10{ background: #64448f; color: #fff;}
.bgcolor-11{ background: #3755ad; color: #fff;}
.bgcolor-12{ background: #3498DB; color: #fff;}
.bgcolor-20{ background: #494A5F;color: #D5D6E2;}
.zzsc-header{
padding: 1em 190px 1em;
letter-spacing: -1px;
text-align: center;
background: #66677c;
}
.zzsc-header h1 {
color: #D5D6E2;
font-weight: 600;
font-size: 2em;
line-height: 1;
margin-bottom: 0;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande",
Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.zzsc-header h1 span {
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande",
Helvetica, Arial,sans-serif, FreeSans, Arimo;
display: block;
font-size: 60%;
font-weight: 400;
padding: 0.8em 0 0.5em 0;
color: #c3c8cd;
}
.grid {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 0;
list-style: none;
max-width: 60em;
margin: 3em auto 0;
}
.grid__item {
position: relative;
text-align: center;
background: #f0f0f0;
margin: 0 0 5em;
width: 100%;
min-height: 36em;
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
}
.grid__item::before {
content: counter(gridcounter);
font-size: 5.5em;
font-weight: bold;
line-height: 1;
position: absolute;
bottom: 0;
left: 0;
counter-increment: gridcounter;
text-align: center;
color: #2b2929;
font-family: 'Patrick Hand SC', cursive;
-webkit-transform: translate3d(0.2em,50%,0);
transform: translate3d(0.2em,50%,0);
}
.zzsc-demo a{color: #fff;text-decoration: none;}
.zzsc-demo{width: 100%;padding-bottom: 1.2em;}
.zzsc-demo a{display: inline-block;margin: 0.5em;padding: 0.6em
1em;border: 3px solid #fff;font-weight: 700;}
.zzsc-demo a:hover{opacity: 0.6;}
.zzsc-demo a.current{background:#1d7db1;color: #fff; }
.zzsc-links {
position: relative;
display: inline-block;
white-space: nowrap;
font-size: 1.5em;
text-align: center;
}
.zzsc-links::after {
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #dbdbdb;
content: '';
-webkit-transform: rotate3d(0,0,1,22.5deg);
transform: rotate3d(0,0,1,22.5deg);
}
.zzsc-icon {
display: inline-block;
margin: 0.5em;
padding: 0em 0;
width: 1.5em;
text-decoration: none;
}
.zzsc-icon span {
display: none;
}
.zzsc-icon:before {
margin: 0 5px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'icomoon';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.zzsc-footer{width: 100%;padding-top: 10px;}
.zzsc-small{font-size: 0.8em;}
.center{text-align: center;}
.related {
color: #fff;
background: #494A5F;
text-align: center;
font-size: 1.25em;
padding: 0.5em 0;
overflow: hidden;
}
.related > a {
vertical-align: top;
width: calc(100% - 20px);
max-width: 340px;
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande",
Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.related a {
display: inline-block;
text-align: left;
margin: 20px auto;
padding: 10px 20px;
opacity: 0.8;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
.related a:hover,
.related a:active {
opacity: 1;
}
.related a img {
max-width: 100%;
opacity: 0.8;
border-radius: 4px;
}
.related a:hover img,
.related a:active img {
opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;}
.related a h3 {
font-weight: 300;
margin-top: 0.15em;
color: #fff;
}
.icon-zzsc-home-outline:before {
content: "\e5000";
}
.icon-zzsc-arrow-forward-outline:before {
content: "\e5001";
}
@media screen and (max-width: 50em) {
.zzsc-header {
padding: 3em 10% 4em;
}
.zzsc-header h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
.zzsc-header h1 {
font-size: 1.5em;
}
}
@media screen and (max-width: 30em) {
.zzsc-header h1 {
font-size:1.2em;
}
}
html点赞代码java_17种 HTML5字体图标点赞动画特效源码相关推荐
- html5图标经过效果,17种 HTML5字体图标点赞动画特效源码
17种 HTML5字体图标点赞动画特效源码 2017-07-14 10:51阅读: 贪心学院 VR内容分享 关注 今天给大家展示分享的是 17种 HTML5字体图标点赞动画特效源码! 这里就不一一给大 ...
- html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图 各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到 ...
- html5立体照片墙效果,HTML5特效可以 14种jQuery超酷3D网格照片墙动画特效源码
效果图 各位长友大家好, 今天 给大家带来的是14种jQuery超酷3D网格照片墙动画特效源码! 大家可以按照自己的意愿做成 个人喜欢的样子! 想要文件版源码的,请加穷581549454 废话不多说. ...
- html星空代码在线,HTML5特效库 HTML5+JS全屏星空特效源码
效果图 各位长友大家早上好! 今天给各位带来的是 HTML5+JS全屏星空特效源码! 有想要文件版源码的可以私聊小编哦! 废话不多说,上源码! CSS: body {margin:0 auto;ove ...
- html5 3d引擎 星空,HTML5特效库 用three.js实现3d星空动画特效源码
效果图 各位长友,大家上午好! 今天给大家带来的是 用three.js实现3d星空动画特效源码 大家可以按照自己的意愿进行修改,改成自己喜欢的模样! 若是有想文件版源码的可以进HTML5前端技术交流 ...
- html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图 各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
- 九、HTML5空间粒子背景动画特效
文章目录 九.HTML5空间粒子背景动画特效 9.1 图片预览 9.2 index.html代码 9.3 index.js代码 9.4 gameCanvas-3.0.js代码 九.HTML5空间粒子背 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: < ...
- 【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
最新文章
- Java 8 Date-Time API 详解
- 基于STM32的SPI基本介绍
- Java笔记-对tomcat进一步认识
- 【转】Java学习---内存溢出的排查经历
- web后端http协议使用过程中安全防范及https协议实现原理
- OPNET网络仿真分析-1.1.2、OPNET简介
- 市场主流单片机的介绍和选择指南
- GetTickCount函数
- 智慧交通day02-车流量检测实现13:基于虚拟线圈法的车辆统计+视频中的车流量统计原理解析
- 计算机技能是啥,简历中的IT技能是什么意思?
- 【Python-tkinter】拼音输入方法——小学拼音练习题
- HTML5页面结构标签
- 预演:使用 TensorFlow 进行深度学习
- 时钟晶振电路EMC设计标准电路详解
- 少儿编程微课程14:对称图形的模拟验证
- 下一代数据架构Data Fabric到底是什么?
- android 日历动画的实现
- 2023年软考时间流程安排:
- 安科瑞变电所运维云平台AcrelCloud-1000实时监测
- 手机投屏到电脑 -- 小黑超细日常教程
热门文章
- Object常用的几种方法
- 虚拟机mac 与主机的网络共享
- 【AutoGPT】LangChain 快速入门指南(中文版)
- java编程题-猜数字游戏
- (全网最详细教程)康耐视读码器(以DM260S为例子)详细实用步骤
- HDD/SSD基础知识及工作原理
- 万亿市值“唾手可得“,但“宁德时代“还未到来
- 1.gstreamer USB摄像头保存至图片及视频
- EPS行业-预发机的WinFrom控制软件
- 4个要点,解析MVP产品怎么做?