1. css 精靈技術(shù)（sprite）
- css 精靈技術(shù)（sprite）：將多個(gè)小背景圖片合成一個(gè)大的背景圖片(精靈圖)返回回來(lái)，利用background-position去定位自己需要的圖片，精靈技術(shù)是為了減少服務(wù)器的請(qǐng)求次數(shù)，減少服務(wù)器壓力。
2. 滑動(dòng)門核心技術(shù)
- 核心技術(shù)：就是利用css精靈（主要要背景位置）和盒子padding撐開寬度，以便能適用不同的字?jǐn)?shù)的導(dǎo)航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*滑動(dòng)門技術(shù)*/
a {
display: inline-block;
height: 33px;
/*千萬(wàn)不能給寬度，寫死寬度不對(duì)的，我們要推拉門*/
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 右邊的圓角，所以背景位置要右對(duì)齊*/
padding-right: 15px;
}
a:hover span {
color: red;
}
</style>
</head>
<body>
<a href="#">
<span>首sdds頁(yè)</span>
</a>
<a href="#">
<span>公司簡(jiǎn)介</span>
</a>
<!-- 總結(jié)：1. a設(shè)置背景左側(cè)，padding撐開合適寬度. -->
<!-- 2. span 設(shè)置背景右側(cè)，padding 撐開合適寬度 剩下由文字撐開寬度 -->
<!-- 3. 之所以a 包含 span 就是因?yàn)檎麄€(gè)導(dǎo)航都是可以點(diǎn)擊的。 -->
</body>
</html>
4. 偽元素選擇器
- 偽類選擇器 就是選取對(duì)象。而偽元素選擇器本質(zhì)上就是插入一個(gè)元素（標(biāo)簽 盒子）只不過(guò)是行內(nèi)元素 span a，所以要通過(guò)display: inline-block轉(zhuǎn)換。
<!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; /*默認(rèn)設(shè)置寬高無(wú)效，要轉(zhuǎn)為行內(nèi)塊或者塊級(jí)元素*/
height: 100px;
display: inline-block;
/*偽類選擇器 就是選取對(duì)象。而偽元素選擇器本質(zhì)上就是插入一個(gè)元素（標(biāo)簽 盒子）只不過(guò)是行內(nèi)元素 span a，所以要通過(guò)display: inline-block轉(zhuǎn)換*/
}
.demo::after { /*偽元素選擇器*/
content: "時(shí)代大廈狗";
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 { /*鼠標(biāo)經(jīng)過(guò)之后 前面插入一個(gè)偽元素*/
content: "";
width:100%;
height: 100%;
display: block;
border: 2px solid red;
left: 0;
top: 0;
position: absolute; /*要偽元素不占位就要用絕對(duì)定位*/
box-sizing: border-box; /*把padding 和 border 都放width里面了*/
}
</style>
</head>
<body>
<div class="demo">
是sdds
</div>
<span class="demo1">
時(shí)代大廈
</span>
</body>
</html>
4. css3過(guò)渡屬性
- transition:(transition-property)要過(guò)度的屬性 (transition-duration)花費(fèi)時(shí)間 (transition-timing-function)運(yùn)行曲線 何時(shí)開始;
- transition-timing-function:linear 均速， ease 漸漸慢下來(lái), 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. 位置移動(dòng)及旋轉(zhuǎn)屬性
.div1 {
width: 200px;
height: 200px;
background-color: pink;
transform: translateX(100px); /*水平移動(dòng)100像素*/
/*translate移動(dòng)距離 如果是% ，不是以父親寬度為準(zhǔn)，以自己的寬度為準(zhǔn)*/
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; /*默認(rèn)中心點(diǎn)旋轉(zhuǎn)*/
transform-origin: left top;
/*transform-origin: 20px 10px;*/
}
img.demo1:hover {
transform: rotate(180deg); /*旋轉(zhuǎn)180度*/
}
img.demo2 {
margin: 0 auto;
display: block;
transition: all 2s;
transform-origin: center center; /*默認(rèn)中心點(diǎn)旋轉(zhuǎn)*/
}
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動(dòng)畫animation屬性
- **animation: 動(dòng)畫名稱 動(dòng)畫時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始 播放次數(shù)(infinite無(wú)線循環(huán)) 是否反方向;(normal reverse alternate) **
.animation1 {
width: 100px;
height: 100px;
margin: 50px;
background-color: blue;
animation: go 5s ease 0s infinite;
}
/*@keyframes 動(dòng)畫名稱 {} 定義動(dòng)畫*/
@keyframes go {
/*from {
transform: translateX(0);
}
*/
0% { /*等價(jià)于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% { /*等價(jià)于 to*/
transform: translate3d(0, 0, 0);
}
/*to {
transform: translateX(600px)
}*/
}
.animation1:hover {
animation-play-state: paused; /*鼠標(biāo)經(jīng)過(guò)暫停動(dòng)畫 ，離開繼續(xù)開始*/
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
