css的一些技巧片段
一、垂直居中、水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.inner {
position: absolute;
top: 50%;
/* left: 50%; */
-webkit-transform: translateY(-50%);
-o-transform: translateY(-200px);
transform: translateY(-50%);
/* -webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); */
width: 200px;
height: 200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
/* -webkit-transform: translateY(-50%);
-o-transform: translateY(-200px);
transform: translateY(-50%); */
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
注意用这个方法不可以水平和垂直一起使用居中的，会覆盖。
如果想直接水平和垂直都居中，可以考虑grid网格布局，很强大，可以看我另一篇文章。
grid布局
二、背景渐变动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.liner {
width: 500px;
height: 100px;
margin: 0 auto;
background-image: linear-gradient(green,yellow);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 1s;
}
.liner:hover {
background-position: 0 0;
}
</style>
</head>
<body>
<div class="liner"></div>
</body>
</html>
最初画面
鼠标经过
在1s时间内过渡到另一个样子，让人看起来有动画的效果
三、制造模糊文本
利用color: transparent;和text-shadow: 0 0 5px rgba(0,0,0,0.8);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blur {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* .text {
background-image: url(images/banner5.jpg);
background-size: 100% 100%;
filter: blur(2px);
} */
</style>
</head>
<body>
<div class="blur">
哈哈哈哈哈哈哈
<!-- <div class="text">哈哈哈哈哈哈哈</div> -->
</div>
</body>
</html>
让图像和文字一起模糊
首先看不加模糊处理时的效果
加了模糊处理
利用filter: blur(2px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blur {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
/* color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.8); */
color: #333;
}
.text {
background-image: url(images/banner5.jpg);
background-size: 100% 100%;
filter: blur(2px);
}
</style>
</head>
<body>
<div class="blur">
<!-- 哈哈哈哈哈哈哈 -->
<div class="text">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>
