动画

　　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. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  2. Devstack单节点环境实战配置

    本文为minxihou的翻译文章,转载请注明出处Bob Hou: http://blog.csdn.net/minxihou JmilkFan:minxihou的技术博文方向是 算法&Open ...

  3. iOS开发静态库冲突——如何查看静态库（.O）中方法名

    1.bug产生 应用第三方静态库之后提示冲突错误: 2.bug分析 一般会提示哪两个库冲突: CameraShowGLView.o是自己创建的类编译生成的: libLechangeSDK.a是添加的静 ...

  4. fastReport.net 初了解

    delphi 中fastReport rmReport都很好用,转到.net了,第一想法也是这两个,好在这里有个fastReport; 这个安装呢 找个破解的 有个4.x版 安完建一个winForm  ...

  5. pandas中axis的含义

    定义一个dataframe: >>> df a b0 1 31 2 4 现在看两种用法: 1.求行的均值 >>> df.mean(axis=1)0 2.01 3.0 ...

  6. 多个for循环使用

    for循环 例子 语法 vue.js的for循环 <div id="myfor"><li v-for="student in studentList&q ...

  7. 2019牛客暑期多校训练营（第八场） E 线段树+可撤销并查集

    题目传送门 题意: 给出m条无向边,每条边都有一个$[l,r]$,意思是体积在这个范围内的人才能通过这条边,询问有多少种体积的可能性,能使人从1到n 思路:由于是无向边,1和n的连通性可以用并查集维护 ...

  8. js添加节点

    <!DOCTYPE html><html><body><script>var message=document.createTextNode(" ...

  9. laravel sql mode only_full_group_by 解决小记

    環境: mysql: 5.7.* Laravel: 5.4.* sql 中使用到了 group by,會提示 500錯誤,將 config/database.php中的 strict的值改爲true, ...

  10. 家庭-养老院模型理解IOC和DI

    控制反转 IOC 1. 概念 应用内部不负责依赖对象的创建和维护, 由第三方负责, 这样控制权就由应用内部转移到外部容器, 控制权的转移就是所谓的反转. 2. 比喻 有一户家庭(应用)有个老人(依赖对 ...