学习h5C3总结～
2018-10-26 本文已影响0人
蓝海00
什么是html5？
一些学习时候自己总结的部分特效和上课的部分笔记存在GitHub里面～GitHub链接🤧
- h5并不是新的语言，而是html语言第五次重大修改的版本
- 支持:所有的主流浏览器都支持h5(有选择性的支持 [后面会讲解如何支持其他浏览器])
- 改变了用户与文档的交互方式: 多媒体:video视频 audio音频 canvas画板
- 增加了新特性:1.标签语义化。2.本地存储性。3.网页多媒体。4.二维与三维。5.特效(动画/过度)
- 相对h4：h5抛弃了一些不合理的不常用的标签和属性，也新增了一些标签和属性(表单属性 input)，从代码角度而言，h5的网页代码结构更加简洁
如何兼容h5C3？(使用第三种方法即可)
- 将不支持的标签改为块级元素
- 手动创建标签(注意默认创建的标签是行级元素，需要display:block;)
documet.createElement(“自定义标签名”);
- 引入第三方插件
html5shiv.js/*解决h5兼容问题的插件*/
respond.min.js/*解决C3兼容问题的插件*/
H5常用的语义化标签
| 标签名 | 作用 | |
|---|---|---|
| nav | 导航 | |
| header | 页眉 | |
| footer | 页尾 | |
| main | 主要内容 | |
| article | 文章 | |
| aside | 主题内容之外 |
H5表单input中新增的type常用属性值总结
<form>
<!--email:提供了完整的邮箱验证<要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前数据的提交！>-->
<label for="email">邮箱</label><input type="email" id="email"><br>
<!--tel:用来在移动端打开数字键盘，限制用户输入的内容只能为数字-->
<label for="phone">电话</label><input type="tel" id="phone"><br>
<!--url:验证合法的网站，必须包含<http://>-->
<label for="url">网站</label><input type="url" id="url"><br>
<!--number:用户输入的只能为数字，包含小数点，不能输入除数字以外的其他字符
max:最大值
min:最小值
-->
<label for="number">数量</label><input type="number" max="100" min="1" id="number"><br>
<!--search:可以提供更人性化的输入体验，输入后右上角会出现叉叉可一次删除输入的内容-->
<label for="search">请输入商品名称</label><input type="search" id="search"><br>
<!--range:范围-->
<label for="range">范围</label><input type="range" id="range"><span id="rangeSpan"></span><br>
<script>
//范围
let rangeInput = document.getElementById("range");
let rangeSpan = document.getElementById("rangeSpan");
rangeSpan.innerHTML = rangeInput.value;
rangeInput.oninput = function () {
rangeSpan.innerHTML = this.value;
console.log(this.value);
}
</script>
颜色<input type="color"><br>
时间<input type="time"><br>
日前<input type="date"><br>
日前时间<input type="datetime-local"><br>
月份<input type="month"><br>
星期<input type="week"><br>
</form>
H5表单input中新增的常用其他属性总结
<form id="myForm">
<!--placeholder:提示文本，提示占位符-->
<!--autofocus:页面刷新后自动获取焦点-->
<!--autocomplete:历史记录自动提示 属性值:off<关闭> on<打开>
1.设置该属性的元素必须要有name属性
2.必须要submit提交后才会有历史记录提示
-->
用户名<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"><br>
<!--required:必须填写-->
<!--pattern:正则表达式-->
电话<input type="tel" required pattern="^1[3|4|5|7|8][0-9]{9}$"><br>
!--multiple：可以选择多个文件或者填写多个邮箱(邮箱之间用[,逗号]分开即可)-->
文件：<input type="file" multiple><br>
<input type="submit">
</form>
<!--form：属性值form表单的id 数据提交时可将不在form标签中的input标签一起submit-->
测试：<input type="text" form="myForm">
H5新增的表单事件
<form>
<label for="phone">电话</label><input type="tel" id="phone" pattern="^1\d{10}$"><br>
<input type="submit">
</form>
<script>
let phone = document.getElementById("phone");
/*oninput事件:监听当前input内容的改变，<只要改变内容就会触发这个事件>
* oninput事件和onkeyup事件的区别
* 1.oninput事件是只要改变了内容就会触发事件 ， onkeyup事件是键盘弹起的时候触发
* 2.用鼠标复制粘贴oninput事件会触发 onkeyup事件不会触发
* */
phone.oninput = function () {
console.log(this.value);
};
phone.oninvalid = function (event) {
event = event || window.event;//event兼容写法
/*设置提示气泡中的文字*/
this.setCustomValidity("请输入11位手机号");
/*阻止默认提示气泡*/
event.preventDefault();
};
</script>
表单总结小案例🤪
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.4.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
/*form {
position: relative;
}*/
fieldset {
width: 800px;
margin: 0 auto;
padding: 10px;
}
fieldset > label {
height: 40px;
line-height: 40px;
font-weight: 300;
}
input {
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid #ccc;
color: #ddd;
font-size: 15px;
box-sizing: border-box;
padding-left: 10px;
outline: none;
font-weight: 200;
}
input[name='phone'] {
position: relative;
}
.telAside, .emailAside {
position: absolute;
text-align: center;
padding: 0 4px;
height: 30px;
line-height: 30px;
background-color: #4169e18c;
border-radius: 5px;
color: #ffffffb5;
top: 112px;
right: 320px;
font-size: 14px;
cursor: pointer;
display: none;
}
.emailAside {
top: 187px;
}
aside:hover {
background-color: #4169e1c7;
color: #ffffffeb;
}
input[name='score'], input[name='admissionDate'], input[name='graduationDate'],input[type='submit'],input[id='college'] {
color: #000;
}
input[type='submit'] {
margin-top: 30px;
background-color: #eae9e9;
}
</style>
<script>
$(function () {
invalidSj($("#phone"), $(".telAside"));
invalidSj($("#Email"), $(".emailAside"));
/**
* 验证错误动画效果
* @param ele
*/
function animatePattern(ele) {
if (true) {
ele.css("display", "block").animate({"right": 320 - 10}, 200, function () {
ele.animate({"right": 320}, 200, function () {
ele.animate({"right": 320 - 10}, 200, function () {
ele.animate({"right": 320}, 200)
})
})
});
}
}
/**
* input验证事件
* @param ele 点击的input
* @param error 对应的错误区域
* @param fn 多次调用input验证事件
*/
function invalidSj(ele, error, fn) {
ele.on("invalid", function (e) {
e.preventDefault();
true ? animatePattern(error) : error.css({"display": "none"});
if (fn) {
fn();
}
})
}
});
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名：</label>
<input type="text" placeholder="请输入用户名" name="userName" id="userName" autofocus>
<label for="phone">手机号码：</label>
<input type="tel" name="phone" id="phone" pattern="^1[3|4|5|7|8][0-9]{9}$">
<aside class="telAside">请输入正确的11位手机号</aside>
<label for="Email">邮箱地址：</label>
<input type="email" name="Email" id="Email"
pattern="^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$">
<aside class="emailAside">请输入正确的邮箱</aside>
<label for="college">所属学院：</label>
<input type="text" id="college" list="clgList" placeholder="请选择学院">
<datalist id="clgList">
<option value="前端"></option>
<option value="c"></option>
<option value="java"></option>
</datalist>
<label for="score">入学成绩</label>
<input type="number" name="score" id="score" value="0" max="100" min="0">
<label for="admissionDate">入学日期：</label>
<input type="date" name="admissionDate" id="admissionDate">
<label for="graduationDate">毕业日期：</label>
<input type="date" name="graduationDate" id="graduationDate">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
表单总结小案例
H5多媒体标签与其属性
<!--audio:音频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放-->
<!--<audio src="../mp3/aa.mp3" controls></audio>-->
<!--video：视频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
width:视频的宽度
height:视频的高度
-->
<!--注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放-->
<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>-->
<!--source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择-->
<!--<video src="../mp3/flv.flv" controls></video>-->
<video controls>
<!--视频源，可以有多个源-->
<source src="../mp3/flv.flv" type="video/flv">
<source src="../mp3/mp4.mp4" type="video/mp4">
</video>
H5类样式操作(添加样式，移除样式，切换样式，是否包含此样式)
<style>
.red {
color: red;
}
.green {
color: green;
}
.yellow {
color: yellow;
}
.underList {
text-decoration: underline;
}
</style>
<ul>
<li>java</li>
<li class="green">c</li>
<li>前端</li>
<li>php</li>
</ul>
<input type="button" value="给第一个li添加red样式和underList样式" id="add">
<input type="button" value="给第二个li移除green样式" id="remove">
<input type="button" value="给第三个li切换yellow样式" id="toggle">
<input type="button" value="判断第四个li是否包含某个样式" id="contains">
<script>
window.onload = function () {
document.querySelector("#add").addEventListener("click", function () {
/*add:为元素添加指定的样式，一次只能添加一个样式*/
/*querySelector("li"):querySelector获取的是单个标签如有多个获取的是第一个符合条件的标签*/
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underList");
});
document.querySelector("#remove").addEventListener("click", function () {
/*remove:为元素移除指定的样式*/
/*querySelectorAll("li")[1]:querySelectorAll获取的是个数组*/
document.querySelectorAll("li")[1].classList.remove("green");
});
document.querySelector("#toggle").addEventListener("click", function () {
/*toggle:切换样式，有则移除，无则添加*/
document.querySelectorAll("li")[2].classList.toggle("yellow");
});
document.querySelector("#contains").addEventListener("click", function () {
/*contains:判断这个元素是否有这个样式，返回的结果是布尔值*/
let isContains = document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContains);
});
}
</script>
H5自定义属性
<!--定义-->
<!--规范：
1.data-开头
2.data-后必须至少有一个字符，多个单词使用-连接
建议：
1.名称应该都使用小写--不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要副作用纯数字-->
<p data-class-name="itcast">H5C3学习</p>
<!--取值-->
<script>
window.onload=function(){
var p=document.querySelector("p");
/*获取自定义属性值*/
/*将data-后面的单词使用camel命名法连接:必须使用camel合法法获取值否则有可能无法获取到值*/
var value=p.dataset["className"];
console.log(value);
}
</script>
H5监测网络状态事件
监测网络状态事件
C3选择器
/*属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素*/
/*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/
li[style]{
text-decoration: underline;
}
/*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签 =是严格匹配*/
li[class=red]{
/*font-size: 30px;*/
}
/*3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签*/
li[class*=red]{
/*font-size: 30px;*/
}
/*4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签*/
li[class^=blue]{
font-size: 30px;
}
/*5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签*/
li[class$=blue]{
/*font-size: 30px;*/
}
.first{
color: red;
}
/*兄弟伪类：
+：获取当前元素的相邻的满足条件的元素
~：获取当前元素的满足条件的兄弟元素*/
/*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素
1.相邻
2.必须是指定类型的元素*/
.first + li{
color: blue;
}
/*下面样式查找添加了.first样式的元素的所有兄弟li元素
1.必须是指定类型的元素*/
.first ~ li{
color: pink;
}
/*相对于父元素的结构伪类*/
/*E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型*/
/*下面这句样式查找：li的父元素中的第一个li元素
1.相对于当前指定元素的父元素
2.查找的类型必须是指定的类型*/
li:first-child{
color: red;
}
/*E:last-child:查找E元素的父元素中最后一个指定类型的子元素*/
li:last-child{
background-color: skyblue;
}
/*查找的时候限制类型 first-of-type*/
/*1.也是相对于父元素
2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}
/*指定索引位置 nth-child(从1开始的索引||关键字||表达式)*/
li:nth-child(5){
background-color: lightblue;
}
/*偶数个元素添加背景 even:偶数 odd:奇数*/
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}
/*想为前面的5个元素添加样式*/
/*n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-last-of-type(-n+5){
font-size: 30px;
}
li:nth-of-type(-n+5){
font-size: 30px;
}
/*空值:没有任何的内容，连空格都没有*/
li:empty{
background-color: red;
}
/*E:target:可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式*/
h2:target{
color: red;
}
/*获取第一个字符：实现首字下沉*/
p::first-letter{
color: red;
font-size: 30px;
float: left;/*文本环绕*/
}
/*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/
p::first-line{
text-decoration: underline;
}
/*设置当前选中内容的样式*/
p::selection{
background-color: pink;
color: red;
/*它只能设置显示的样式，而不能设置内容大小*/
/*font-size: 30px;*/
}
C3颜色使用
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
/*1.使用预设了值*/
/*background-color: red;*/
/*2.使用颜色拾取器*/
/*background-color: #c9ffa6;*/
/*rgb(红，绿，蓝)*/
/*background-color: rgb(255,150,0);*/
/*hsl(颜色(0~360)，饱和度(0%~100%)，明度(0%~100%))*/
/*明度默认是50%,一般建议保留50的值*/
/*background-color: hsl(300,100%,50%);*/
/*h5中的颜色设置*/
/*rgba(红色，绿色，蓝色，透明度)
透明度：0代表完全透明 1代表完成不透明 不会影响子元素*/
/*background-color: rgba(255,0,255,0.2);*/
background-color: hsla(300,100%,50%,0.2);
}
C3 text-shadow效果案例(x,y,羽化/模糊,color)
text-shadow效果案例
C3盒模型 box-sizing
/*content-box:你设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度*/
box-sizing:content-box;/*默认值*/
/*border-box:你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。如果添加了padding和border,那么真正放置内容的区域会减小--但是它可以稳固页面的结构*/
box-sizing:border-box;
C3圆角 border-radius
/*添加边框圆角*/
/*1.设置一个值：四个角的圆角值都一样*/
/*border-radius: 10px;*/
/*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/
/*border-radius: 10px 30px;*/
/*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/
/*border-radius: 10px 40px 60px;*/
/*4.设置四个值：左上 右上 右下 左下*/
/*border-radius: 10px 30px 60px 100px;*/
/*添加/是用来设置当前个不同方向的半径值 水平x方向/垂直y方向*/
/*border-radius: 100px/50px;*/
/*添加某个角点的圆角*/
/*border-radius: 0px 50px 0px 0px;*/
/*border-上下-左右-radius:*/
/*border-top-right-radius: 100px;
border-top-left-radius: 100px;*/
/*border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;*/
/*设置某个角点的两个方向上的不同圆角*/
/*border-top-right-radius: 100px 50px;
border-bottom-left-radius: 80px 40px;
border-bottom-right-radius: 60px 30px;
border-top-left-radius: 40px 20px;*/
/*如果想设置四个角点的不同方向上的不同圆角值*/
/*分别是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/
border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;
H5C3 android机器人案例🤭
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
background: #ccc;
}
main {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
box-sizing: border-box;
}
header, footer, aside {
height: 125px;
width: 250px;
margin: 0 auto;
background-color: green;
position: relative;
}
header {
border-top-left-radius: 120px;
border-top-right-radius: 120px;
height: 115px;
margin-bottom: 10px;
}
header > span {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #fff;
position: absolute;
bottom: 40px;
}
header > span:first-of-type {
left: 60px;
}
header > span:last-of-type {
right: 60px;
}
aside {
height: 250px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
aside:before, aside:after {
content: "";
height: 175px;
width: 30px;
background-color: green;
border-radius: 10px;
position: absolute;
top: 25px;
}
aside:before {
left: -50px;
}
aside:after {
right: -50px;
}
footer {
background-color: #CCC;
height: 0;
}
footer:before, footer:after {
content: "";
width: 30px;
height: 90px;
background-color: green;
position: absolute;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
footer:before {
left: 60px;
}
footer:after {
right: 60px;
}
</style>
</head>
<body>
<main>
<header>
<div></div>
<span></span>
<span></span>
</header>
<aside></aside>
<footer></footer>
</main>
</body>
</html>
android机器人案例
C3 文本阴影与边框阴影
<!--文本阴影：text-shadow:offsetX offsetY blur color-->
<!--边框阴影：box-shadow:h v blur spread color inset
h:水平方向的偏移值
v:垂直方向的偏移值
blur:模糊--可选，默认0
spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0
color:颜色--可选，默认黑色
inset:内阴影--可选,默认是外阴影-->
C3 渐变之线性渐变
/*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/
/*方向：
to top:0deg
to right:90deg
to bottom:180deg --默认值
to left:270deg*/
/*background: linear-gradient(to right,red,blue)*/;
background:linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
C3 渐变之径向渐变
/*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
形状shape:circle:产生正方形的渐变色 ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/
/*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
/*background: radial-gradient(at left top,red,blue);*/
background:radial-gradient(red,red 50%,blue 50%,blue);
C3 背景样式
/*1.添加背景颜色*/
background-color:red;
/*2.设置背景平铺*/
/*round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
background-repeat:space;
/*3.设置在滚动容器的背景的行为*/
/*fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scroll的区别：前提是滚动当前容器的内容
local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动*/
background-attachment: scroll;
背景图片缩放居中显示
/*一定要设置宽度*/
width:100%;
/*设置背景图片的大小*/
background-size:cover;
/*设置position*/
background-position:center;
结合精灵图提示移动端用户响应区域的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
/*提升移动端响应区域的大小*/
a {
width: 50px;
height: 50px;
display: block;
background-color: #ddd;
margin: 100px auto;
box-sizing: border-box;
background-image: url("../images/sprites.png");
/*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
background-position: -20px 0;
/*添加padding*/
padding: 14px;
/*设置背景坐标的原点
border-box:从border的位置开始填充背景，会与border重叠
padding-box:从padding的位置开始填充背景，会与padding重叠
content-box:从内容的位置开始填充背景*/
background-origin: content-box;
/*设置内容的裁切:设置的是裁切，控制的是显示
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>
提升移动端响应区域的大小
C3 边框图片案例 聊天对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: auto;
border: 10px solid red;
margin:100px auto;
/*添加边框图片*/
border-image-source: url("../images/btn_bg.png");
/*设置受保护的区域大小*/
border-image-slice: 10 fill;
/*设置边框图片的宽度
1.明确圆角的大小
2.明确受保护的区域的大小*/
border-image-width: 10px;
/*设置背景平铺效果 默认是stretch：拉伸*/
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div>边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置</div>
</body>
</html>
聊天对话框
C3 过渡
添加过度效果后，过度效果执行完毕之后默认会还原到原始的状态。
/*1.transition-property:添加过渡效果的样式属性名称*/
transition-property:left;
/*2.transition-duration:过渡效果的耗时 以秒做为单位*/
transition-duration:2s;
/*3.transition-timing-function:设置时间函数--控制运动的速度*/
transition-timing-function:linear;
/*4.transition-delay:过渡效果的延迟*/
transition-delay: 2s;
过渡简写
/*transition:属性名称 过渡时间 时间函数 延迟*/
transition:left 2s linear 0s;
为多个样式同时添加过渡效果(用逗号连接)
transition:left 2s linear 0s,background-color 5s linear 0s;
为所有样式添加过渡效果 all
1.所有样式的过渡效果一样
2.效率低下，它会去查询所有添加的样式
3.建议：以后不要这么写
transition:all 1s;
指定过渡效果分n次完成 steps(n);
/*分四次完成*/
transition:background-color 2s steps(4);
C3 transform 二维
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加过渡效果 css样式名称 耗时*/
transition: transform 2s;
}
/*移动translate*/
div:first-of-type:active{
/*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
1.如果只有一个参数就代表x方向
2.如果有两个参数就代表x/y方向*/
/*transform: translate(100px);*/
/*transform: translate(400px,500px);*/
/*transform: translate(0px,500px);*/
/*添加水平或者垂直方向的移动*/
/*transform:translateX(300px);*/
transform:translateY(300px);
}
/*缩放：scale*/
div:nth-of-type(2):active{
/*实现缩放 1指不缩放，>1.01放大 <0.99缩小 参照元素的几何中心
1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
2.如果有两个参数，就代表x/y方向*/
/*transform: scale(2);*/
/*transform: scale(2,1);*/
/*缩放指定的方向 */
/*transform:scaleX(0.5);*/
transform:scaleY(0.5);
}
/*旋转：rotate*/
div:nth-of-type(3){
/*设置旋转轴心
1.x y
2.关键字：left top right bottom center*/
background-color: purple;
transform-origin: left top;
}
div:nth-of-type(3):active{
/*transform:rotate(-90deg);
transform: translateX(700px);*/
/*同时添加多个transform属性值*/
transform: translateX(700px) rotate(-90deg);
/*transform: rotate(-90deg) translateX(700px);*/
}
/*斜切：skew*/
div:nth-of-type(4):active{
background-color: blue;
/*如果角度为正，则往当前轴的负方向斜切，如果角度为，则往当前轴的正方向斜切*/
transform:skew(-30deg);
/*transform:skew(30deg,-30deg);*/
/*设置某个方向的斜切值*/
/*transform:skewX(30deg);*/
/*transform:skewY(30deg);*/
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
C3无缝滚动动画
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 882px;
height: 86px;
background-color: #000;
overflow: hidden;
margin: 100px auto;
}
ul {
width: 200%;
list-style-type: none;
animation-name: moveUl;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
cursor: pointer;
}
ul > li {
float: left;
transition: transform 1s, opacity 1s;
}
ul:hover {
animation-play-state: paused;
}
ul > li:hover {
/*transform: scale(1.1);*/
opacity: 0.5;
}
@keyframes moveUl {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
无缝滚动动画
钟表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.clock{
width: 300px;
height: 300px;
border: 10px solid #ccc;
/*border-radius: 160px;*/
/*百分比参照元素的实际宽高*/
border-radius: 50%;
margin:100px auto;
position: relative;
}
.line{
width: 8px;
height: 300px;
background-color: #ccc;
position: absolute;
/*参照父容器的宽*/
left: 50%;
top:0;
/*参照元素本身*/
transform: translate(-50%,0);
}
.line1,.line4{
width: 10px;
}
.line2{
transform: translate(-50%,0) rotate(30deg);
}
.line3{
transform: translate(-50%,0) rotate(60deg);
}
.line4{
transform: translate(-50%,0) rotate(90deg);
}
.line5{
transform: translate(-50%,0) rotate(120deg);
}
.line6{
transform: translate(-50%,0) rotate(150deg);
}
.cover{
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.hour{
width: 6px;
height: 80px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
transform-origin: center bottom;
animation: clockAnimation 43200s linear infinite;
}
.minute{
width: 4px;
height: 90px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
transform-origin: center bottom;
animation: clockAnimation 3600s linear infinite;
}
.second{
width: 2px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
/*设置旋转轴心*/
transform-origin: center bottom;
/*添加动画*/
animation: clockAnimation 60s infinite steps(60);
/*steps(60)与animation-timing-function的其它属性冲突*/
/*animation-timing-function: steps(60);*/
}
.center{
width: 20px;
height: 20px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/*创建动画*/
@keyframes clockAnimation {
from{
transform:translate(-50%,-100%) rotate(0deg);
}
to{
transform:translate(-50%,-100%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
</body>
</html>
钟表案例
C3过渡手风琴效果案例
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.menu {
margin: 100px auto;
width: 200px;
cursor: pointer;
}
.menu h3 {
background-color: rebeccapurple;
text-align: center;
}
.menu > .item > .itemBox {
height: 0;
overflow: hidden;
transition: height 1s;
}
.menu > .item > .itemBox ul {
list-style-type: none;
background-color: darkcyan;
}
.menu > .item:hover > .itemBox {
height: 88px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>省内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>国内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>国际新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
</div>
</body>
</html>
过渡手风琴效果案例
C3 transform 三维
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加过渡*/
transition: transform 2s;
}
/*添加三维移动--3D移动*/
div:first-of-type:active{
/*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
/*transform: translate3d(400px,0,0);*/
/*transform: translate3d(400px,400px,0);*/
transform: translate3d(0px,0px,400px);
}
/*添加三维缩放*/
div:nth-of-type(2):active{
/*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
>1.01 放大 <0.99 缩小*/
/*transform:scale3d(2,0.5,10);*/
transform:scale3d(1,1,10);
}
/*添加三维旋转*/
div:nth-of-type(3):active{
/*rotate3d(x,y,z,angle):
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值*/
transform: rotate3d(1,1,1,330deg);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
C3立方体衍生个人主页网站特效
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#main {
background-color: #40584c;
transition: background-color 2s;
position: relative;
}
.box {
width: 200px;
height: 200px;
position: relative;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transition: transform 2s ease-in-out, perspective 2s, opacity 2s;
transform: /* rotate3d(1, 1, 0, -30deg)*/ translate(-50%, -50%);
perspective: 50px;
}
.box > div {
position: absolute;
opacity: 0.6;
width: 200px;
height: 200px;
transition: background-color 2s, all 2s;
text-align: center;
line-height: 200px;
cursor: pointer;
border-radius: 4px;
}
.front {
/* background-color: red;*/
transform: translateZ(100px);
display: none;
}
.box > .back {
background-color: yellow;
border-radius: 20px;
transform: skew(-10deg, -10deg);
/*transform: translateZ(-100px) rotateY(180deg);*/
}
.left {
/*background-color: orange;*/
transform: translateX(-100px) rotateY(-90deg);
display: none;
}
.right {
/*background-color: blue;*/
transform: translateX(100px) rotateY(90deg);
display: none;
}
.top {
/*background-color: rebeccapurple;*/
transform: translateY(-100px) rotateX(90deg);
display: none;
}
.bottom {
/*background-color: seagreen;*/
transform: translateY(100px) rotateX(-90deg);
display: none;
}
.box:hover {
transform: rotate3d(1, 1, 0, -375deg);
perspective: 600px;
}
.box:hover > div {
opacity: 0.4;
top: -50%;
left: -50%;
font-size: 12px;
color: #fff;
}
.box:hover > .front, .box:hover > .top, .box:hover > .bottom, .box:hover > .left, .box:hover > .right {
display: block;
}
.box:hover > .back, .box:hover > .top, .box:hover > .bottom, .box:hover > .left, .box:hover > .right {
opacity: 0.2;
}
.box:hover > .front {
background-color: red;
}
.box:hover > .back {
border-radius: 0;
transform: translateZ(-100px) rotateY(180deg) skew(0, 0);
}
.box:hover > .top {
background-color: rebeccapurple;
}
.box:hover > .bottom {
background-color: seagreen;
}
.box:hover > .left {
background-color: orange;
}
.box:hover > .right {
background-color: blue;
}
.topZD, .bottomZD {
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
left: 0;
display: none;
z-index: 9999;
}
.topZD {
top: 0;
}
.bottomZD {
bottom: 0;
}
.test {
display: none;
font-size: 30px;
}
</style>
</head>
<body>
<main id="main">
<div class="topZD"></div>
<div class="box">
<div class="front"></div>
<div class="back">鼠标移入开始我们的故事</div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bottomZD"></div><!--页面开启动画结束-->
<div class="test">
<img src="images/bg.jpg" alt="">
</div>
</main>
<script src="jquery-2.2.4.js"></script>
<script>
window.onload = function () {
let $box = document.getElementsByClassName("box")[0];
$box.onmouseover = function () {
document.body.style.backgroundColor = "#008b8b";
};
$box.onmouseout = function () {
document.body.style.backgroundColor = "#40584c";
};
//获取浏览器的高度
let llqHeight = window.innerHeight;
document.getElementById("main").style.height = llqHeight + "px";
};
$(".back").on("mouseenter", function () {
setTimeout(function () {
console.log(11)
$(".topZD").slideDown(1000).slideUp(1000);
$(".bottomZD").slideDown(1000).slideUp(1000);
$(".box").css("display", "none");
$(".test").fadeIn(1800);
$("#main").css("backgroundColor", "#fff");
}, 1300);
});
</script>
</body>
</html>
立方体衍生个人主页网站特效
立方体衍生个人主页网站特效
多列布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
padding: 20px;
box-sizing: border-box;
/*设置多列布局*/
/*1.设置列数*/
column-count: 3;
/*2.添加列间隙样式,与边框样式的添加一样*/
column-rule: dashed 3px red;
/*3。设置列间隙大小*/
column-gap: 50px;
/*4.设置列宽
原则：取大优先
1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度--填充满整个屏幕
2.如果人为设置宽度更小，使用默认计算的宽度*/
column-width: 200px;
}
h4{
/*设置跨列显示 1 / all*/
column-span: all;
}
</style>
</head>
<body>
<div class="wrapper">
<h4>CSS3简介</h4>
<p>
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
</p>
<p>1、
CSS3圆角表格
CSS3圆角表格
圆角表格，对应属性：border-radius。
2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。
3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。
边框
border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果
</p>
<p>
变形(transform)、转换(transition)和动画(animation)
transform: rotate | scale | skew | translate |matrix;
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:
Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。[2]
</p>
</div>
</body>
</html>
多列布局案例
C3 弹性盒模型
/*设置父容器为伸缩盒子：会使每一个子元素自动变成伸缩项*/
display:flex;
/*设置子元素的排列方式
flex-start:让子元素从父容器的起始位置开始排列
flex-end:让子元素从父容器的结束位置开始排列
center:让子元素从父容器的中间位置开始排列
space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍*/
justify-content:space-around;
/*flex-flow:是flex-wrap和flex-direction的综合
flex-wrap:控制子元素是否换行显示，默认不换行
nowrap:不换行--则收缩
wrap:换行
wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列*/
/*flex-wrap: wrap;*/
/*flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)
row:水平排列方向，从左到右
row-reverse:水平排列方向，从右到左
column:垂直排列方向，从上到下
column-reverse：垂直排列方向，从下到上*/
/*flex-direction: column-reverse;*/
flex-flow:row wrap;
设置在子元素上 空间比例值
/*flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
flex-grow:1;
flex菜单伸缩案例
<!DOCTYPE html>
<html lang="en">
<head>
<!--来自一个很想要很牛逼的程序员-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 600px;
height: 500px;
border: 1px solid #ccc;
box-sizing: border-box;
margin: 100px auto;
}
ul {
list-style-type: none;
background-color: darkcyan;
display: flex;
width: 100%;
height: 36px;
}
.box > ul > li {
line-height: 36px;
text-align: center;
border: 1px solid #2f2a2b;
flex: 1;
transition: flex 1s linear;
}
.box > ul > li:hover{
flex: 1.5;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>这是第一个</li>
<li>这是第二个</li>
<li>这是第三个</li>
<li>这是第四个</li>
</ul>
</div>
</body>
</html>
flex菜单伸缩案例
宽高自动适应案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.layout{
width: 500px;
height: 600px;
background-color: #CCCCCC;
margin:10px auto;
/*设置父容器为伸缩盒子*/
display: flex;
/*默认的主轴是row,这里需要以列的方式进行排列*/
flex-direction: column;
}
header{
width: 100%;
height: 60px;
background-color: red;
}
main{
width: 100%;
background-color: green;
/*让当前伸缩项占据父容器的剩余空间*/
flex: 1;
/*让main成为伸缩盒子*/
display: flex;
}
main > article{
height: 100%;
flex: 1;
background-color: pink;
}
main > aside{
height: 100%;
flex: 3;
background-color: darkblue;
}
footer{
width: 100%;
height: 80px;
background-color: purple;
}
</style>
</head>
<body>
<div class="layout">
<header></header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
</div>
</body>
</html>
宽高自动适应案例
