学校集约网站建设,最牛餐饮营销手段,微网站开发怎么写,温州企业建站系统网页一键变灰
body{filter: grayscale(1);
}
一般用于特殊时期#xff0c;网页变灰#xff0c;只需要给body标签添加这行样式代码。
一键换主题色 body {filter: hue-rotate(45deg);}
给body标签设置这个属性样式#xff0c;改变角度看看效果吧。
设置字母大小写
p {t…网页一键变灰
body{filter: grayscale(1);
}
一般用于特殊时期网页变灰只需要给body标签添加这行样式代码。
一键换主题色 body {filter: hue-rotate(45deg);}
给body标签设置这个属性样式改变角度看看效果吧。
设置字母大小写
p {text-transform: uppercase} /* 所有字母变成大写字母*/
p {text-transform: lowercase} /* 所有字母变成小写字母*/
p {text-transform: capitalize} /* 首字母大写*/
p {font-variant: small-caps} /* 字体变成小型的大写字母*/
禁止选中
.texts{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
修改input光标颜色
input{//输入框文字颜色color: #fff;//光标颜色caret-color: red;
}
文字描边
.stroke {-webkit-text-stroke: 1px yellow;text-stroke: 1px yellow;
}
文本平衡
.element {text-wrap: balance;text-align: center;
}
使用前 使用后 CSS3 2D转换
1. translate()方法 位置移动
通过 translate() 方法元素从其当前位置移动根据给定的 leftx 坐标 和 topy 坐标 位置参数
div {transform: translate(50px,100px);
}2. rotate()方法顺时针旋转角度
通过 rotate() 方法元素顺时针旋转给定的角度。允许负值元素将逆时针旋转。
div {transform: rotate(30deg);
}3. scale() 方法改变尺寸
通过 scale() 方法元素的尺寸会增加或减少根据给定的宽度X 轴和高度Y 轴参数
div {transform: scale(2,4);
}值 scale(2,4) 把宽度转换为原始尺寸的 2 倍把高度转换为原始高度的 4 倍。
4. skew() 方法元素翻转角度
通过 skew() 方法元素翻转给定的角度根据给定的水平线X 轴和垂直线Y 轴参数
div {transform: skew(30deg,20deg);
}值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度围绕 Y 轴翻转 20 度。
CSS3 3D 转换
1. rotateX() 方法X 轴旋转
通过 rotateX() 方法元素围绕其 X 轴以给定的度数进行旋转。
div {transform: rotateX(120deg);
}2. rotateY() 方法Y 轴旋转
通过 rotateY() 方法元素围绕其 Y 轴以给定的度数进行旋转。
div {transform: rotateY(130deg);
}
CSS3 过渡transition
1. transition: width
应用于宽度属性的过渡效果时长为 2 秒
div {transition: width 2s;
}div:hover {width:300px;
}2. width 2s, height 2s, transform 2s多项改变
如需向多个样式添加过渡效果请添加多个属性由逗号隔开
div {transition: width 2s, height 2s, transform 2s;
}
