HTML5小案例

文献种类：专题技术文献；

                          HTML5小案例

开发工具与关键技术：DW CSS3  
作者：吴泽锋
撰写时间：2019年3月28日

1、标签的多种效果
以下为DW代码
div { border: 2px solid; padding: 10px 40px; resize: both; overflow: auto; }
<.body style=“width: 80%; height: 50%; background:#A6A6A6;”>
resize:both; overflow: auto;按住右下角，能让文本框自由拖动


1. <.input type=“text”><.input type=“datetime”>文本框 <.input type=“email”>
2. <.input type=“text” placeholder=“文本”> 里面的文字为文本框底层文字
3. <.input type=“button” value=“按钮”>按钮
4. <.button type=“button” class=“close” data-dismiss=“alert”>X关闭按钮
5. <.input type=“checkbox”>复选框
6. <.input type=“radio”>单选框
7. <.input type=“date”>日历表
8. <.input type=“month”>日历表：以年和月形式
9. <.input type=“week”>日历表：以年和周的形式
10.<.input type=“datetime-local”>日历表+ 时间选择,小时/分钟
11.<.input type=“time”>时间选择 小时/分钟
12.<.input type=“color”>颜色选择
13.<.input type=“file”>上传文件按钮
14.<.input type=“submit”> 提交按钮
15.<.button type=“button(页面不刷新)/ submit(页面刷新) " class=“btn btn-primary”>提交<./button>
16. <.input type=“reset”>重置按钮
17. <.button type=“reset” class=“btn btn-primary”>重置<./button>
18. <.input type=“range”>类似于调节音量的横条带
19. <.input type=“password”>输入的文字以********出现
20. <.input type=“number”>数值框，可输入数值只为正负数;数值后输入±*/后点击框内的按钮数值重新开始
21. <.label for=“Name”>姓名：<./label>
22. <.input type=“text” class=“form-control” id=“Name” placeholder=“Name”> 点击姓名时光标聚集在文本框内
23. 下拉框样式：<.select class=”">请选择：<./option><./select>
<./from> <./div> <./body>
2、CSS3:多列
把 div 元素中的文本分隔为三列，具体由数值而定 column-count:3;
每列之间30像素的间隔 column-gap:30px;
规定列之间的宽度、样式和 颜色：column-rule:4px outset #ff0000;
其中的文本列数固定，文本随页面的宽度而改变；
<.style>
body { width: 100%;
height: 100%;
background-image: url(“背景图片1”);
}
div { border: 1px solid black;
padding: 35px;
background-image: url(“文本所在的背景图片2”);
background-repeat: no-repeat;
background-position: left;
}
.newspaper {
column-count: 3; 把 div 元素中的文本分隔为三列
column-gap:30px; 每列之间30像素的间隔
column-rule:4px outset #ff0000; 规定列之间的宽度、样式和颜色
}
<./style>
<.body>
<.p>把 div 元素中的文本分隔为三列：每列之间30像素的间隔：规定列之间的宽度、样式和颜色规则：<./p>
<.div class=“newspaper”> 大量的文本 <./div>
<./body>
3、box-shadow 盒子阴影
h-shadow:水平方向阴影； v-shadow:垂直方向的阴影 blur:模糊距离 color:颜色
<.body>
<.style>
.div1 {
margin: 30px;
width: 200px;
height: 100px;
background: #8B0002;
box-shadow: 10px 10px #ddd;
text-align: center;
color: aliceblue;
}
<./style>
<.h2>边框阴影<./h2>
<.div class=“div1”>边框阴影<./div>
<./body >
4、圆角
border-radius的值也可以通过百分比来设置，50%为圆形，且50%为极限值，负数无效；
如果用像素来设置圆角效果，100像素为极限值，负数无效，具体效果由宽度和高度决定；
<.body>
<.style>
.div2 {
margin: 50px;
width: 200px;
height: 150px;
border-radius: 100px;
color: aliceblue;
text-align: center;
background: #150808; }
<./style>
<.h2>圆角<./h2> <.p>border-radius: 25px;<./p> <.div class=“div2”>圆角<./div>
<./body>
5、通过transform:rotate属性来旋转图片
数值为正则顺时针旋转，为负则逆时针旋转 transform: rotate(7deg);
<.body><.style> body { width: 100%; height: 100%; margin: 30px; background-color: #E9E9E9; }
div.polaroid { width: 294px; padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF;
background-color: white; box-shadow: 2px 2px 3px #aaaaaa; }
div.left { transform: rotate(7deg); } div.right { transform: rotate(-8deg); } <./style>
<.div class=“polaroid rotate_left”> <.img src=“图片1” width=“284” height=“213” />
<.p class=“caption”>图片名称1<./p> <./div>
<.div class=“polaroid rotate_right”> <.img src=“图片2” width=“284” height=“213” />
<.p class=“caption”>图片名称2<./p> <./div><./body>
6、旋转、扭曲、缩放、位移
创建： <.div class=“div0”> <.div class=“div1”><./div>
<.div class=“div2”><./div> <.div class=“div3”>
样式：.div0,.div1,.div2,.div3{ width:200px; height: 200px; background: red;背景颜色
cursor:pointer;字体颜色 transform-origin:top;顶部中心原点，可不设置，有原点时，围绕原点进行动画
transition-duration:2s;动画时长
transition-delay: 1s;延迟，动画延迟1秒后进行 }
方法一、通过伪类让图形改变形态：且用伪类只能生效样式中的最后一种
方法二：通过@keyframes设置具体百分比改变样式；如果再给其改变宽和高，就会边旋转边改变宽和高，同时进行
简介： animation-play-state:paused;通过伪类设置给2D动画，鼠标移入动画停止，移出恢复。
animation-iteration-count: infinite;次数，无限; animation-direction: alternate;动画轮流反向播放。
animation-direction:reverse;动画逆时针播放，如果不进行设置将默认进行顺时针播放
1、旋转： 具体情况通过设置rotate的值
方法一：.div0:hover{ transform: rotate(360deg); }
方法二：<.style> .div{ width: 200px; height: 200px; background: #470001; animation: div 0.01s ease;
cursor:pointer;; animation-iteration-count: infinite; animation-direction:reverse; }
@keyframes div{ 0%{ transform: rotate(0deg); background: #820104; }
25%{ transform: rotate(90deg); background: #2D6CFF; }
50%{ transform: rotate(180deg); background:#7C7C7C; }
75%{ transform: rotate(270deg); background: #0502FF; }
100%{ transform: rotate(360deg); background: #2D6CFF; } }
<./style><.body><.div class=“div”><./div><./body>
2、扭曲: 扭曲也可以叫斜交，具体情况通过设置skew 的X和Y值
方法一：.div1:hover{ transform: skew(20deg,20deg); }
方法二：<.style> span6{ display:block; height:20px; width:200px; background:#470001;
animation:span6 2.2s ease; animation-iteration-count:infinite;
animation-direction:reverse; }
@keyframes span6{ 0%{ transform:skew(0); background-color:#820104;
25%{ transform:skewX(10deg); background-color:#2D6CFF;
50%{ transform:skew(10deg,10deg); background-color:#7C7C7C;
75%{ transform:skew(0,10deg); background-color:#0502FF;
100%{ transform:skewY(0); background-color:#000; }
< body><.span6><./span6>
3、缩放： 按照一定比例进行缩小和放大，还可以在放大时给其设置阴影效果
方法一：.div2:hover{ transform:scale(0.5,0.5); }
方法二：<.style> div6{ width: 100px;
height: 100px;
float: left;
clear:both;/清除左右的浮动/
border: 1.5px solid #320101;
margin-left: 201px;
margin-top: 40px;
}
span7{ display: block;
margin: 0 auto;
width:100px;
height: 100px;
background: #FF0004;
animation: span7 2.2s ease;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes span7{ 0%{ transform:scale(-1); background: #820104; }
25%{ transform:scaleX(1); background: #2D6CFF; }
50%{ transform: scaleY(-1); background:#7C7C7C; }
75%{ transform: scaleZ(0); background: #0502FF; }
100%{ transform: scale(-1); background: #000; } }
span7:hover{ animation-play-state:paused; }
<./style><.body> <.div6><.span7><./span7><./div6> <./body>
4、位移：
方法一：.div3:hover{ transform:translateX(-180px); 横向，正右，负左
transform:translateY(180px); 纵向，正下，负上
transform:translateY(180px); 左为X，右为Y具体效果据数值而定 }
方法二： 逆时针运动
<.style>
span6{
display: block;
width:12px;
height: 12px;
background: #470001;
border-radius: 50%;
animation: span6 2.2s ease;
animation-iteration-count: infinite;
animation-direction:reverse;
animation-fill-mode: forwards;
}
@keyframes span6{
0%{ transform:translateX(0); background-color:#820104; }
25% { transform: translateX(89px); background-color:#2D6CFF; }
50% { transform: translate(89px, 89px); background-color:#7C7C7C; }
75% { transform:translate(0, 89px); background-color:#0502FF; }
100% { transform: translateY(0); background-color:#000; }
}
<./style>
<.body> <.span6 style=" width:100px; height:100px; border:1.5px solide #320101;"><./span6> <./body>
借鉴于W3School离线手册(2014.12.16)最新版