动画

　　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. Centos6.5安装rar5.3

    linux下使用最多的压缩工具是gzip,zip等,如果需要使用rar,就必须编译安装了,以下是编译安装rar教程: 一.安装支持库yum install -y gcc gcc-c++ autocon ...

  2. 关于resin的一个错误，Resin 启动报错，访问页面500

    背景 客户集成javaagent报错,客户用的是resin,在本地复现问题,修改了bug,其中在resin中发布war包遇到的错误. 完整错误 500 [show] WEB-INF/web.xml:5 ...

  3. idea中项目发布到svn服务器

    1. 在svn上创建仓库 https://5VY9MN7OCQV7B9N/svn/KH75-myhouse 2. 将idea的项目上传至svn服务器 项目变红 上传完成项目变成绿色 查看svn服务有文 ...

  4. （十七）从UML角度来理解依赖

    UML软件建模 什么是依赖?简单理解就是一个类A用到了类B,但是这种使用关系是偶然性的.临时性的.非常弱的,类B的变化会影响到类A 显示依赖与隐式依赖 依赖倒置:我们要依赖于高层业务,不依赖于低层业务 ...

  5. jdbc加载驱动方法

    1.Class.forName("com.mysql.jdbc.Driver"); 2. DriverManager.registerDriver(new com.mysql.jd ...

  6. MySQL 07章_子查询

    子查询就是查询中还可以嵌套其他的查询,通常是内层查询的结果作为外层查询的条件来使用 执行循序,自内向外依次执行 一.内层查询返回“单列单行”的结果 -- 1.查询宋江的出生日期 SELECT TIME ...

  7. SVN 分支操作

    一  拉取分支 1 选择浏览 2 输入svn项目路径:https://IP/svn/ 3 选择拉取的项目 4 下载到本地路劲 右键选中的分支—CheckOut 选择本地路劲 二 分支合并 1 分支合并 ...

  8. PHP算法之整数反转

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123输出: 321 示例 2: 输入: -123输出: -321示例 3: 输入: 120输出: 21注 ...

  9. AM8不能下任何载附件及所有聊天记录无法登记

    问题描述: 接收附件时,点击打开或者下载都不成功,但可以发送消息和附件.但在消息管理器中,也查询不到发送和接收的消息 原因分析:此问题是windows开机登录用户权限问题(若 登录的账号是 whx), ...

  10. vue better-scroll 下拉上拉，加载刷新

    _initScroll(){             this.$nextTick(() => {                 if (!this.scroll) {             ...