1 HTML5新特性
1.1 新增语义标签
- < header> ：头部标签
- < nav>：导航标签
- < article>：内容标签
- < section>：定义文档某个区域
- < aside>：侧边栏标签
- < footer>：尾部标签
1.2 新增多媒体标签
- 音频：< audio>
< audio src=“文件地址” controls=“controls”>
- 视频：< video>
< video src=“文件地址” controls=“controls”>
1.3 新增input类型
<body>
<form action="">
<ul>
<li>邮箱：<input type="email"/> </li>
<li>网址：<input type="url"/> </li>
<li>日期：<input type="date"/> </li>
<li>数量：<input type="number"/> </li>
<li>手机号码：<input type="tel"/> </li>
<li>搜索：<input type="search"/> </li>
<li>颜色：<input type="color"/> </li>
<li><input type="submit" value="提交"> </li>
</ul>
</form>
</body>
1.4 新增表单属性
<style>
/*通过这个改input框里面默认字体的颜色*/
input::placeholder {
color: pink;
}
</style>
<body>
<form action="">
<input type="search" name="" id="" required="required" placeholder="我要吃辣条" autofocus="autofocus" >
<input type="submit" value="提交">
</form>
</body>
2 CSS3新特性
2.1 新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
<style>
/*必须是input但同时有value这个属性*/
input[value]{
color: pink;
}
</style>
<body>
<form action="">
<input type="text" value="请输入用户名">
<input type="text">
</form>
</body>
<style>
input[type=password]{
color: pink;
}
</style>
<body>
<form action="">
<input type="text" name="" id="">
<input type="password" name="" id="">
</form>
</body>
<style>
/*选择div并且具有class属性，并且类名以icon开头*/
div[class^=icon]{
color: pink;
}
/*选择并且具有class属性，并且类名date结尾*/
section[class$=date]{
color: red;
}
/*类名中有****/
div[class*=***]{
color: blue;
}
</style>
<body>
<form action="">
<!-- 选择div并且具有class属性，并且类名以icon开头 -->
<div class="icon1">小图标</div>
<div class="icon2">小图标</div>
<div class="icon3">小图标</div>
<div class="icon4">小图标</div>
<!-- 选择div并且具有class属性，并且类名以icon开头 -->
<section class="icon1-date">没有感情的复制粘贴机器</section>
<section class="icon2-date">没有感情的复制粘贴机器</section>
<section class="icon3-ico">没有感情的复制粘贴机器</section>
</form>
</body>
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素
区别：
- nth-child 对父元素里面所有孩子排序选择（序号是固定的）
div: nth-child就代表他是父元素的div元素，并且他是父元素的第n个孩子元素 - nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子。
div：nth-of-type（n）代表他是第n个类型为div的子元素，不管在他之前有多少 个同级元素，只要不是div类型就都不算数，就是说这个div元素不一定在父元素中是第n个子元素，但他一定是第n个div元素
<style>
div:nth-of-type(2){background-color: blue;}
</style>
<body>
<div>
爸爸
<div>大儿子</div>
<p>叛徒儿子</p>
<div>二儿子</div>
<div>三儿子</div>
</div>
<div>二叔</div>
<p>叛徒叔叔</p>
<div>
三叔
<p>侄子</p>
</div>
</body>
<--第二个div元素,包括父盒子里的第二个div和整体页面的第二个div--!>
<style>
div:nth-child(2){background-color: blue;}
</style>
<body>
<div>
爸爸
<div>大儿子</div>
<p>叛徒儿子</p>
<div>二儿子</div>
<div>三儿子</div>
</div>
<div>二叔</div>
<p>叛徒叔叔</p>
<div>
三叔
<p>侄子</p>
</div>
</body>
<--孩子为第二个并且是div的元素,父盒子里的第二个是p所以不是--!>
伪元素选择器
。。。。。。自己看吧
过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s
3. 运动曲线： 默认是 ease （可以省略）、
4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
<style>
div{
width: 200px;
height: 35px;
background-color: pink;
transition: width 1s，height 1s;
/* 或者 transition: all 1s; */
}
div:hover{
width: 400px;
height: 70px;
}
</style>
<body>
<div>
</div>
</body>
会动的进度条
<style>
.bar{
width: 150px;
height: 15px;
border:1px solid red;
border-radius:7px;
padding: 1px;
}
.bar_in{
width: 50%;
height: 100%;
background-color: red;
transition: all 1s;
}
.bar:hover .bar_in{
width: 100%;
}
</style>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
logo SEO优化
- logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
- h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
- 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。 - 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了
2D转换 Transform
- 移动：translate
- 旋转：rotate
- 缩放：scale
translate
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
rotate
//绕中心点旋转
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/*transform-origin: left bottom;*/
/*设置旋转中心点的位置*/
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
<body>
<div >
</div>
</body>
那个绿色会转上去
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/*transition: all 1s;*/
/*transform-origin: left bottom;*/
/*transform-origin: 50px 50px; */
overflow: hidden;
}
div::before{
content: "小黎";
display: block;
width: 100%;
height: 100%;
background-color: green;
transform-origin: left bottom;
transform: rotate(180deg);
transition: all 2s;
}
div:hover::before{
transform: rotate(0deg);
}
</style>
<body>
<div >
</div>
</body>
scale缩放
鼠标放到图片里就会慢慢变大
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
overflow: hidden;
}
div img:hover {
/*括号里放的是倍数*/
transform: scale(1.2);
transition: all 1s;
}
</style>
<body>
<div ><a href="#"><img src="C:/Users/Administrator/Desktop/floor-1-6.png" alt=""></a></div>
</body>
分页按钮放大
<style>
/*div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}*/
li{
float: left;
width: 30px;
height: 30px;
margin:10px;
border:1px solid pink;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
text-align: center;
transition: all .5s;
}
li:hover{
transform: scale(1.2);
}
</style>
<body>
<div >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
CSS3动画
1.用keyframes定义动画
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
<style>
/*1.定义动画*/
@keyframes move{
/*开始状态*/
0% {
transform: translateX(0px);
}
/*结束状态*/
100% {
transform: translateX(1000px);
}
}
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/*2.调用动画*/
animation-name: move;
animation-duration: 2s;
}
</style>
<body>
<div >
</div>
</body>
动画常用属性
前面两个属性一定要写
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
demo：热点图案例
<style>
.map{
position: relative;
width: 1080px;
height: 632px;
background: url(/../map.png);
margin: 0 auto;
}
.city{
position: absolute;
/*top: 265px;
right:350px;*/
/*color: #fff;
font-size: 12px;*/
}
.bj{
top: 265px;
right:350px;
}
.wh{
bottom: 185px;
right:375px;
}
.nn{
bottom: 65px;
right:435px;
}
.bjname{
position: absolute;
top: 265px;
right:300px;
color: #fff;
font-size: 12px;
}
.whname{
position: absolute;
bottom: 185px;
right:325px;
color: #fff;
font-size: 12px;
}
.nnname{
position: absolute;
bottom: 65px;
right:425px;
color: #fff;
font-size: 12px;
}
.dotted{
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"]{
/*保证小波纹这在父盒子里水平垂直居中，放大后就会从中心向四周发散*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
/*加这么多是因为一个pulse的权重只有10，而上面的city+div+class加起来有21覆盖不了*/
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse{
0% {
}
70%{
width: 40px;
height: 40px;
/*transform:scale(5); */
/*透明度*/
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
<body>
<div class="map">
<div class="bjname">北京</div>
<div class="city bj">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="whname">武汉</div>
<div class="city wh">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="nnname">南宁</div>
<div class="city nn">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
速度曲线animation-timing-function：规定动画的速度曲线，默认是“ease”
<style>
div{
overflow: hidden;
width: 0;
height: 30px;
font-size: 20px;
background-color: pink;
/*让文字强行在一行上显示*/
white-space: nowrap;
/*steps分5步走*/
animation: w 4s steps(10) forwards;
}
@keyframes w{
0%{
width: 0;
}
100%{
width: 200px;
}
}
</style>
<body>
<div>不用数了这里有十个字</div>
</body>
demo：奔跑的小熊
<style>
body{
background-color: #ccc;
}
div{
position: absolute;
width: 200px;
height: 100px;
/*font-size: 20px;*/
background: url("/../bear.png");
animation: bear 1s steps(8) infinite, move 1s forwards;
}
@keyframes bear{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move{
0%{
left: 0;
}
100%{
left: 50%;
/*margin-left: -100px;*/
/*改写成*/
transform: translate(-50%);
}
}
</style>
<body>
<div></div>
</body>
3D转换
透视 perspective
透视写在被观察元素的父盒子上面的
translateZ：近大远小
translateZ：往外是正值
translateZ：往里是负值
3D旋转
transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
<style>
body{
/*加入透视，实现3D效果*/
perspective: 500px;
}
img{
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover{
transform: rotateX(180deg);
}
</style>
<body>
<img src="1.png" alt="">
</body>
transfrom-style
代码写给父级，但是影响的是子盒子这个属性很重要，后面必用
控制子元素是否开启三维立体环境。。
transform-style: flat 子元素不开启3d立体空间 默认的
transform-style: preserve-3d; 子元素开启立体空间
<style>
body{
/*加入透视，实现3D效果*/
perspective: 500px;
}
.box{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/*让盒子保持3D立体空间*/
transform-style: preserve-3d;
}
.box:hover{
transform: rotateY(60deg);
}
.box div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
}
.box div:last-child{
background-color: blue;
transform: rotateX(60deg);
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
demo：像硬币一样转动
<style>
.box{
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all 1s;
/*让背面的紫色盒子保留立体空间*/
transform-style:preserve-3d;
}
.box:hover{
transform: rotateY(180deg);
}
.front,
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: pink;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front{
background-color: skyblue;
z-index: 1;
}
.back{
background-color: pink;
/*因为反过来后字体会反着，所以先转反*/
transform: rotateY(180deg);
}
</style>
<body>
<div class="box">
<div class="front">加油</div>
<div class="back">打工仔</div>
</div>
</body>
demo :翻转打工仔
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 100px;
}
ul li{
float: left;
width: 120px;
height: 35px;
list-style: none;
/*透视效果*/
perspective: 500px;
margin-left: 20px;
}
.box{
position: relative;
width: 100%;
height: 100%;
margin: 100px auto;
transition: all 1s;
/*让背面的紫色盒子保留立体空间*/
transform-style:preserve-3d;
}
.box:hover{
transform: rotateX(90deg);
}
.front,
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 35px;
}
.front{
background-color: skyblue;
z-index: 1;
/*把前面的向前移，让后面好转*/
transform:translateZ(17.5px);
}
.back{
background-color: pink;
/**/
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
<body>
<ul>
<li>
<div class="box">
<div class="front">加油</div>
<div class="back">打工仔</div>
</div>
</li>
<li>
<div class="box">
<div class="front">打工仔</div>
<div class="back">加油</div>
</div>
</li>
<li>
<div class="box">
<div class="front">打工仔</div>
<div class="back">不怕苦</div>
</div>
</li>
<li>
<div class="box">
<div class="front">不怕累</div>
<div class="back">打工仔</div>
</div>
</li>
</ul>
</body>
demo：照片旋转
<style>
body{
background-color: #ccc;
perspective: 1000px;
}
section {
position: relative;
width: 288px;
height: 200px;
margin: 150px auto;
transform-style:preserve-3d;
/*添加动画效果*/
animation: rotate 10s linear infinite;
}
section:hover{
/*鼠标放入就暂停*/
animation-play-state: paused;
}
@keyframes rotate{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
section div{
position: absolute;
width: 100%;
height: 100%;
/*font-size: 20px;*/
background: url("/../dog.jpg");
}
/* section div:nth-child(1){
transform: translateZ(300px);
} */
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px);
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
新布局
display：flex;
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
