html+css一些简单案例：爱心点击，盒子模型，2d动画
canvas绘制爱心
效果预览
上代码
HTML5 Canvas爱心飘动动画特效
表格标签
- 表格标签学习
table：声明一个表格- 属性：
- border:给表格加边框
- width设置表格的宽度
- height设置表格高度
- cellpadding设置内容距边框的距离
- cellspacing设置边框的大小
- 元素
- th：声明一个单元格默认加黑
- tr:声明一行
- td：声明一个单元格
- 属性：
- width设置表格的宽度
- height设置表格高度
- cowspan行合并
- rowspan列合并
- 特点：默认根据数据的大小显示
- 属性：
时间册图片链接2017.html
-
第一张
-
第一张
-
第一张
-
第一张
-
第一张
-
第一张
-
第一张
图标引用
照片墙案例
效果预览
时间册图片链接2017.html
-
第一张
-
第一张
-
第一张
-
第一张
-
第一张
-
第一张
-
第一张
上代码
css的样式使用
注册页面
效果预览
上代码
注册页面
注册页面
爱心点击
效果预览
上代码
my css调用
/*!
* 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选择器
- 标签选择器：标签名{样式名1：样式名2；...}
- 作用：会将当前网页内所有的该标签增加相同的样式
- id选择器：#标签的id属性值{样式名1：样式名2；...}
- 作用：给某个指定的标签添加指定样式
- 类选择器：.类选择器名{样式名1：样式名2；...}
- 作用：给不同的标签添加相同的样式
- 全部选择器：*{样式名1：样式名2；...}
- 作用：选择所有的HTML标签，并添加相同的样式
- 组合选择器：选择器1，选择器2，......{样式名1：样式名2；..}
- 作用：解决不同的选择器之间重复样式的问题
- 子标签选择器：选择器1 子标签选择器{样式名1：样式名2；...}
- 属性选择器：标签名[属性名=属性值]{样式名1：样式名2；...}
- 作用：选择某标签指定具备某属性值为某属性值的标签，逐级递减添加到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配置
html学习
变形2d案例
效果预览
上代码
Document
2D平移
2D旋转
2D缩放
2D扭曲
2D综合
导航块案例
效果预览
上代码
导航块
动画案例
效果预览
上代码
donghua
css3 animated buttons