CSS 样式介绍（五）
2019-06-08 本文已影响1人
走在路上的小二
1. css 精灵技术（sprite）
- css 精灵技术（sprite）：将多个小背景图片合成一个大的背景图片(精灵图)返回回来，利用background-position去定位自己需要的图片，精灵技术是为了减少服务器的请求次数，减少服务器压力。
2. 滑动门核心技术
- 核心技术：就是利用css精灵（主要要背景位置）和盒子padding撑开宽度，以便能适用不同的字数的导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*滑动门技术*/
a {
display: inline-block;
height: 33px;
/*千万不能给宽度，写死宽度不对的，我们要推拉门*/
background: url(ao.png) no-repeat;
padding-left: 15px;
margin-left: 100px;
color: #fff;
text-decoration: none;
line-height: 33px;
}
a span {
height: 33px;
display: inline-block;
background: url(ao.png) no-repeat right;
/*span 不能给高度 利用padding挤开 要span 右边的圆角，所以背景位置要右对齐*/
padding-right: 15px;
}
a:hover span {
color: red;
}
</style>
</head>
<body>
<a href="#">
<span>首sdds页</span>
</a>
<a href="#">
<span>公司简介</span>
</a>
<!-- 总结：1. a设置背景左侧，padding撑开合适宽度. -->
<!-- 2. span 设置背景右侧，padding 撑开合适宽度 剩下由文字撑开宽度 -->
<!-- 3. 之所以a 包含 span 就是因为整个导航都是可以点击的。 -->
</body>
</html>
4. 伪元素选择器
- 伪类选择器 就是选取对象。而伪元素选择器本质上就是插入一个元素（标签 盒子）只不过是行内元素 span a，所以要通过display: inline-block转换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo::before { /*伪元素选择器*/
content: "小狗";
background-color: pink;
border: 1px solid red;
width: 100px; /*默认设置宽高无效，要转为行内块或者块级元素*/
height: 100px;
display: inline-block;
/*伪类选择器 就是选取对象。而伪元素选择器本质上就是插入一个元素（标签 盒子）只不过是行内元素 span a，所以要通过display: inline-block转换*/
}
.demo::after { /*伪元素选择器*/
content: "时代大厦狗";
background-color: pink;
border: 1px solid red;
width: 100px;
height: 100px;
display: inline-block;
}
.demo1 {
width: 100px;
height: 100px;
display: inline-block;
background-color: blue;
position: relative;
margin: 100px auto;
}
.demo1:hover::before { /*鼠标经过之后 前面插入一个伪元素*/
content: "";
width:100%;
height: 100%;
display: block;
border: 2px solid red;
left: 0;
top: 0;
position: absolute; /*要伪元素不占位就要用绝对定位*/
box-sizing: border-box; /*把padding 和 border 都放width里面了*/
}
</style>
</head>
<body>
<div class="demo">
是sdds
</div>
<span class="demo1">
时代大厦
</span>
</body>
</html>
4. css3过渡属性
- transition:(transition-property)要过度的属性 (transition-duration)花费时间 (transition-timing-function)运行曲线 何时开始;
- transition-timing-function:linear 均速， ease 渐渐慢下来, ease-in 加速. ease-out 减速,ease-in-out 先加速后减速
.transitionDemo {
width: 100px;
height: 100px;
display: block;
background-color: pink;
transition: width 0.5s linear 0s,
height 0.5s linear 0.5s;
transition: all 0.5s; /*所有属性都要变化用all就行*/
/*transition 写在div 里面 ，不要写在hover里面*/
margin-bottom: 500px;
}
.transitionDemo:hover {
width: 200px;
height: 200px;
}
5. 位置移动及旋转属性
.div1 {
width: 200px;
height: 200px;
background-color: pink;
transform: translateX(100px); /*水平移动100像素*/
/*translate移动距离 如果是% ，不是以父亲宽度为准，以自己的宽度为准*/
transform: translateX(50%);/* 走div盒子自己宽度 200px的一半 就是100px*/
position: absolute;
left: 50%;
/*top: 50%;*/
transform: translateX(-50%); /*水平居中*/
/*transform: translateY();*/
/*transform: translate(-50%, -50%); /*水平垂直居中*/
}
img.demo1 {
margin: 200px;
transition: all 0.6s;
transform-origin: center center; /*默认中心点旋转*/
transform-origin: left top;
/*transform-origin: 20px 10px;*/
}
img.demo1:hover {
transform: rotate(180deg); /*旋转180度*/
}
img.demo2 {
margin: 0 auto;
display: block;
transition: all 2s;
transform-origin: center center; /*默认中心点旋转*/
}
img.demo2:hover {
transform: rotateX(180deg);
}
h2 {
/*transform: translated3d(x,y,z)；x 和 y 可以是px 可以是%， z 只能是px*/
margin: 100px;
transform: translate3d(0, 50px, 0);
transition: all 0.8s;
}
h2:hover {
transform: translate3d(0, 0, 0);
}
6. css3动画animation属性
- **animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无线循环) 是否反方向;(normal reverse alternate) **
.animation1 {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
animation: go 5s ease 0s infinite;
}
/*@keyframes 动画名称 {} 定义动画*/
@keyframes go {
/*from {
transform: translateX(0);
}
*/
0% { /*等价于from*/
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(800px, 0, 0);
}
50% {
transform: translate3d(800px, 400px, 0);
}
75% {
transform: translate3d(0, 400px, 0);
}
100% { /*等价于 to*/
transform: translate3d(0, 0, 0);
}
/*to {
transform: translateX(600px)
}*/
}
.animation1:hover {
animation-play-state: paused; /*鼠标经过暂停动画 ，离开继续开始*/
}
