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文件系统的存储和索引有了一个较为 ...
随机推荐
- EChart.js 笔记一
一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...
- Web API 如何请求基于Basic/Bearer 头的方式 C#
public void SetBasicAuthHeader(WebRequest request, String userName, String userPassword) { string au ...
- codeforces498C
Array and Operations CodeForces - 498C You have written on a piece of paper an array of n positive i ...
- BZOJ2738矩阵乘法——整体二分+二维树状数组
题目描述 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. 输入 第一行两个数N,Q,表示矩阵大小和询问组数:接下来N行N列一共N*N个数,表示这个矩阵:再接下来Q行每行5 ...
- BZOJ2428[HAOI2006]均分数据——模拟退火
题目描述 已知N个正整数:A1.A2.…….An .今要将它们分成M组,使得各组数据的数值和最平均,即各组的均方差最小.均方差公式如下: ,其中σ为均方差,是各组数据和的平均值,xi为第i组数据的数值 ...
- Educational Codeforces Round 62 (Rated for Div. 2)
A. Detective Book 题意:一个人读书 给出每一章埋的坑在第几页可以填完 . 一个人一天如果不填完坑他就会一直看 问几天能把这本书看完 思路:模拟一下 取一下过程中最大的坑的页数 如 ...
- 搭建gogs常见问题
1.无法连接ssh,显示connection refuse. 原因是“custom/conf/app.ini”没有开启ssh功能,改为以下配置就行了 START_SSH_SERVER = true ...
- 【 HDU 2177 】取(2堆)石子游戏 (威佐夫博弈)
BUPT2017 wintertraining(15) #5C hdu2177 题意 两个人轮流取石子,可以取一堆的任意非负整数个或两堆取相同个,先取完的输. 给定若干组数据:a,b表示两堆的石子数量 ...
- optimize PHP-FPM优化
php-fpm进程pidpids=$(ps aux | grep ${process} | grep -v "grep" | awk '{print $2}') php-fpm 关 ...
- zabbix3.4 监控网卡流量设置差量
自定义监控项的时候 看里面预设的监控网卡下载流量的key是 net.if.in[if,<mode>]这次可以监控流量了 但是添加监控项的时候 看网上别人的 都是可以设置数值是每秒的差量 出 ...