动画

　　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 学习笔记（动画 多媒体查询）的更多相关文章

  1. MyBatis:学习笔记(3)——关联查询

    MyBatis:学习笔记(3)--关联查询 关联查询 理解联结 SQL最强大的功能之一在于我们可以在数据查询的执行中可以使用联结,来将多个表中的数据作为整体进行筛选. 模拟一个简单的在线商品购物系统, ...

  2. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  3. mybatis学习笔记(10)-一对一查询

    mybatis学习笔记(10)-一对一查询 标签: mybatis mybatis学习笔记10-一对一查询 resultType实现 resultMap实现 resultType和resultMap实 ...

  4. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  5. SQLServer学习笔记<>相关子查询及复杂查询

    二.查询缺少值的查询 在这里我们加入要查询2008年每一天的订单有多少?首先我们可以查询下订单表的订单日期在2008年的所有订单信息. 1 select distinct orderdate,coun ...

  6. Hibernate学习笔记-Hibernate HQL查询

    Session是持久层操作的基础,相当于JDBC中的Connection,通过Session会话来保存.更新.查找数据.session是Hibernate运作的中心,对象的生命周期.事务的管理.数据库 ...

  7. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  8. 十天精通CSS3学习笔记 part3

    第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...

  9. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

随机推荐

  1. Unity NGUI 粒子的排序

    Unity NGUI系统中是没有对粒子进行排序的,如: 怎么解决这个问题呢? 思路是把粒子的渲染层级,相对于UI组件的层级进行一个偏移. 解决后的效果如下: 代码如下: using System.Co ...

  2. 3. Vim入门教程

    1. 基本概念 1.1 了解Vim的三个基本模式 当我们安装完一个编辑器后,肯定会打开它,然后在里面输入点什么东西,但是打你打开Vim后,想要输入点什么却发现自己什么都没有输入,所以在写点东西之前,先 ...

  3. 面试总结【css篇】- css3新增特性

    1.css3中的关键帧 @keyframes规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤.这 比转换更能控制动画序列的中间步骤. @keyframes ...

  4. HduOJ 2162 - Primes

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2161 题意:判断n是不是素数,输入到0停止.题目规定1 2 都不是素数. 题解:筛素数.老题目.不过这 ...

  5. Activiti学习笔记10 — 动态任务分配

    动态任务分配使用的两种方式 一.通过特殊表达式,来获取任务信息 ,在流程 UserTask节点上设置 ${流程变量的Key} 1.流程定义 <?xml version="1.0&quo ...

  6. 国行iphone第一次安装APP网络状况

    国行手机第一次安装APP,会有请求网络权限的一个弹框出现,在这期间APP是没有任何网络连接的. 想必大部分APP的需求和这个逻辑有冲突. 先推荐一个链接:http://www.cocoachina.c ...

  7. 《构建之法》CH5~6读书笔记 PB16110698 第九周（~5.15）

    这段时间我阅读了<构建之法>的大部分章节,包括个人技能.软件测试.用户体验和需求分析等相关内容.之前的个人作业和结对作业结束后,我们的工作重心终于转向了团队项目,作为团队中前端组的组长,我 ...

  8. dev设置子窗体的初始位置，grid控件表头的属性设置

    当在父窗体上弹出子窗体时,一般设置子窗体的初始位置是居中, //在需要展示子窗体的父窗体上写这段,注意必须设置在show方法之前Form2 f2 = new Form2(); f2.MdiParent ...

  9. linux 服务器安装mysql5.6

    1.移除CentOS默认的mysql-libs: whereis mysql 2.为了避免冲突,先移除CenttOS上默认的mysql-libs: yum remove mysql-libs 3.然后 ...

  10. split的用法

    split用法返回的是数组 使用split('')根据空格返回数组 使用split()返回一个完整的数组 使用split("",3)返回前三项,是单个的字母 不过要注意: 使用sp ...