前端常用的CSS代码
1、垂直居中对齐
垂直居中对齐
.vc {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2、不同a标签链接使用不同样式
3、图像灰度
img {
filter: gray;
-webkit-filter: grayscale(1);
}
4、背景动画渐变
背景动画渐变
bg {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
bg:hover {
background-position: 0 0;
}
5、长文本自动换行
长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行
.pre {
white-space: pre-line;
word-wrap: break-word;
}
6、模糊文本
长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行长文本自动换行
.vagueText {
filter: blur(1px);
}
7、用CSS动画实现省略号动画
用CSS动画实现省略号动画
.point:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026";
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
8、元素透明
用CSS动画实现省略号动画
.opacity {
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
9、CSS引用样式
CSS引用样式
.blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
.blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
.blockquote p {
display: inline;
}
10、个性圆角
.borderRadius {
border-radius: 4px 3px 6px 10px;
}
.borderRadius {
border-top-left-radius: 4px;
border-top-right-radius: 3px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 10px;
}
11、图片边框偏光
.polaroid {
background:#000;
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px;
width:200px;
}
12、锚链接伪类
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
13、CSS3渐变模板
CSS3渐变模板
.tep {
background-image: linear-gradient( #83b842, #1c8a9f);
}
14、内盒阴影
.box {
box-shadow: inset 2px 0 4px #000;
}
15、外盒阴影
.outbox {
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
16、CSS3列文本
CSS3列文本CSS3列文本CSS3列文本CSS3列文本
.columnsText {
text-align: justify;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
17、input输入效果
input[type=text] {
transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #ddd;
}
input[type=text]:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
18、CSS3方格图案
.fg {
background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
}
19、CSS3圆点图案
.round {
background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size: 100px 100px;
}
20、CSS3特色横幅显示
.featureBanner {
position: relative;
margin: 20px
}
.featureBanner:before {
content: "Featured";
position: absolute;
top: 5px;
left: -8px;
padding-right: 10px;
color: #232323;
font-weight: bold;
height: 0px;
border: 15px solid #ffa200;
border-right-color: transparent;
line-height: 0px;
box-shadow: -0px 5px 5px -5px #000;
z-index: 1;
}
.featureBanner:after {
content: "";
position: absolute;
top: 35px;
left: -8px;
border: 4px solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
}
20、限制单行文本超出显示省略号
限制单行文本超出显示省略号限制单行文本超出显示省略号限制单行文本超出显示省略号限制单行文本超出显示省略号限制单行文本超出显示省略号
.textEllipsis{
width: 65px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
21、限制多行文本超出省略号
限制多行文本超出省略号限制多行文本超出省略号限制多行文本超出省略号限制多行文本超出省略号限制多行文本超出省略号
.moreText{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
22、自适应文本框自动换行，限宽不限高
自适应文本框自动换行，限宽不限高自适应文本框自动换行，限宽不限高自适应文本框自动换行，限宽不限高自适应文本框自动换行，限宽不限高自适应文本框自动换行，限宽不限高自适应文本框自动换行，限宽不限高
.lineText{
display: inline-block;
min-height: 15px;
max-width: 78%;
padding: 12px 10px;
text-align: left;
font-family: Microsoft YaHei;
word-wrap: break-word;
}
23、CSS三角形绘制
sj {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
}
.sj-left {
border-color: transparent pink transparent transparent;
}
.sj-right {
border-color: transparent transparent transparent pink;
}
.sj-top {
border-color: transparent transparent pink transparent;
}
.sj-bottom {
border-color: pink transparent transparent transparent;
}
24、CSS实现网格背景
.grid{
background:#ccc;
background-image: linear-gradient(white 0px,transparent 0),
linear-gradient(90deg, white 0px,transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size:75px 75px,75px 75px,15px 15px,15px 15px;
}