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列合并
- 特点：默认根据数据的大小显示
- 属性：
标签
- 无序列表ul
- li：一个行数据（默认数据前有黑圆点）
- 有序列表ol
- type：1，a等等（顺序由小到大）
- 自定义列表dl
- dt数据标题
- dd一行数据
标题标签
- 标题标签：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配置
<!--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>
html+css一些简单案例：爱心点击，盒子模型，2d动画的更多相关文章
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- CSS之选择符、链接、盒子模型、显示隐藏元素
<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...
- css的核心内容 标准流、盒子模型、浮动、定位等分析
1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换 ...
- CSS块级-内联元素，盒子模型
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...
- 后端码农谈前端（CSS篇）第六课：盒子模型
元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边 ...
- CSS中的盒子模型详解
很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和paddin ...
- DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
- CSS盒子模型小剖析
前段时间刚刚从C/S过度到B/S,提到B/S就不能说CSS,而说起CSS又不能落下盒子模型.在CSS诞生的时候就有了盒子模型的概念,网页中大部分的元素都能构成一个盒子模型,.盒子模型无非就是描述的元素 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
随机推荐
- Docker学习第一天(Docker入门&&Docker镜像管理)
简介 今天小区的超市买零食老板给我说再过几天可能就卖完了我有点诧异,老板又说厂家不生产了emmm 今天总算开始docker了! 1.Docker? 1.什么是Docker Docker 是一个开源的应 ...
- jdk的切换
1.下载安装新版本的jdk 2.使用该命令,添加新版jdk alternatives --install /usr/bin/java java /opt/jdk1.8.0_144/bin/java 2 ...
- 消灭又臭又长的if-else
背景 由于目前工作岗位的原因,项目还是09年建立的,历史遗留问题也比较多,加上开发规范并不是很完善,项目中有的单个方法达到成百上千行,if-else更是连续写十几个也不累. 作为强迫症真的受不了,另一 ...
- 硕思logo设计师注册码去哪里找
硕思logo设计师注册码去哪里找呢?当然是硕思logo设计师官网啦! 最近小编总是会被网友们咨询关于logo设计的问题,其中很多网友并不是专业的设计人员,特别是一些设计公司面对新手设计时,往往会不知所 ...
- MathType如何对齐公式
作为强大的公式编辑器,MathType为我们的学习.工作带来了极大的便利.比如在写论文时,有了它,就可以轻松就把论文里的公式码完:老师在编写试卷时,利用它,可以快速编写出一份试卷.那么在编写公式时,也 ...
- 苹果电脑清理软件CleanMyMac X好用吗？
为了维护mac系统健康,优化系统功能,我们需要定期给电脑进行清理.那么作为mac清理软件CleanMyMac X软件具备哪些独特性和实用性呢?今天就给大家说明一下. 1. 简洁大气的外观. 用户正版官 ...
- 使用Camtasia 让照片变身动态视频
视觉化影像已经慢慢渗入我们平日的生活了,很多人已经慢慢地从单纯的文字记录,发展到使用照片记录生活,而视频化的记录也随着智能手机的普及而迅速发展起来.对于一些曾经使用照片记录的瞬间,我们也可以将其变身为 ...
- 二分查找 leetcode704
class Solution { public int search(int[] nums, int target) { int l=0; int r=nums.le ...
- python+requests之接口测试
最近学习接口测试,测试工具玩的差不多了,想用代码来尝试一下. 发现一个简单的库,requests 一:安装 pip install requests 二:使用 import requests url ...
- Pytest自动化测试 - 完美结合Allure
简介 Allure Framework是一种灵活的.轻量级.多语言测试报告工具. 不仅可以以简洁的网络报告形式非常简洁地显示已测试的内容, 而且还允许参与开发过程的每个人从日常执行中提取最大程度的有用 ...