html5图标经过效果,17种 HTML5字体图标点赞动画特效源码
17种 HTML5字体图标点赞动画特效源码
2017-07-14 10:51阅读:
贪心学院
VR内容分享
关注
今天给大家展示分享的是
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;
}
}
html5图标经过效果,17种 HTML5字体图标点赞动画特效源码相关推荐
- html点赞代码java_17种 HTML5字体图标点赞动画特效源码
今天给大家展示分享的是 17种 HTML5字体图标点赞动画特效源码! 这里就不一一给大家上图了,大家自己去体验一下 代码过长需要文档版源码来我的前端群581549454,已上传到群文件 废话不多说上源 ...
- html5立体照片墙效果,HTML5特效可以 14种jQuery超酷3D网格照片墙动画特效源码
效果图 各位长友大家好, 今天 给大家带来的是14种jQuery超酷3D网格照片墙动画特效源码! 大家可以按照自己的意愿做成 个人喜欢的样子! 想要文件版源码的,请加穷581549454 废话不多说. ...
- html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图 各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到 ...
- html5 3d引擎 星空,HTML5特效库 用three.js实现3d星空动画特效源码
效果图 各位长友,大家上午好! 今天给大家带来的是 用three.js实现3d星空动画特效源码 大家可以按照自己的意愿进行修改,改成自己喜欢的模样! 若是有想文件版源码的可以进HTML5前端技术交流 ...
- android+酷炫动画效果,Android简单酷炫点击动画(附源码)
在Android5.0之前, Android的点击效果一直很low, 即使5.0的波纹效果也不尽如人意. 而我之前写过一种比较酷炫的点击效果, 最近抽了点时间完善一下, 把阴影效果加入了进去, 大家先 ...
- html5立体照片墙效果,jQuery超酷3D网格照片墙动画特效 -HTML5功能
作为网格容器,和一个按钮来触发动画效果. Animate CSS样式 在网格容器上设置了固定的宽度和高度,为了制作3D效果,还设置了perspective: 500px;.每一张图片也设置了固定的宽度 ...
- html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图 各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果!前端开发网页设计基础入门教程!超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: < ...
最新文章
- 曝光原理_PS教程:双重曝光的原理及制作过程,魔术棒及调整边缘的简易抠图...
- C116实验室里故事
- ROS学习(八):ROS URDF-transmission
- 着眼未来!2019未来杯高校AI挑战赛圆满落幕
- response.setcharacterencoding 报错是缺哪个包_出街,你缺的是这一款包包...
- linux 0660 权限,CentOS 6上安装RAC权限绑定问题
- 个人博客系统的设计与实现_一款小而美的博客系统,专为程序员设计
- 【算法习作】荷兰国旗问题
- 上市公司降价200万卖房仍然无人接手,有的甚至降价1900万
- c语言 程序延时 校准,c语言实现系统时间校正工具代码分享
- window安装gcc编译器
- 快速掌握 JavaScript 库必备的 5 大技巧!
- Windows 10部署与管理指南(1)之环境准备篇
- poi导出使用HSSFWorkbook行数超出
- Echarts 2dMap阴影,多个map分层现象以及飞线飞机航线
- W ndows路由设置,windows下的双线双IP智能路由配置方法
- OpenRisc-27-wishbone接口的vga ipcore的分析与仿真
- ubuntu18.04双系统解决进入桌面后鼠标和键盘失灵问题
- 初探~对ipa包进行混淆处理
- Cadence 应用注意事项--转载
热门文章
- 水泵 KQDQ65-32×1 是什么意思
- interview_python
- Paddlehub创意赛---给人像增加背景
- 利用websocket+Vuex完成一个实时聊天软件(前端部分)
- 用Python批量生成文件夹
- OpenCV-图像无缝克隆函数演示(c++)
- 2022年全球白帽常用工具排行榜
- IDEA2019.3中文包改中文
- python Trie树和双数组TRIE树的实现. 拥有3个功能:插入,删除,给前缀智能找到所有能匹配的单词...
- 苹果驱动开发的三种类型(dext、sext、kext)