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: 基本知识记录的更多相关文章

  1. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  2. C#基础知识记录一

    C#基础知识记录一 static void Main(string[] args) { #region 合并运算符的使用(合并运算符??) 更多运算符请参考:https://msdn.microsof ...

  3. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  4. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  5. DataBase MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  6. MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  7. 关于Excel做表小知识记录

    关于Excel做表小知识记录 最近使用Excel做了一系列的报表,觉得这是个很神奇的东西哈哈哈,以前我可是一想到Excel就开始头疼的人...  能用代码或者SQL语句解决的问题绝不会愿意留在Exce ...

  8. Maven知识记录(一)初识Maven私服

    Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...

  9. Linux文件系统知识记录——ext2描述

    最近完成了一个编程作业,大致功能是给定一个文件名,给出该文件所在目录和其本身所占用的簇号等信息.笔者选用了Linux的ext系列文件系统作为实验对象,通过实验对ext2文件系统的存储和索引有了一个较为 ...

随机推荐

  1. EChart.js 笔记一

    一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...

  2. Web API 如何请求基于Basic/Bearer 头的方式 C#

    public void SetBasicAuthHeader(WebRequest request, String userName, String userPassword) { string au ...

  3. codeforces498C

    Array and Operations CodeForces - 498C You have written on a piece of paper an array of n positive i ...

  4. BZOJ2738矩阵乘法——整体二分+二维树状数组

    题目描述 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. 输入   第一行两个数N,Q,表示矩阵大小和询问组数:接下来N行N列一共N*N个数,表示这个矩阵:再接下来Q行每行5 ...

  5. BZOJ2428[HAOI2006]均分数据——模拟退火

    题目描述 已知N个正整数:A1.A2.…….An .今要将它们分成M组,使得各组数据的数值和最平均,即各组的均方差最小.均方差公式如下: ,其中σ为均方差,是各组数据和的平均值,xi为第i组数据的数值 ...

  6. Educational Codeforces Round 62 (Rated for Div. 2)

    A. Detective Book 题意:一个人读书  给出每一章埋的坑在第几页可以填完 . 一个人一天如果不填完坑他就会一直看 问几天能把这本书看完 思路:模拟一下 取一下过程中最大的坑的页数  如 ...

  7. 搭建gogs常见问题

    1.无法连接ssh,显示connection refuse. 原因是“custom/conf/app.ini”没有开启ssh功能,改为以下配置就行了  START_SSH_SERVER = true ...

  8. 【 HDU 2177 】取(2堆)石子游戏 (威佐夫博弈)

    BUPT2017 wintertraining(15) #5C hdu2177 题意 两个人轮流取石子,可以取一堆的任意非负整数个或两堆取相同个,先取完的输. 给定若干组数据:a,b表示两堆的石子数量 ...

  9. optimize PHP-FPM优化

    php-fpm进程pidpids=$(ps aux | grep ${process} | grep -v "grep" | awk '{print $2}') php-fpm 关 ...

  10. zabbix3.4 监控网卡流量设置差量

    自定义监控项的时候 看里面预设的监控网卡下载流量的key是 net.if.in[if,<mode>]这次可以监控流量了 但是添加监控项的时候 看网上别人的 都是可以设置数值是每秒的差量 出 ...