css 字体库和动画
@font-face {
font-family:'WebSymbols';
src: url('../font/WebSymbols-Regular.otf');
} .icon{
font-family: "WebSymbols";
}
字体库WebSymbols-Regular的地址:https://pan.baidu.com/s/1WgRdbBXrAbZpHURD9yQ1EA;码:mvq9
/*1. font-face 字体库的引用
2. z-index 层级 只能配合position使用
3. text-shadow/box-shadow 文本/盒子阴影(水平 垂直 放大 颜色)
text-shadow: 3px 3px 5px #777;
动画
4. animation
5. transition 过渡属性
6. transform 形状/元素的变化 */ li{
position: relative;
}
ul li:hover{
transform: scale(1.1);
border-color: #000;
box-shadow: 3px 3px 20px red;
z-index:;
}
ul li:hover .icon{
/*font-size: 60px;*/
/*transform: translateY(0);*/
color: #000;
animation: move 0.3s ease;
}
ul li:hover .main{
color: #000;
animation: move 0.3s ease;
}
@keyframes move{
0%{
/*font-size: 40px;*/
transform: translateY(100%) scale(0.5);
}
100%{
/*font-size: 60px;*/
transform: translateY(0px) scale(1);
color: #000;
}
}
css 字体库和动画的更多相关文章
- CSS在线字体库,外部字体的引用方法
目录: 1:CSS家族五大字体 2:360和谷歌外部字体引用方法 3:谷歌外部字体引用方法详解 4:@font-face用法详解 一: {font-family:serif,sans-serif,fa ...
- Font Awesome,一套绝佳的图标字体库和CSS框架
http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...
- CSS在线字体库,外部字体的引用方法@font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- css引用第三方字体库
对应的CSS文件中如下方式进行字体库的引用: @font-face { font-family: '造字工房情书'; src: url('../fonts/MFQingShu_Noncommercia ...
- 【css】最近使用的两种图标字体库
## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...
- 大众点评评论数据抓取 反爬虫措施有css文字映射和字体库反爬虫
大众点评评论数据抓取 反爬虫措施有css文字映射和字体库反爬虫 大众点评的反爬虫手段有那些: 封ip,封账号,字体库反爬虫,css文字映射,图形滑动验证码 这个图片是滑动验证码,访问频率高的话,会出 ...
- BUTTONS V. 2.0.0——CSS按钮库
BUTTONS-V2-CSS库样式职责 CSS库样式职责分离优点 模块样式命名更清晰化 易于维护.扩展性强 动画效果——修改样式后有过度效果,默认样式 源码如下 <!DOCTYPE html&g ...
- 开始编写寄几的 CSS 基础库
前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量.很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司.这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流 ...
- FontAwesome 图标字体库的使用
在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...
随机推荐
- how to force git to overwritten local files
最佳解决方法 重要提示:如果您有任何本地更改,将会丢失.无论是否有--hard选项,任何未被推送的本地提交都将丢失. 如果您有任何未被Git跟踪的文件(例如上传的用户内容),这些文件将不会受到影响. ...
- HearthBuddy炉石兄弟 如何调试ai
Sepefeets's update to botmaker's Silverfish AI This AI is a Custom Class for Hearthranger and Hearth ...
- Go语言中new和make的区别
Go语言中new跟make是内置函数,主要用来创建分配类型内存. new( ) new(T)创建一个没有任何数据的类型为T的实例,并返回该实例的指针: 源码解析 func new func new(T ...
- CentOS 上 Jenkins 的安装
Jenkins 的前身是 Hudson. Jenkins 是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Dock ...
- docker部署多个mysql容器,并使用java连接
测试springboot多个数据源配置时,需要安装多个mysql容器,由于资源限制,当前只有一台虚拟机,如果在一台机器上安装多个mysql实例,是可以的,但步骤比较繁琐,使用docker来安装MySQ ...
- SpringBoot几种定时任务的实现方式 和多线程执行任务
定时任务实现的几种方式: Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行, ...
- Android视频直播全屏实现
/** * 添加直播组件 */ @SuppressLint("JavascriptInterface") private void addPlayerLive(final Subj ...
- Sqlite的操作示例代码
import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.databa ...
- Springboot将mybatis替换为mybatis-plus
知识点: 1.Mybatis-plus相比mybatis,功能更加强大,简而言之,不需要我们去写mapper.xml配置,但是对于特殊需求的sql语句,还是需要写mapper.xml文件中的sql语句 ...
- 如何修改Zend Studio代码字体和大小
Zend Studio的默认字体非常小,看起来很费神,这里教大家怎么修改它的字体和大小. 工具/原料 Zend Studio 方法/步骤 Window-->preferences ...