html5一些基本效果

html5一些基本效果

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

1、标签的多种效果
以下为DW代码截图
具体情况
2、CSS3:多列
把 div 元素中的文本分隔为三列，具体由数值而定 column-count:3;
每列之间30像素的间隔 column-gap:30px;
规定列之间的宽度、样式和 颜色： column-rule:4px outset #ff0000;
其中的文本列数固定，文本随页面的宽度而改变，效果：在这里插入图片描述3、box-shadow 盒子阴影
h-shadow:水平方向阴影； v-shadow:垂直方向的阴影 blur:模糊距离 color:颜色

4、圆角
border-radius的值也可以通过百分比来设置，
50%为圆形，且50%为极限值，负数无效
如果用像素来设置圆角效果，100像素为极限值，负数无效
具体效果由宽度和高度决定
5、通过transform:rotate属性来旋转图片
数值为正则顺时针旋转，为负则逆时针旋转 transform:rotate(7deg);

6、旋转、扭曲、缩放、位移
创建：先创建四个div，分别给每个div一个名字从div0~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); }
方法二：

2、扭曲:
扭曲也可以叫斜交，具体情况通过设置skew 的X和Y值
方法一：.div1:hover{ transform: skew(20deg,20deg); }
方法二：

3、缩放：
按照一定比例进行缩小和放大，还可以在放大时给其设置阴影效果
方法一：.div2:hover{ transform:scale(0.5,0.5); }
方法二：

4、位移：
方法一：.div3:hover{
transform:translateX(-180px); 横向，正右，负左
transform:translateY(180px); 纵向，正下，负上
transform:translate(180px,180px); 左为X，右为Y具体效果据数值而定
}
方法二：
逆时针运动

借鉴于W3School离线手册(2014.12.16)最新版