css3: 基本知识记录
1、transition过渡;
元素从一种样式到另一种样式添加效果;
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
2、动画(@keyframes, animation);
@keyframes:用于创建动画;创建由当前样式逐渐为新样式的动画效果;
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
} @-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
} @-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
} @-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
上面是定义动画规则;
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
将myfirst动画绑定到div上;
3、导航伸缩;
@media screen and (max-width: 1200px) { //1200px以上,导航侧边栏出现,占总宽度的30%;
#fh5co-aside {
width: 30%;
}
}
@media screen and (max-width: 768px) { //768px以下, 导航侧边缩进去;
#fh5co-aside {
width: 270px;
-moz-transform: translateX(-270px);
-webkit-transform: translateX(-270px);
-ms-transform: translateX(-270px);
-o-transform: translateX(-270px);
transform: translateX(-270px);
}
}
4、div固定位置
position: fixed; 固定位置,不随页面滚动;
注: 该博文为扩展型;
css3: 基本知识记录的更多相关文章
- Web前端理论知识记录
Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...
- C#基础知识记录一
C#基础知识记录一 static void Main(string[] args) { #region 合并运算符的使用(合并运算符??) 更多运算符请参考:https://msdn.microsof ...
- CSS3 基础知识
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- CSS3 基础知识[转载minsong的博客]
CSS3 基础知识1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0 ...
- DataBase MongoDB基础知识记录
MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...
- MongoDB基础知识记录
MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...
- 关于Excel做表小知识记录
关于Excel做表小知识记录 最近使用Excel做了一系列的报表,觉得这是个很神奇的东西哈哈哈,以前我可是一想到Excel就开始头疼的人... 能用代码或者SQL语句解决的问题绝不会愿意留在Exce ...
- Maven知识记录(一)初识Maven私服
Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...
- Linux文件系统知识记录——ext2描述
最近完成了一个编程作业,大致功能是给定一个文件名,给出该文件所在目录和其本身所占用的簇号等信息.笔者选用了Linux的ext系列文件系统作为实验对象,通过实验对ext2文件系统的存储和索引有了一个较为 ...
随机推荐
- linux固定IP
在新安装的Linux系统命令行下, 敲入:ifconfig,显示如下界面. 上面这张图显示网卡没有启动,那么我们敲入代码:ifup eth0启动网卡. 网卡启动后,我们可以看出,IP地址和网关等其他信 ...
- 学习 Spring (十三) AOP 配置
Spring入门篇 学习笔记 Spring 所有的切面和通知器都必须放在一个 内(可以配置包含多个 元素),每一个 可以包含 pointcut, advisor 和 aspect 元素(它们必须按照这 ...
- Nginx websocket反向代理
L:106 现在主流的反向代理,通过长链接可以从服务器推送数据到页面 升级成websocket反向代理必须根据上面的配置做配置 缺点无法多路复用,也就是没办法并行 我们测试下Websocket反向代理 ...
- ftell 的使用
ftell一般用于读取文件的长度,下面补充一个例子,读取文本文件中的内容: #include <stdio.h> #include <stdlib.h> int main() ...
- git 解决二进制文件冲突
1.冲突的产生 当我们向远程git服务器提交某一个文件的修改时,恰巧这个文件相同的修改地方其他人也有修改,并且已经提交到服务器,这时冲突就产生了. 通常,当我们合并两个相同的地方都有修改的分支时,都会 ...
- MySQL各版本解释和下载
MySQL 的官网下载地址:http://www.mysql.com/downloads/ 个人理解: 1.不要再纠结是否是5.1还是5.5.5.6.5.7这些,一般选择时不要选择太新,选择5.1或者 ...
- BZOJ4482[Jsoi2015]套娃——贪心+set
题目描述 [故事背景] 刚从俄罗斯旅游回来的JYY买了很多很多好看的套娃作为纪念品!比如右 图就是一套他最喜欢的套娃J.JYY由于太过激动,把所有的套娃全 部都打开了.而由于很多套娃长得过于相像,JY ...
- Android 右上角菜单栏
1 创建菜单栏 在res下新建menu文件夹,并且创建righttopmenu.xml righttopmenu.xml: <?xml version="1.0" encod ...
- 洛谷P1582 倒水题解
题目 分析 这个题并不难,只是需要仔细思考我们首先可以很轻松的把这个题给疏通一下题意. 1:首先我们最后每个瓶子中装的水一定是一个$2^x$,因为每次都是$2$倍的加,这个应该很好理解. 2:我们要明 ...
- 【XSY2767】朋友 广义后缀自动机 网络流
题目描述 懒得写了...直接贴题面 $\sum n\leq5000,1\leq S_{i,j}\leq k\leq 1000 $ 题解 先建出广义sam. 可以发现朋友的出现位置的定义符合后缀自动机的 ...