html+css一些简单案例：爱心点击，盒子模型，2d动画
canvas绘制爱心
上代码
<!doctype html>
<html>
<head>
<title>HTML5 Canvas爱心飘动动画特效</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="c"></canvas>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
</script>
<script>
eval('var M=Math,n=M.pow,i,E=2,F="rgba(233,61,109,",d=M.cos,z=M.sin,L=1,u=30,W=window,w=c.width=W.innerWidth,h=c.height=W.innerHeight,r=_1){return M.random()*2-1},y="px Arial",q="♥",X=w/2,Y=h/2,T=4,p=_1){var e=this;e.g=_1){e.x=X;e.y=Y;e.k=0;e.l=0;e.t=M.random()*19000;e.c=e.t};e.d=_1){a.fillStyle=F+(e.c/e.t)+")";a.fillText(q,e.x,e.y);e.c-=50;e.x+=e.k;e.y+=e.l;e.k=e.k+r();e.l=e.l+r();if(e.c<0||e.x>w||e.x<0||e.y>h||e.y<0){e.g()}};e.g()},A,B;a.textAlign="center";a.strokeStyle="#000";a.lineWidth=2;for(i=0;i<350;i++){M[i]=new p()}setInterval(_1){a.clearRect(0,0,w,h);a.font=u+y;X=(w/6*n(z(T),3)+w/2);Y=0.8*(-h/40*(13*d(T)-5*d(2*T)-2*d(3*T)-d(4*T))+h/2.3);T+=(z(T)+3)/99;for(i=0;i<350;i++){with(M[i]){A=(x/w-0.5)*2,B=-(y/h-0.5);if(L&&(A*A+2*n((B-0.5*n(M.abs(A),0.5)),2))>0.11){k=l=0}d()}}a.font=120+y;if(E>0.1){if(E<1){a.fillStyle=F+E+")";}E-=0.02}a.fillStyle="#E93D6D";a.fillText(v,X,Y+u);a.strokeText(v,X,Y+u)},50);b.bgColor="#FFEFF2";c.οnmοuseup=_1){L=(L)?0:1}'
.replace(/(_1)/g, 'function('))
</script>
</body>
</html>
表格标签
- 表格标签学习
table：声明一个表格- 属性：
- border:给表格加边框
- width设置表格的宽度
- height设置表格高度
- cellpadding设置内容距边框的距离
- cellspacing设置边框的大小
- 元素
- th：声明一个单元格默认加黑
- tr:声明一行
- td：声明一个单元格
- 属性：
- width设置表格的宽度
- height设置表格高度
- cowspan行合并
- rowspan列合并
- 特点：默认根据数据的大小显示
- 属性：
标签
- href：网页路径（本地资源或者网页资源）
- target:网页显示位置
- _self在当前页显示
- _blank在新的标签显示
- _top在顶层显示
- _parent在父级页面显示（类似于上一级）
css的盒子模型
div标签：块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在
特点：
默认宽度是页面的宽度，但是可以设置
高度默认是没有的,但是可以设置（可以顶开）
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
盒子模型：
外边距：margin
作用：设置元素与元素之间的间隔
居中设置：margin：0px auto；上下间距10px;左右居中
可以根据需求单独的设置上下左右的边距
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框之间的距离（往外扩）
注意：内边距不会改变内容区域大小，可以单独设置上下左右的大小
内容区域：
iframe内嵌标签
- src：显示网页资源路径，可以是本地也可以是网络资源
（注意默认当前页面打开及加载src指向的资源） - width：设置显示区域的宽度
- height：设置显示区域的高度
- name：设置内嵌区域的名字，结合超链接标签的target属性
- 特点：在当前网页中加载其他网页的1资源，达到不同网页资源1之间不互相干扰，并能在同一个网页中展现用户的目的
示例
<!DOCTYPE html>
<html>
<head>
<title>相册集</title>
<meta charset="utf-8">
<link rel="icon" href="../images/龙.png" type="image/x-icon">
<link rel="stylesheet" href="../css/时间册.css">
</head>
<body>
<div id="div01">
<img src="../images/时间册前景.png" alt="">
<!--我是前景,前景设置设置-->
</div>
<div id="div02">
<!--我是首页首页设置-->
<ul class="nav-main">
<li><a href="">Welcome To The Cat Home</a></li>
<li id="change"><a href="东血的自我介绍.html">Introducation</a></li>
<li id="change"><a href="">Photo</a></li>
</ul>
</div>
<div id="div03">
<ul class="nav">
<li><a href="时间册图片链接2017.html"target="年">2017</a></li>
<li><a href="时间册图片链接2018.html"target="年">2018</a></li>
<li><a href="时间册图片链接2019.html"target="年">2019</a></li>
</ul>
<!--时间线，定块时间选择-->
</div>
<div id="div04">
<!--图库-->
<iframe src="" width="1200px" height="1200px" name="年"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>时间册图片链接2017.html</title>
<meta charset="utf-8" />
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
<li>
<img src="../images/狗.jpg" width="40px" height="40px" alt="" />
<p>第一张</p>
</li>
</ul>
</body>
</html>
图标引用
<link rel="icon" href="t01e66ad58688a7e4f5.jpg" type="image/x-icon">
照片墙案例
上代码
<!DOCTYPE html>
<html>
<head>
<title>css的样式使用</title>
<meta charset="utf-8" />
<style type="text/css">
/*设置body样式*/
body {
text-align: center;
background-color: gray;
}
/*设置图片样式*/
img {
width: 12%;/*设置高度*/
/*border:solid 1px red;设置边框*/
padding:10px;/*设置内边距*/
background-color: white;/*设置背景颜色*/
transform: rotate(-10deg);/*设置倾斜角度*/
margin: 20px;/*设置外边距*/
}
/*使用伪类给标签添加样式*/
img:hover{
border: solid 2px red;
transform: rotate(0deg)scale(1.5);/*设置旋转角度和缩放比列*/
z-index:1 ;/*设置显示优先级别*/
transition: 1.5s;/*设置显示加载时间*/
}
</style>
</head>
<body>
<br /><br /><br />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" /><br>
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
<img src="../images/狗.jpg" alt="" />
</body>
</html>
注册页面
上代码
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>注册页面</h3>
<hr/>
<form action="#"method="get">
<table border="1px"cellspacing="0"cellpadding="5px">
<tr height="35px">
<td width="80px">用户名：</td>
<td width="200px">
<input type="text"name="uname"id="uname"value=""/>
</td>
</tr>
<tr height="35px">
<td>密码：</td>
<td>
<input type="password"name="pwd"id="pwd"value=""/>
</td>
</tr>
<tr height="35px">
<td>邮箱：</td>
<td>
<input type="text"name="mail"id="mail"value=""/>
</td>
</tr>
<tr height="35px">
<td>手机号：</td>
<td>
<input type="text"name="phone"id="phone"value=""/>
</td>
</tr>
<tr height="35px">
<td>性别：</td>
<td>
男<input type="radio"name="sex"id="sex"value="1"checked="checked"/>
女<input type="radio"name="sex"id="sex"value="0">
</td>
</tr>
<tr height="35px">
<td>爱好：</td>
<td>
<input type="checkbox"name="fav"id="fav"value="1"/>唱歌
<input type="checkbox"name="fav"id="fav"value="2"/>打球
<input type="checkbox"name="fav"id="fav"value="3"/>睡觉
</td>
</tr>
<tr height="35px">
<td>籍贯：</td>
<td>
<select name="address" id="">
<option value="1">---请选择---</option>
<option value="2">信阳</option>
<option value="3">菏泽</option>
<option value="4">成都</option>
</select>
</td>
</tr>
<tr height="35px">
<td>个人介绍：</td>
<td>
<textarea name="" id="" cols="20" rows="8"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2"align="center">
<input type="checkbox"name="agree"id="agree"value="1"/>
是否同意本公司协议
</td>
<td></td>
</tr>
<tr height="35px">
<td colspan="2"align="center">
<input type="submit"name=""id=""value="注册"/>
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
爱心点击
上代码
<!DOCTYPE html>
<html>
<head>
<title>my css调用</title>
<meta charset="utf-8" />
<!--相对路径与绝对路径
相对路径是例如CSS下图调用的那个，上级目录先../回到上级然后再用CSS/文件名定位-->
<script type="text/javascript">
// 自执行匿名函数
(function (window, document, undefined) { // 传入window，document对象
var hearts = []; // 定义全局变量hearts，值为空数组
// 定义不同浏览器下的requestAnimationFrame函数实现，如果都没有，则用setTimeout实现
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
init(); // 执行初始化函数
// 定义初始化函数
function init() {
css(".heart{z-index:100000000;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); // 定义要生成的爱心的样式
attachEvent(); // 添加点击事件（爱心生成）
gameloop(); // 开始循环移除爱心（内含递归）
bindEvents();
loop();
}
// 定义循环函数移除生成的爱心
function gameloop() {
for (var i = 0; i < hearts.length; i++) { // 循环hearts数组
if (hearts[i].alpha <= 0) { // 如果当前循环的heart对象的透明度为0或小于0
document.body.removeChild(hearts[i].el); // 从body对象中移除当前循环的heart对象（通过指针）
hearts.splice(i, 1); // 从heart数组中移除当前循环的heart对象（通过下标）
continue; // 跳过当前循环，进入下一个循环
}
hearts[i].y--; // y轴自减1
hearts[i].scale += 0.004; // 缩放增加0.004
hearts[i].alpha -= 0.013; // 透明度减少0.013
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop); // 定时器定时执行，递归
}
// 定义点击事件函数
function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
// 定义创建爱心函数
function createHeart(event) {
var d = document.createElement("div"); // 创建一个div对象并赋值给变量d
d.className = "heart"; // 给div对象添加类名
hearts.push({ // 给hearts数组添加heart对象
el: d, // div对象
x: event.clientX - 5, // 鼠标当前位置x轴 - 5
y: event.clientY - 5, // 鼠标当前位置y轴 - 5
scale: 1, // 缩放
alpha: 1, // 透明度
color: randomColor() // 颜色（随机颜色）
});
document.body.appendChild(d); // 添加创建的div对象到body对象
}
// 定义生成样式函数
function css(css) {
var style = document.createElement("style"); // 创建一个style对象并赋值给变量style
style.type = "text/css"; // 给style对象添加属性并赋属性值
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style); // 添加创建的style对象到head对象
}
// 定义生成随机颜色函数
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
})(window, document);
</script>
</head>
<body>
<span class="container"></span>
<script src="../js/fairyDustCursor.js" type="text/javascript"></script>
</body>
</html>
/*!
* Fairy Dust Cursor.js
* - 90's cursors collection
* -- https://github.com/tholman/90s-cursor-effects
* -- http://codepen.io/tholman/full/jWmZxZ/
/js/fairyDustCursor.js
*/
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}
function updateParticles() {
// Updated
for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}
// Remove dead particles
for( var i = particles.length -1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
/**
* Particles
*/
function Particle() {
this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles ={
"position": "absolute",
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "16px",
"will-change": "transform"
};
// Init, and set properties
this.init = function(x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {x: x - 10, y: y - 20};
this.initialStyles.color = color;
console.log(color);
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element);
};
this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function() {
this.element.parentNode.removeChild(this.element);
}
}
/**
* Utils
*/
// Applies css `properties` to an element.
function applyProperties( target, properties ) {
for( var key in properties ) {
target.style[ key ] = properties[ key ];
}
}
init();
})();
列表标签
- 列表标签学习
- 无序列表ul
- li：一个行数据（默认数据前有黑圆点）
- 有序列表ol
- type：1，a等等（顺序由小到大）
- 自定义列表dl
- dt数据标题
- dd一行数据
- 无序列表ul
标题标签
- 标题标签：h1-h6加黑加粗按级别
- 属性：
- align：center left right（）居中，左对齐，右对齐
- 水平线标签
- hr：默认居中
- 属性：
- width=“宽度”
- size=“高度”
- color=“颜色”
- 段落标签：
- p：特点段间距大
- 换行符：br
- 空格符： 
- 权重标签：b:加黑
- i:斜体
- u：下划线
- del：删除线
CSS的声明
- 在head标签中使用style标签声明
- 作用：此声明一般声明当前网页的公共样式或者给某个标签单独样式
- 在标签上使用style属性进行声明：
- 作用：此声明会将CSS样式直接作用于当前标签
- 在head标签中使用link标签引入外部声明好的CSS文件
- 作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
- 问题：不同的声明给同一个标签操作了同一个样式，会先使用谁的？
- 执行顺序，就是CSS样式的位置
- 如果CSS的声明全部在head标签中，就遵循就近原则，谁离标签近，谁就会被显示
CSS定位position
- 相对定位：relative
- 作用：相对元素原有位置移动指定的距离（相对的自己的原有位置）
- 可以使用top,left,right,bottom来进行设置网页界面
- 注意：其他元素的位置是不改变的
- 绝对定位：absolute
- 作用：可以使用元素参照界面或者相对元素进行移动，就是上一级网块
- 注意：如果父级元素成为参照元素，必须使用相对定位属性，默认情况选是以界面为基准进行移动的
- 固定定位：fixed
- 作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置
- 以上定位都可以使用top,left,right,bottom来进行移动
- z-index:此属性是用来声明元素的显示
CSS选择器
- 标签选择器：标签名
- 作用：会将当前网页内所有的该标签增加相同的样式
- id选择器：#标签的id属性值
- 作用：给某个指定的标签添加指定样式
- 类选择器：.类选择器名
- 作用：给不同的标签添加相同的样式
- 全部选择器：*
- 作用：选择所有的HTML标签，并添加相同的样式
- 组合选择器：选择器1，选择器2，......
- 作用：解决不同的选择器之间重复样式的问题
- 子标签选择器：选择器1 子标签选择器
- 属性选择器：标签名[属性名=属性值]
- 作用：选择某标签指定具备某属性值为某属性值的标签，逐级递减添加到id选择器
form标签
- form表单标签
- 作用：收集并提交用户数据给指定服务器
- 注意1：form标签会手机其标签内部的数据
- 属性：
- action：收集到的数据提交地址就是URL
- method：收集到的数据提交方式
- get：适合小量数据，表单数据以？隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全。
- post:适合大量数据，安全，隐式提交
- 属性：
- 注意2：
- 表单数据的提交，要提交的表单项必须要有name属性值，否则不会提交
- 提交的表单项数据为键值对,健为name属性的值，值为用户书写的数据
- form标签会手机其标签内部的数据
- form表单的数据提交需要依赖submit提交按钮（value是按钮上的值）
- form表单域
- 作用：给用户提供可以进行数据书写或者选择的标签
- 使用：input type
- 文本框：
- text收集少量数据，用户可见
- password收集用户密码数据，黑点不可见
- name：数据提交的健,也会被JS使用
- value:默认值
- 单选框：radio
- name:name属性值相同的单选框只能选择一项数据
- value:要提交的数据
- checked：checked使用此属性的单选是默认状态
- 多选框：checkbox
- name:一个多选框需要使用相同的name属性值
- value：要提交的数据
- checked：checked使用此属性的单选是默认状态
- 下拉框：select
- name:数据提交的健名，必须声明
- 子标签option：一个option标签表示一个下拉选项
- value:要提交的数据
- 注意：表单数据提交的是表单域标签的value值
- 文本域：textarea
- 声明一个可以书写大量文字的文本区域
- name：数据提交的健名，js和CSS也会使用
- cows：声明文本域的行数
- rows: 声明文本域的列数
- 普通按钮：button
- 在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据使用method指明的提交方式提交给action属性所指明的提交地址
head配置
<!--head标签中主要配置浏览器的配置信息-->
<head>
<title>html学习</title><!--网页标题标签：告诉浏览器使用什么标题显示网页-->
<meta http-equiv="content-type"content="text/html;charset=utf-8"/><!--告诉浏览器使用指定格式编译文档-->
<meta name="keywords"content="html"/><!--关键字，网页描述，作者，自动刷新-->
<meta name="description"content="benwangye"/>
<meta name="author"content="wuzedong"/>
<meta http-equiv="refresh"content="5;url=http://www"/>
</head>
变形2d案例
效果预览
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #f00;
margin: 100px auto;
transition: all 2s;
}
div:nth-child(1):hover {
transform: translateX(200px);
}
div:nth-child(2):hover {
transform: rotate(90deg);
}
div:nth-child(3):hover {
transform: scale(2, 2);
}
div:nth-child(4):hover {
transform: skew(30deg, 30deg);
}
div:nth-child(5):hover {
transform: translateX(200px) rotate(90deg) scale(2, 2) skew(30deg, 30deg);
}
</style>
</head>
<body>
<div>2D平移</div>
<div>2D旋转</div>
<div>2D缩放</div>
<div>2D扭曲</div>
<div>2D综合</div>
</body>
</html>
导航块案例
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航块</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
height: 60px;
background: palegoldenrod;
}
.box1 ul {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.box1 ul li {
list-style: none;
float: left;
border-right: 1px solid #f30;
}
.box1 ul li a {
text-decoration: none;
display: block;
width: 119px;
height: 60px;
text-align: center;
line-height: 60px;
}
.box1 ul li a:hover {
background: cornflowerblue;
}
.box1 ul li.box2 {
border-right: none;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li><a href="#">导航块1</a></li>
<li><a href="#">导航块2</a></li>
<li><a href="#">导航块3</a></li>
<li><a href="#">导航块4</a></li>
<li><a href="#">导航块5</a></li>
<li><a href="#">导航块6</a></li>
<li><a href="#">导航块7</a></li>
<li class="box2"><a href="#">导航块8</a></li>
</ul>
</div>
</body>
</html>
动画案例
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>donghua</title>
<!--
为了适应不同浏览器
-webkit_(webkit/safari/旧版的chrome)
-moz-(firefox)
-ms-(ie)
-o-(opera)
-->
<style>
*{
margin: 0;
padding: 0;
/*让css3的效果兼容其他浏览器*/
/*定义当元素不面向屏幕时是否可见*/
-webkit-backface-visibility: hidden;
/*把鼠标指针放到div元素上，会产生带有平滑改变元素宽度的过渡效果*/
-webkit-transition: all 0.5s;
-moz-transition:all 0.5s;
transition: all 0.5s;
}
body{
background-color: black;
/*产生每隔20px的斜线*/
background: repeating-linear-gradient(45deg,#f6f6f6,0,#efff)
}
#container{
width: 330px;
margin: 25px auto;
}
h1{
color:#333;
font-family: open sans condensed;
font-size: 2.5em;
text-align: centerd;
margin-bottom:40px;
}
/*伪类
h1:hover{
font-size:2,5em;
}*/
/*::before和::after必须配合content属性来使用
content用来定义插入的内容，content必须有值，至少是空
默认情况下，伪类元素的display：block来改变其显示
具体情况请参考：https://www.cnblogs.com/starof/p/4459991.html*/
/*给h1标签鼠标移动上去的样式*/
h1:hover{
font-size:2.5em;
}
h1:hover::before,
h1:hover::after{
font-style:italic;
font-size:0.5em;
}
h1:hover::before{
content:"some";
}
h1:hover::after{
content:"by nobadyrocks";
}
/*transition逐步变化*/
button{
width: 100px;
height:100px;
color: #ffffff;
background-color: #3498db;
text-decoration: none;
font-size:1.8em;
border:2px #ffffff solid;
margin: 10px 0 0 5px;
-webkit-transition: all 0.5s;
-moz-transition:all 0.5s;
transition: all 0.5s;
}
button:hover{
/*鼠标 手*/
cursor: pointer;
}
.highlight:hover{
background-color: #ffffff;
color: #3498db;
}
.fade:hover{
border: 0px;
color: #009999;
opacity: 0;
}
/*transform旋转*/
.boom:hover{
/*color: #009999;
border: #009999;*/
opacity: 0;
-webkit-transform: scale(2,2);
-moz-transform:scale(2,2);
transform: scale(2,2);
/*scale缩放*/
}
.focus:hover{
border-width:20px;
}
.rotate:hover{
-webkit-transform: rotate(90deg);
-moz-transform:rotate(90deg);
transform: rotate(90deg);
/*rotate 2d旋转*/
}
.knit:hover{
height:0px;
}
.shrink:hover{
-webkit-transform: scale(0.0,0.0);
-moz-transform:scale(0.0,0.0);
transform: scale(0.0,0.0);
}
.squeeze:hover{
-webkit-transform: scale(1.5,0.0);
-moz-transform:scale(0.0,0.0);
transform: scale(0.0,0.0);
}
.deform:hover{
-webkit-transform:skew(45deg,45deg);
-moz-transform:skew(45deg,45deg);
transition: skew(45deg,45deg);
/* skew 2d倾斜*/
}
/*for the sake of responsiveness*/
/*如果html最大宽度小于330像素
则修改#container,button的样式
定义输出设备中的页面最大可见区域宽度
其他的具体情况：
http://www.runoob.com/cssref/css3-pr-mediaquery.html*/
@media(max-width:330px){
#container{
width: 100%;
}
button{
width: 90%;
margin:5% 0 0 5%;
}
}
#linkBack{
position: absolute;
right: 0px;
top: 0px;
background-color: #333;
margin: 0;
width: 60px;
}
#linkBack>a{
font-size: 14px;
text-decoration: none;
color:#fff;
padding:0 0 0 5px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="container">
<h1>css3 animated buttons</h1>
<button class="highlight">highlight</button>
<button class="fade">fade</button>
<button class="boom">boom</button>
<button class="focus">focust</button>
<button class="rotate">rotate</button>
<button class="knit">knit</button>
<button class="shrink">shrink</button>
<button class="squeeze">squeeze</button>
<button class="deform">deform</button>
</div>
<div id="linkback">
<a href="http://www"
</div>
</body>
</html>
