CSS3 学习笔记（动画 多媒体查询）
动画
1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
2、使用animation进行动画捆绑。两个值：动画名称、时长
3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。
4、加上一个infinite值就可以无限执行了
5、ease——默认开始慢慢加速，结束时慢慢减速。
linear——默认始终使用相同速度运行。
alternate——交替执行（也可以成为正反执行）
代码：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: #000000;
position: relative;/* 需要位置改变所以添加了position */
animation: myfirst 3s alternate infinite linear;/* 动画捆绑两个值 动画名称 动画时长 再加一个无限执行和交替执行 */
}
@keyframes myfirst{
from{background-color: red;border-radius: 99px;box-shadow: -35px 0px 15px green;left: 0px;right: 0px;}
to{background-color: #0000FF;border-radius: 0px;left: 400px;right: 0px;}
}
</style>
</head>
<body>
<div id=""> </div>
</body>
</html>
多媒体查询
520 到 699px：@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}}
700 到 1000px：@media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic;color: #666666; }}
大于 1001px：@media screen and (min-width: 1001px) {ul li a:after {content: " (" attr(data-email) ")";font-size: 12px;font-style: italic;color: #666666;}}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <link rel="stylesheet" type="text/css"media="(max-width:1000px)and(min-width:700px)"href=""/>
<link rel="stylesheet" type="text/css"media="(max-width:699px)and(min-width:300px)"href=""/> -->
<style type="text/css">
#aa{
width: 100%;
height: 70px;
background-color: #008000;
}
.alist{
width: 80px;
height: 80px;
border: 1px solid red;
float: left;
/* display: flex; */
}
p{
display: none;
}
ul{
list-style: none;
}
@media screen and (min-width: 1200px) {
ul{
font-size: 30px;
}
}
@media screen and (max-width: 1199px) and (min-width: 900px) {
ul{
font-size: 26px;
}
}
@media screen and (max-width: 899px)and (min-width: 620px) {
ul{
font-size: 20px;
}
}
@media screen and (max-width: 619px)and (min-width: 320px) {
ul{
font-size:14px;
}
/* #aa{
display: none;
} */
p{
display: block;
}
.alist{
background-color: #008000;
}
}
@media screen and (max-width: 320px){
ul{
font-size:10px;
}
.alist{
width: 100%;
float: none;
}
}
</style>
</head>
<body>
<div id="aa">
<div class="alist">1</div>
<div class="alist">2</div>
<div class="alist">3</div>
<p>我是一开始隐藏的</p>
<ul>
<li>我是一开始我是一开始我是一开始</li>
<li>我是一开始我是一开始我是一开始</li>
<li>我是一开始我是一开始我是一开始</li>
<li>我是一开始我是一开始我是一开始</li>
<li>我是一开始我是一开始我是一开始</li>
<li>我是一开始我是一开始我是一开始</li>
</ul>
</div>
</body>
</html>
CSS3 学习笔记（动画 多媒体查询）的更多相关文章
- MyBatis:学习笔记(3)——关联查询
MyBatis:学习笔记(3)--关联查询 关联查询 理解联结 SQL最强大的功能之一在于我们可以在数据查询的执行中可以使用联结,来将多个表中的数据作为整体进行筛选. 模拟一个简单的在线商品购物系统, ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- mybatis学习笔记(10)-一对一查询
mybatis学习笔记(10)-一对一查询 标签: mybatis mybatis学习笔记10-一对一查询 resultType实现 resultMap实现 resultType和resultMap实 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- SQLServer学习笔记<>相关子查询及复杂查询
二.查询缺少值的查询 在这里我们加入要查询2008年每一天的订单有多少?首先我们可以查询下订单表的订单日期在2008年的所有订单信息. 1 select distinct orderdate,coun ...
- Hibernate学习笔记-Hibernate HQL查询
Session是持久层操作的基础,相当于JDBC中的Connection,通过Session会话来保存.更新.查找数据.session是Hibernate运作的中心,对象的生命周期.事务的管理.数据库 ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- 十天精通CSS3学习笔记 part3
第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
随机推荐
- 剑指offer——08斐波那契数列
题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 有多种方法,简单的循环.递归.动态规划: class Solutio ...
- 用CSS做导航菜单的4个理由
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...
- "_CMTimeGetSeconds", referenced from:
CMTime is defined in the CoreMedia.framework. Add that framework to your project.
- 2019-7-3-Roslyn-在项目文件使用条件判断
title author date CreateTime categories Roslyn 在项目文件使用条件判断 lindexi 2019-7-3 17:7:32 +0800 2018-8-3 2 ...
- lnmp高人笔记
http://www.cnblogs.com/qizekai/p/5878774.html http://www.cnblogs.com/qizekai/p/5879461.html
- 2019.2.23VScode的c++配置详细方法
根据个人经验,最新的c++配置方法. 主要的步骤: 安装Vscode 在Vscode类安装c++插件 安装编译调试环境 修改Vscode配置文件. 安装Vscode的步骤省略 如何配置Vscode中文 ...
- java继承,多态
子类继承父类,用父类去接收子类,其实我觉得用父类,子类来形容继承关系是不恰当的,比如再发生多态的时候,Car c = new W();w是大众,你能说Car 和W是父子关系吗,我觉得用所属关系类描述可 ...
- matplotlib 画图颜色参数值及对应色卡
matplotlib 色卡对应参数值 cnames = { 'aliceblue': '#F0F8FF', 'antiquewhite': '#FAEBD7', 'aqua': '#00FFFF', ...
- dos中文乱码怎么办？
最简单的方法: 通过 chcp命令改变代码页,UTF-8的代码页为65001 即chcp 65001 chcp 65001 就是换成UTF-8代码页 chcp 936 可以换回默认的GBK chcp ...
- HDU5377
题意:给sum,m组询问,每组x,y求\(x^t=y\mod p,p|sum\),p是素数,求最小的t 题解:先处理sum的所有质因子p,求出p的原根rt,\(rt^a=x\mod p,rt^b=y\ ...