动画

　　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. Async_Study

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Invalid Rom

    问题描述 原因说明 这多半是因为单片机超频被锁,就是HSE_VALUE设置的与实际值不一致,容易造成这个问题. 解放方法 1. 先正确配置 HSE_VLAUE, 看HSE_VALUE 修改问题. 2. ...

  3. Python-docx库的使用

    from docx import Document from docx.shared import Inches document = Document() document.add_heading( ...

  4. java-day12

    数据结构 常用的数据存储结构:栈,队列,数组,列表,红黑树. 栈:先进后出(入口和出口在用一侧) 队列:先进先出 数组: 查询快:因为数组的地址是连续的,通过数组的首地址找到数组中的元素. 增/删慢: ...

  5. Java Lambda map返回部分属性

    通过map,返回部分属性. MyUser,作为源数据 MyUserS,作为返回的新数据. @Test public void Test1() { List<MyUser> ulist=ne ...

  6. 同步图计算实现pageRank算法

    pageRank算法是Google对网页重要性的打分算法. 一个用户浏览一个网页时,有85%的可能性点击网页中的超链接,有15%的可能性转向任意的网页.pageRank算法就是模拟这种行为. Rv:定 ...

  7. 【JZOJ6354】最短路(tiring)

    description analysis 显然边权有变化规律\(x,{1\over{x-1}},{x-1\over x},x,...\) 于是把一个点拆成三个点,分别表示步数到除\(3\)余\(0,1 ...

  8. 阿里云启动视频云V5计划，全面赋能生态合作伙伴

    9月25 - 27日,主题为数·智的2019云栖大会在杭州举行.在第三天的智能视频云专场中,阿里云研究员金戈首次对外发布视频云V5计划,释放视频IT基础设施红利,赋能生态合作伙伴,共促大视频产业发展. ...

  9. agc38C LCMs

    https://atcoder.jp/contests/agc038/tasks/agc038_c 题意:给\(a_i\),求\(\sum_{i=1}^n\sum_{j=i+1}^nlcm(a_i,a ...

  10. spring Cache + Redis 开发数据字典以及自定义标签

    一.数据库表结构 1.  分类表:dict_type 2.  子项表:dict_entry 二.页面维护功能示意图: 1.  分类管理 点击子项管理进入子项管理页面 2.子项管理 三.数据字典添加到缓 ...