做电影网站要多少钱,齐齐哈尔建设网站,网站建设维护杭州,成都关键词优化技术css新手教程
课程#xff1a;14、盒子模型及边框使用_哔哩哔哩_bilibili 一.什么是CSS 1.什么是CSS
Cascading Style Sheet 层叠样式表。
CSS#xff1a;表现#xff08;美化网页#xff09;
字体#xff0c;颜色#xff0c;边距#xff0c;高度#xff0c;宽度14、盒子模型及边框使用_哔哩哔哩_bilibili 一.什么是CSS 1.什么是CSS
Cascading Style Sheet 层叠样式表。
CSS表现美化网页
字体颜色边距高度宽度背景图片网页定位网页浮动。 2.CSS发展史
CSS 1.01994年 10月提出CSS 2.0DIV块CSSHTML与CSS结构分离的思想网页变得简单SEOCSS 2.1浮动定位CSS 3.0圆角、阴影、动画…浏览器兼容性。 3.快速入门 !DOCTYPE html
html langen
headmeta charsetUTF-8titleCSS3快速入门/title!-- 规范:style可以编写CSS的代码每一个声明最好以“;”结尾语法:选择器{声明1;声明2;声明3;}--styleh1{color: blue;}/style
/head
body
h1CSS3测试/h1
/body
/html 建议使用这种规范单独写一个css文件用link标签引入css文件效果 。 CSS的优势
内容和表现分离网页结构表现统一可以实现复用样式十分的丰富建议使用独立于html的css文件利用SEO容易被搜索引擎收录 4.CSS的3种常用导入方式 !DOCTYPE html
html langen
headmeta charsetUTF-8titleCSS3快速入门/title!--外部样式--link relstylesheet hrefcss/style.cssstyle/*内部样式*/h1{color: blue;}/style/head
body!--优先级:就近原则--!--行内样式:在标签元素中编写一个style属性编写样式即可--
h1 stylecolor: aquamarineCSS3测试/h1/body
/html 拓展外部样式两种方法
1.链接式——HTML !--外部样式--link relstylesheet hrefcss/style.css 导入式—— import是CSS2.1特有的 !--导入式--styleimport url(css/style.css);/style 二.CSS选择器 1.基本选择器 (1).标签选择器。格式标签名{} !DOCTYPE html
html langen
headmeta charsetUTF-8title标签/titlestyleh1{color: orange;background: beige;border-radius: 10px;}h3{color: aquamarine;background: chocolate;border-radius: 10px;}p{font-size: 80px;}/style/headbodyh1标签选择器/h1
pAndroid/p
h3前端-CSS3/h3/body/html (2).类选择器class——选择所有class一致的标签跨标签。格式.类名{} !DOCTYPE html
html langen
headmeta charsetUTF-8title类选择器/titlestyle/*类选择器的格式: .class的名称{}好处:可以多个标签归类,是同一个class,可以复用*/.test01{color: darkorange;}.test02{color: cadetblue;}.test03{color: cornflowerblue;}/style/headbodyh1 classtest01类选择器:Test01/h1
h1 classtest02类选择器:Test02/h1
h1 classtest03类选择器:Test03/h1
p classtest03类选择器:Test04/p/body/html (3).id选择器——全局唯一。格式#id名{} !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*id选择器: id必须保证全局唯一#id名称{}不遵循就近原则,优先级是固定的id选择器 class类选择器 标签选择器*/#git02{color: darkorange;}#git03{color: cadetblue;}#git01{color: cornflowerblue;}h1{color: darkseagreen;}/style/headbody
h1 idgit01 classgit02id选择器:git01/h1
h1 idgit02 classgit02id选择器:git02/h1
h1 classgit03id选择器:git03/h1
h1 idgit03 classgit01id选择器:git01/h1
h1id选择器:git03/h1
/body/html 优先级id class 标签。 2.层次选择器 1.后代选择器在某个元素的后面。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*后代选择器*/body p{background: deeppink;}/style/head
bodypp1/ppp2/ppp3/pullipp4/p/lilipp5/p/lilipp6/p/li/ul/body
/html 2.子选择器一代。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*子选择器*/bodyp{background: olive;}/style/head
bodypp1/ppp2/ppp3/pullipp4/p/lilipp5/p/lilipp6/p/li/ul/body
/html 3.相邻的兄弟选择器同辈。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*相邻兄弟选择器:只选择一个,相邻向下*/.activep{background: blueviolet;}/style/head
bodyp classactivep1/ppp2/ppp3/pullip classactivep4/p/lilipp5/p/lilipp6/p/li/ul/body
/html 4.通用兄弟选择器当前选中元素的向下的所有兄弟元素 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*通用兄弟选择器当前选中元素的向下的所有兄弟元素*/.active2~p{background: dodgerblue;}/style/head
bodyp classactive2p1/ppp2/ppp3/pullip classactive2p4/p/lilipp5/p/lilipp6/p/li/ul/body
/html 3.结构伪类选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8title伪类选择器/titlestyleul li:first-child{/*ul的第一个子元素*/background: mediumaquamarine;}ul li:last-child{/*ul的最后一个子元素*/background: lightpink;}/*选中p1:定位到body*/p:nth-child(2){background: greenyellow;}p:nth-of-type(2){/*选中父元素下的第二个p元素*/background: lightseagreen;}a:hover{color: royalblue;}/style/head
bodya href9521/a
pp1/p
pp2/p
pp3/p
h3h3/h3
ulli1li01/lili1li02/lili1li03/lili1li04/li
/ula hrefhttps://www.taobao.com/淘宝/a/body
/html 4.属性选择器(常用)
id class 结合 !DOCTYPE html
html langen
headmeta charsetUTF-8title属性选择器/titlestyle.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: gray;text-decoration: none;margin-right: 5px;line-height:50px;font: bold 20px/50px Arial;}/*属性名,属性名 属性值正则 表示绝对等于* 表示包含^ 表示以...开头$ 表示以...结尾存在id属性的元素a[]{}*/a[id]{background: deeppink;}a[idfirst]{/*idfirst的元素*/background: greenyellow;}a[class*links]{/*class 中有links的元素*/background: green;}a[href^http]{/*选中href中以http开头的元素*/background: yellow;}a[href$pdf]{/*选中href中以http开头的元素*/background: red;}/style
/head
body
p classdemoa hrefhttps://www.taobao.com/ classlinks item first idfirst淘宝/aa href classlinks item active target_blank titletest链接/aa hrefimg/hello.html classlinks item网页/aa hrefimg/str1.png classlinks itempng/aa hrefimg/str2.jpg classlinks itemjpg/aa hrefabc classlinks item链2/aa href/fy.pdf classlinks itempdf/aa href/quit.pdf classlinks itempdf2/aa hrefdump.doc classlinks itemdoc/aa hrefkiko.doc classlinks item lastdoc2/a
/p
/body
/html 三.美化网页 1.span标签
重点要突出的字使用span标签套起来 !DOCTYPE html
html langen
headmeta charsetUTF-8title美化网页/titlestyle#title{font-size: 25px;}/style
/head
body
编程语言:span idtitleJava/span
/body
/html 2.字体样式 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/* font-family字体font-size字体大小 也可以填px但不能超过900,相当于bloderfont-weight字体粗细color字体颜色 常用写法如下font:oblique bloder 12px 楷体*/body{font-family: Arial Black;color: dodgerblue;}h1{font-size: 25px;}.p1{font-weight: 600;color: chocolate;}/style
/headbodyh1标题/h1
p正文6699/p
p classp1正文4444444/p
pStudy English and Computer/p/body
/html 3.文本样式 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/* 一.颜色–color:agb / rgba()二.文本对齐方式–text-aligncenter;图片、文字水平对齐。img,span{vertical-align: middle;}三.首行缩进–text-indent2em;四.行高–line-height300px;五.下划线–text-decoration; 1.下划线:text-decoration:underline2.中划线:text-decoration:line-through3.上划线:text-decoration:overline4.超链接去下划线:text-decoration:none */h1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent:2em;}.p3{line-height:300px;background: mediumaquamarine;height: 300px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/*超链接去下划线*/a{text-decoration: none;}/style/headbodya href4399-7k7k/a
p classl1123123123/p
p classl2123123123/p
p classl3123123123/ph1概述/h1
p classp1看到有人说fcu是混凝土立方体抗压强度设计值特来纠正一下。混凝土立方体抗压强度没有设计值fcu是实测的混凝土立方体抗压强度它是一个代表值。立方体抗压强度和轴心抗压强度是一组测试3个试块为一组的结果一般是取其平均值。详见GBT 50081-2019 第5.0.5条而立方体抗压标准强度是试验结果经概率统计后得到的一般是95%的保证率。对于同一种配比的混凝土立方体抗压强度大于立方体抗压标准强度。即使是在土木工程这一学科中不同的方向fcu的意义也不相同。我见到的用到fcu或类似的如fcm等等一般是在论文中给出材性试验数据时一般计算用到的并不是fcu而是fcuk以及其他的量。在混凝土规范这里指GB 50010里是没有fcu的只有fcu,k
/p
p在1963年我把核子的基本构成命名为“夸克”quark我先有的是声音而没有拼法所以当时也可以写成“郭克”kwork。不久之后在我偶尔翻阅詹姆斯·乔伊斯所著的《芬尼根守灵夜》时我在“向麦克老大三呼夸克”这句中看到夸克这个词。由于“夸克”字面上意为海鸥的叫声很明显是要跟“麦克”及其他这样的词押韵所以我要找个借口让它读起来像“郭克”。但是书中代表的是酒馆老板伊厄威克的梦词源多是同时有好几种。书中的词很多时候是酒馆点酒用的词。所以我认为或许“向麦克老大三呼夸克”源头可能是“敬麦克老大三个夸脱”那么我要它读“郭克”也不是完全没根据。再怎么样字句里的三跟自然中夸克的性质完全不谋而合。
/p
p classp3茨威格则用“埃斯”Ace来称呼他所理论化的粒子但是在夸克模型被广泛接纳时盖尔曼的用词就变得很有名。很多中国物理学家则称夸克为“层子”在台湾地区亦曾翻译“亏子”但并不普遍使用。
/p/body
/html 4.文本阴影和超链接伪类 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*超链接有默认的颜色*/a{text-decoration: hotpink;color: #000000;}/*鼠标悬浮的状态*/a:hover{color: dodgerblue;}/*鼠标按住未释放的状态*/a:active{color:green}/*点击之后的状态*/a:visited{color:mediumpurple;}/*text-shadow:5px 5px 5px 颜色第一个参数表示水平偏移第二个参数表示垂直偏移第三个参数表示模糊半径第四个参数表示颜色*/#price{text-shadow: #eaff29 5px 5px 5px;}/*固定阴影*/a:link{background: bisque;}/style
/headbody
a href#img srctp\1.png width400 height200 alt
/a
pa href#Java博客/a
/p
p idpricea href#哇哈哈/a
/p
/body/html 5.列表ul、li !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink hrefdemo.css relstylesheet typetext/cssstyle/style
/headbody!--div 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器在不使用CSS的情况下其对内容或布局没有任何影响。--
div idnavh2 classtitle全部商品分类/h2ullia href#图书/aa href#影视/aa href#家电/a/lilia href#配件/aa href#手机/aa href#数码/a/lilia href#电脑/aa href#办公/a/lilia href#家居/aa href#家装/aa href#厨具/a/lilia href#服饰鞋帽/aa href#个性化妆/a/lilia href#礼品箱包/aa href#钟表/aa href#珠宝/a/lilia href#食品饮料/aa href#保健食品/a/lilia href#彩票/aa href#旅行/aa href#充值/aa href#票务/a/li/ul
/div
/body
/html #nav{width: 300px;background: beige;
}.title{font-size: 18px;font-weight: bold;text-indent: 2em;/*缩进*/line-height: 35px;background: gold;
}/* ul li
list-style:1.none 去掉实心圆2.circle 空心圆3.square 正方形
*/ul li{height: 30px;list-style: none;text-indent: 1em;
}a{text-decoration: none;font-size: 14px;color: darkorange;
}a:hover{color: dodgerblue;text-decoration: underline;
} 6.背景 !DOCTYPE html
html langen
headmeta charsetUTF-8title背景/titlestylediv{width: 500px;height: 200px;border: 1px solid mediumaquamarine;background-image: url(tp/1.png)/* 默认是全部平铺的 */}/*水平平铺*/.div1{background-repeat: repeat-x;}/*垂直平铺*/.div2{background-repeat: repeat-y;}/*不平铺*/.div3{background-repeat: no-repeat;}/style/head
body
div classdiv1/div
div classdiv2/div
div classdiv3/div
/body
/html 下面的图片效果有问题 7.渐变
渐变背景网址https://www.grabient.com !DOCTYPE html
html langen
headmeta charsetUTF-8title背景/titlestylebody{background-color: #08AEEA;background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);}div{width: 500px;height: 200px;border: 1px solid mediumaquamarine;background-image: url(tp/1.png)/* 默认是全部平铺的 */}/*水平平铺*/.div1{background-repeat: repeat-x;}/*垂直平铺*/.div2{background-repeat: repeat-y;}/*不平铺*/.div3{background-repeat: no-repeat;}/style/head
body
div classdiv1/div
div classdiv2/div
div classdiv3/div
/body
/html 四.盒子模型 1.什么是盒子模型 margin外边距padding内边框border边框 2.边框 !DOCTYPE html
html langen
headmeta charsetUTF-8title盒子/titlestyle/*body总有一个默认的外边距为0*/h1,ul,li,a,body{margin: 0;padding: 0;text-decoration: none;}/*border粗细 样式 颜色*/#box{width: 300px;border: 1px solid peru;}h2{font-size: 16px;background-color: antiquewhite;line-height: 30px;margin: 0;color: hotpink;}form{background: khaki;}div:nth-of-type(1) input{border: 3px solid seagreen;}div:nth-of-type(2) input{border: 3px dashed gray;}div:nth-of-type(3) input{border: 2px solid royalblue;}/style
/headbodydiv idboxh2会员登陆/h2form action#divspan用户名:/spaninput typetext/divdivspan密emsp;码:/spaninput typetext/divdivspan邮emsp;箱:/spaninput typetext/div/form
/div/body
/html 3.外边距 /* 分别表示上、右、下、左从上开始顺时针 */
margin:0 0 0 0 /* 例1: 居中 auto表示左右自动 */
margin:0 auto /* 例2表示上、右、下、左都为4px */
margin:4px /* 例3: 表示上为10px左右为20px下为30px */
margin:10px 20px 30px !DOCTYPE html
html langen
headmeta charsetUTF-8title外边距/titlestyle#box{width: 300px;border: 1px solid peru;margin: 0 auto;}h2{font-size: 16px;background-color: antiquewhite;line-height: 30px;margin: 0;color: hotpink;}form{background: khaki;}input{border: 1px solid tomato;}div:nth-of-type(1){padding: 10px; /* 内边距10px */}/style
/head
body
div idboxh2会员登陆/h2form action#divspan用户名:/spaninput typetext/divdivspan密emsp;码:/spaninput typetext/divdivspan邮emsp;箱:/spaninput typetext/div/form
/div
/body
/html 4.圆角边框
!DOCTYPE html
html langen
headmeta charsetUTF-8title边框/titlestylediv{width: 100px;height: 100px;border: 10px solid mediumpurple;/* 一个border-radius只管一个圆的1/4 */border-radius: 50px 20px 20px 30px;/* 左上 右上 右下 左下 ,顺时针方向 */}img{margin: 50px;border-radius: 25px; /*圆角矩形25px*/width: 64px;height: 64px;}/style
/head
body
div/div
img srctp\1.png alt#
/body
/html 5.盒子阴影
!DOCTYPE html
html langen
headmeta charsetUTF-8title边框/titlestyleimg{margin: 100px;border-radius: 25px; /*圆角矩形25px*/box-shadow: 10px 10px 10px yellow;width: 64px;height: 64px;}/style
/head
body
divimg srctp\1.png alt#/div/body
/html 五.浮动 1.标准文档流
1块级元素独占一行 h1~h6 、p、div、 列表… 2行内元素不独占一行
span、a、img、strong 注 行内元素可以包含在块级元素中反之则不可以 2.dispaly
!DOCTYPE html
html langen
headmeta charsetUTF-8titledispaly/titlestyle/*block: 块元素inline: 行内元素inline-block: 块元素但是可以内联none: 隐藏*/div{width: 100px;height: 100px;border: 1px solid darkorange;/* display: inline-block; */}span{width: 100px;height: 100px;border: 1px solid darkorange;/* display: inline-block; */}/style
/head
body
divdiv块元素/div
spanspan行内元素/span
/body
/html !DOCTYPE html
html langen
headmeta charsetUTF-8titledispaly/titlestyle/*block: 块元素inline: 行内元素inline-block: 块元素但是可以内联none: 隐藏*/div{width: 100px;height: 100px;border: 1px solid darkorange;display: inline-block;}span{width: 100px;height: 100px;border: 1px solid darkorange;display: inline-block;}/style
/head
body
divdiv块元素/div
spanspan行内元素/span
/body
/html 3.float:left/right
!DOCTYPE html
html langen
headmeta charsetUTF-8title浮动/titlelink hrefcss/style.css relstylesheet typetext/css
/head
body
div idfatherdiv classlayer01img srctp\1.png alt/divdiv classlayer02img srctp\屏幕截图 2024-02-01 171130.png alt/divdiv classlayer03img srctp\屏幕截图 2024-02-01 173553.png alt/divdiv classlayer04浮动的盒子可以向左浮动也可以向右浮动知道他的外边缘碰到包含框或另一个浮动盒子为止。/div
/div
/body
/html div{margin: 10px;padding: 5px;
}
#father{border: 1px #000 solid;
}
.layer01{border: 1px #F00 dashed;display: inline-block;float: left;
}
.layer02{border: 1px #00F dashed;display: inline-block;float: right;
}
.layer03{border: 1px #060 dashed;display: inline-block;
}
/*
clearright右侧不允许有浮动元素left左侧不允许有浮动元素both两侧不允许有浮动元素none
*/
.layer04{border: 1px #666 dashed;font-size: 12px;line-height: 23px;display: inline-block;clear: both;
} 可以看出右边的图片超出了父级边框所有下面我们会解决这个问题 4.父级边框塌陷的问题
18、overflow及父级边框塌陷问题_哔哩哔哩_bilibili
方案一增加父级元素的高度 #father{border:1px #000 solid;height:800px;
}
方案二增加一个空的div标签清除浮动。 div class clear/div .clear{clear:both;margin:0;padding:0;
}
方案三在父级元素中增加一个overflow属性。 overflow:hidden; /* 隐藏超出部分 */overflow:scroll; /* 滚动 */ 方案四父类添加一个伪类:after。 #father:after{content:;display:block;clear:both;
}
小结
浮动元素增加空div—— 简单、代码尽量避免空div设置父元素的高度——- 简单但是元素假设有了固定的高度可能就会超出范围overflow—— 简单下拉的一些场景避免使用父类添加一个伪类:after推荐—— 写法稍微复杂但是没有副作用推荐使 display与float对比
display方向不可以控制float浮动起来的话会脱离标准文档流所以要解决父级边框塌陷的问题。。 六.定位 1.相对定位
相对定位positonrelstive相对于原来的位置进行指定的偏移相对定位的话它仍然在标准文档流中原来的位置会被保留
top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向下偏移10px */
right:20px; /* 向左偏移20px */
!DOCTYPE html
html langen
headmeta charsetUTF-8title练习/titlestyle#box{height: 300px;width: 300px;border: 2px red solid;padding: 10px;}a{height: 100px;width: 100px;background-color: #ee73b7;color: white;text-align: center;text-decoration: none;line-height: 100px; /* 设置行距100px */display: block; /* 设置方块 */}a:hover{background: #4158D0;}.a2,.a4{position: relative;left: 200px;top: -100px;}.a5{position: relative;left: 100px;top: -300px;}/style
/head
body
div idboxdiv classa1a href#连接1/a/divdiv classa2a href#连接2/a/divdiv classa3a href#连接3/a/divdiv classa4a href#连接4/a/divdiv classa5a href#连接5/a/div
/div
/body
/html 2.绝对定位
定位基于xxx定位上下左右 没有父级元素定位的前提下相对于浏览器定位假设父级元素存在定位我们通常会相对于父级元素进行偏移在父级元素范围内移动。
总结相对一父级或浏览器的位置进行指定的偏移绝对定位的话它不在标准文档流中原来的位置不会被保留。 3.固定定位
!DOCTYPE html
html langen
headmeta charsetUTF-8title绝对定位/titlestylebody{height: 1000px;}div:nth-of-type(1){width: 100px;height: 60px;background-color: #4a77d4;position: absolute; /* absolute 绝对定位 */right: 0;bottom: 0;}div:nth-of-type(2){width: 40px;height: 40px;background-color: #fcb346;position: fixed; /* fixed 固定定位 */right: 0;bottom: 0;}/style
/head
body
divdiv1/div
divdiv2/div
/body
/html 4.z-index及透明度
图层-z-index默认是0最高无限~999。 !DOCTYPE html
html langen
headmeta charsetUTF-8title透明度/titlelink relstylesheet hrefdemo.css typetext/cssstyle/style
/head
body
div idcontentulliimg srctp\1.png alt/lili classtipTextJava后端学习/lili classtipBg/lili时间:1202-06-15/lili地点:水星基地核心仓/li/ul
/div
/body
/html #content{width: 450px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px solid #1079f6;
}
ul,li{padding: 0px;margin: 0px;list-style: none;
}
/* 父级元素相对定位 */
#content ul{position: relative;
}
.tipText,.tipBg{position: absolute;width: 380px;height: 25px;top:216px
}
.tipText{color: #ffffff;z-index: 999;
}
.tipBg{background: #33f13d;opacity: 0.5; /* 背景透明度 */filter: alpha(opacity50);
} 七.网页动画 CSS3 动画 | 菜鸟教程 (runoob.com)
!doctype html
html
headmeta charsetutf-8titleHTML5 Canvas模拟飞机航班线路动画DEMO演示/titlestyle*{margin:0;padding:0;}canvas {background:#111;background-size:cover;display:block;}body{overflow: hidden;}/style
/head
body
div/div
scriptwindow.requestAnimFramefunction(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)} }();$ {};$.util {rand: function( min, max ) {return Math.random() * ( max - min ) min;},randInt: function( min, max ) {return Math.floor( Math.random() * ( max - min 1 ) ) min;},norm: function( val, min, max ) {return ( val - min ) / ( max - min );},lerp: function( norm, min, max ) {return ( max - min ) * norm min;},map: function( val, sMin, sMax, dMin, dMax ) {return $.util.lerp( $.util.norm( val, sMin, sMax), dMin, dMax );},clamp: function( val, min, max ) {return Math.min( Math.max( val, Math.min( min, max ) ), Math.max( min, max ) );},distance: function( p1, p2 ) {var dx p1.x - p2.x,dy p1.y - p2.y;return Math.sqrt( dx * dx dy * dy );},angle: function( p1, p2 ) {return Math.atan2( p1.y - p2.y, p1.x - p2.x );},inRange: function( val, min, max ) {return val Math.min( min, max ) val Math.max( min, max );},pointInRect: function( x, y, rect ) {return $.util.inRange( x, rect.x, rect.x rect.width ) $.util.inRange( y, rect.y, rect.y rect.height );},pointInArc: function( p, a ) {return distance( p, a ) a.radius;},setProps: function( obj, props ) {for( var k in props ) {obj[ k ] props[ k ];}},multicurve: function( points, ctx ) {var p0, p1, midx, midy;ctx.moveTo(points[0].x, points[0].y);for(var i 1; i points.length - 2; i 1) {p0 points[i];p1 points[i 1];midx (p0.x p1.x) / 2;midy (p0.y p1.y) / 2;ctx.quadraticCurveTo(p0.x, p0.y, midx, midy);}p0 points[points.length - 2];p1 points[points.length - 1];ctx.quadraticCurveTo(p0.x, p0.y, p1.x, p1.y);}};$.init function() {// setup$.c document.createElement( canvas );$.ctx $.c.getContext( 2d );document.body.appendChild( $.c );// collections$.ports [];$.planes [];// eventswindow.addEventListener( resize, $.reset, false );window.addEventListener( click, $.reset, false );$.reset();$.step();};$.reset function() {// dimensions$.cw $.c.width window.innerWidth;$.ch $.c.height window.innerHeight;$.dimAvg ( $.cw $.ch ) / 2;// type / font$.ctx.textAlign center;$.ctx.textBaseline middle;$.ctx.font 16px monospace;// options / settings$.opt {};$.opt.portCount 6;$.opt.planeCount 80;$.opt.portSpacingDist $.dimAvg / $.opt.portCount;$.opt.holdingDist 5;$.opt.approachDist 80;$.opt.planeDist 20;$.opt.pathSpacing 15;$.opt.pathCount 40;$.opt.avoidRadius 30;$.opt.avoidMult 0.025;// collections$.ports.length 0;$.planes.length 0;// delta$.lt Date.now();$.dt 1;$.et 0;$.tick 0;// setup portsfor( var i 0; i $.opt.portCount; i ) {$.ports.push( new $.Port() );}// setup planesfor( var i 0; i $.opt.planeCount; i ) {$.planes.push( new $.Plane() );}};$.Port function() {this.x $.util.rand( $.cw * 0.1, $.cw * 0.9 );this.y $.util.rand( $.ch * 0.1, $.ch * 0.9 );while( !this.validSpacing() ) {this.x $.util.rand( $.cw * 0.1, $.cw * 0.9 );this.y $.util.rand( $.ch * 0.1, $.ch * 0.9 );}};$.Port.prototype.validSpacing function() {var spaced true,i $.ports.length;while( i-- ) {var otherPort $.ports[ i ];if( $.util.distance( otherPort, this ) $.opt.portSpacingDist ) {spaced false;break;}}return spaced;};$.Port.prototype.update function( i ) {var j $.planes.length;this.approachingCount 0;while( j-- ) {var plane $.planes[ j ];if( plane.destIndex i plane.approaching ) {this.approachingCount;}}};$.Port.prototype.render function( i ) {$.ctx.beginPath();$.ctx.arc( this.x, this.y, 3 ( this.approachingCount 5 ), 0, Math.PI * 2 );$.ctx.fillStyle hsla(120, 90%, 80%, ( 0.35 Math.sin( $.et / 20 ) * 0.2 ) );$.ctx.fill();$.ctx.fillStyle #fff;$.ctx.fillText( this.approachingCount, this.x, this.y - 30 );};$.Plane function( opt ) {this.originIndex $.util.randInt( 0, $.ports.length - 1 );this.origin $.ports[ this.originIndex ];this.path [];this.x this.origin.x;this.y this.origin.y;this.vx $.util.rand( -0.35, 0.35 );this.vy $.util.rand( -0.35, 0.35 );this.vmax 1;this.accel 0.01;this.decel 0.96;this.angle 0;this.approaching false;this.holding false;this.setDest();};$.Plane.prototype.setDest function() {if( this.destIndex ! undefined ) {this.originIndex this.destIndex;this.origin $.ports[ this.originIndex ];}this.destIndex $.util.randInt( 0, $.ports.length - 1 );while( this.destIndex this.originIndex ) {this.destIndex $.util.randInt( 0, $.ports.length - 1 );}this.dest $.ports[ this.destIndex ];this.approaching false;this.holding false;}$.Plane.prototype.update function( i ) {this.ox this.x;this.oy this.y;if( $.tick % $.opt.pathSpacing 0 ) {this.path.push( { x: this.x, y: this.y } );}if( this.path.length $.opt.pathCount ) {this.path.shift();}this.angle $.util.angle( this.dest, this );this.speed ( Math.abs( this.vx ) Math.abs( this.vy ) ) / 2;if( !$.util.pointInRect( this.x, this.y, { x: 0, y: 0, width: $.cw, height: $.ch } ) ) {this.vx * this.decel;this.vy * this.decel;}if( this.speed 0.1 ) {if( $.util.distance( this.dest, this ) $.opt.approachDist ) {this.vx * this.decel;this.vy * this.decel;this.approaching true;}}if( $.util.distance( this.dest, this ) $.opt.holdingDist ) {this.holding true;this.setDest();}this.vx Math.cos( this.angle ) * this.accel;this.vy Math.sin( this.angle ) * this.accel;if( this.speed this.vmax ) {this.vx * this.decel;this.vy * this.decel;}this.x this.vx * $.dt;this.y this.vy * $.dt;};$.Plane.prototype.render function( i ) {if( this.approaching ) {$.ctx.strokeStyle hsla(0, 80%, 50%, 1);} else {$.ctx.strokeStyle hsla(180, 80%, 50%, 1);}$.ctx.beginPath();$.ctx.moveTo( this.x, this.y );var angle $.util.angle( { x: this.ox, y: this.oy }, this );$.ctx.lineWidth 2;$.ctx.lineTo(this.x - Math.cos( angle ) * ( 3 this.speed * 2 ),this.y - Math.sin( angle ) * ( 3 this.speed * 2 ));$.ctx.stroke();var pathLength this.path.length;if( pathLength 1) {$.ctx.strokeStyle hsla(0, 0%, 100%, 0.15);$.ctx.lineWidth 1;$.ctx.beginPath();if( pathLength $.opt.pathCount ) {var angle $.util.angle( this.path[ 1 ], this.path[ 0 ] ),dx this.path[ 0 ].x - this.path[ 1 ].x,dy this.path[ 0 ].y - this.path[ 1 ].y,dist Math.sqrt( dx * dx dy * dy ),x this.path[ 0 ].x Math.cos( angle ) * ( dist * ( ( $.tick % $.opt.pathSpacing ) / $.opt.pathSpacing ) ),y this.path[ 0 ].y Math.sin( angle ) * ( dist * ( ( $.tick % $.opt.pathSpacing ) / $.opt.pathSpacing ) );} else {var x this.path[ 0 ].x,y this.path[ 0 ].y}$.ctx.moveTo( x, y );for( var i 1; i pathLength; i ) {var point this.path[ i ];$.ctx.lineTo( point.x, point.y );}$.ctx.lineTo( this.x, this.y );$.ctx.stroke();}};$.step function() {requestAnimFrame( $.step );// clear$.ctx.globalCompositeOperation destination-out;$.ctx.fillStyle hsla(0, 0%, 0%, 1);$.ctx.fillRect( 0, 0, $.cw, $.ch );$.ctx.globalCompositeOperation lighter;// collectionsvar i;i $.ports.length; while( i-- ) { $.ports[ i ].update( i ) }i $.planes.length; while( i-- ) { $.planes[ i ].update( i ) }i $.ports.length; while( i-- ) { $.ports[ i ].render( i ) }i $.planes.length; while( i-- ) { $.planes[ i ].render( i ) }// deltavar now Date.now();$.dt $.util.clamp( ( now - $.lt ) / ( 1000 / 60 ), 0.001, 10 );$.lt now;$.et $.dt;$.tick;};$.init();
/script
/body
/html
