动画

　　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. HDU-1754-I Hate It-线段树-求区间最值和单点修改

    开学新拉的题目,老题重做,思路会稍微比之前清晰,不过这也算是一点点进步了. 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现 ...

  2. QTableWidget学习

    一.这次项目需要用到,可以在tablewidget中添加item,并且可以通过鼠标的右键选项进行一些打开.删除等操作. 1.在构造函数中定制右键菜单选项 ui.tableWidget_2->se ...

  3. 20140329 自由 youtube

    1.人生入戏,全靠演技:人生苦短,必须性感 2.youtube修改用户名 3.使用代理软件修改了IE的代理导致上不了网

  4. 20130318 word2013 mathtype

    1.word2013 下如何安装mathtype 1.word2013已经装好 2.下载mathtype6.9 3.   公式编辑器Mathtype安装后无法加载到word的解决办法http://w5 ...

  5. Array类型中的检测数组，转换方法，栈方法，队列方法

    我的新博客==> http://www.suanliutudousi.com/2017/08/24/array%E7%B1%BB%E5%9E%8B%E4%B8%AD%E7%9A%84%E6%A3 ...

  6. jquery网页定位导航特效

    <!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...

  7. 利用 Dockerfile 定制镜像

    镜像的定制实际上就是定制每一层所添加的配置.文件. 如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像, 那么之前提及的无法重复的问题.镜像构建透明性的问题.体 ...

  8. delphi 第3课

    (1)主程序:汇总或者记载 Delphi应用程序是以窗体为中心的 (1) 1 (2) 控制语句 if 条件 then 语句1: else 语句2: 2018-04-22   21:47:17

  9. Dom关于位置和尺寸的api

    parentNode    直接父级//和offsetParent不同 inner2.parentNode <!DOCTYPE html> <html id="html&q ...

  10. SpringBoot 非web项目简单架构

    1.截图 2.DemoService package com.github.weiwei02.springcloudtaskdemo; import org.springframework.beans ...