整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ss中:hover是一個(gè)偽類選擇器，:hover偽類選擇器在鼠標(biāo)移到元素上時(shí)向此元素添加特殊的樣式。:hover選擇器適用于所有元素。
:hover在鼠標(biāo)移到鏈接上時(shí)添加的特殊樣式。
在IE中必須聲明“<!DOCTYPE>”才能保證“:hover”選擇器能夠有效
-------------------------------------------------------------------------------------------------------------------------
代碼如下
<!DOCTYPE html>
<html>
<head>
<title>標(biāo)題-爆米花</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript" src="linkJavaScript.js"></script>
<meta charset="UTF-8">
<style type="text/css">
#ceshi {
display: flex;
align-items: center;
justify-content: space-around;
height: 500px;
background: #031628;
/* 鼠標(biāo)的樣式 */
cursor: url('./mycur.cur'), auto
}
/* 這個(gè)是對(duì)span的簡(jiǎn)單修飾 沒什么實(shí)質(zhì)性作用 */
.myspan {
border: 1px solid;
background-color: transparent;
text-transform: uppercase;
font-size: 14px;
padding: 10px 20px;
font-weight: 300;
}
.one {
width: 250px;
height: 370px;
background-image: url(./3.jpeg);
background-repeat: no-repeat;
background-size: contain;
}
.one:hover {
width: 600px;
height: 350px;
background-image: url(./2.jpg);
background-repeat: no-repeat;
background-size: contain;
}
</style>
<script>
document.write("hover特效!")
</script>
</head>
<body>
爆米花的內(nèi)容<br>
<div id="ceshi">
<span class="myspan one">變美</span>
</div>
</body>
</html>具體解釋在其中顯示
1）想讓元素樣式有個(gè)變化的過程，那么我們需要以某種方式從一個(gè)樣式過渡到另一種樣式。
CSS3 過渡是元素從一種樣式逐漸過渡到另一種樣式。
其語法如下所示：
transition: 指定屬性 持續(xù)時(shí)間 速度曲線 開始時(shí)間;它是一個(gè)復(fù)合屬性，我們也可以如下分開使用這幾個(gè)屬性。
transition-property: 屬性值; /*指定屬性名*/
transition-duration: 屬性值; /*完成過渡這一過程的時(shí)間*/
transition-timing-function: 屬性值; /*速度曲線*/
transition-delay: 屬性值; /*過渡的開始時(shí)間*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin-top:40px;
margin-left:40px;
width:50px;
height:50px;
background-color:#51adcf;
transition: transform 1s ease-in-out; /*ease-in-out 慢速開始慢速結(jié)束*/
}
div:nth-child(2){
transform: rotate(-60deg);
}
div:hover{
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>hover變兩倍大
transition-timing-function 屬性用來設(shè)置過渡效果從開始到結(jié)束的時(shí)間曲線，它有很多可用屬性值，常用屬性值如下表：
屬性值 | 說明 |
ease | 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
linear | 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。 |
ease-in | 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
ease-out | 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
ease-in-out | 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
steps(int,start 或者 end) | steps() 有兩個(gè)參數(shù)，第一個(gè)為步長(zhǎng)，其值必須為整數(shù)，第二個(gè)值為可選值，它有兩個(gè)取值，分別是 start 和 end。 |
step-start | 相當(dāng)于 steps(1, start)。 |
step-end | 相當(dāng)于 steps(1, end)。 |
cubic-bezier(n,n,n,n) | 規(guī)定在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。 |
initial | 規(guī)定使用默認(rèn)值。 |
inherit | 規(guī)定從父元素繼承該屬性值。 |
例子，圖片一秒一步，4步變大為原先二倍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
margin:50px;
background-color:cornflowerblue;
transition: transform 4s steps(4);
}
div:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>練習(xí)一下：
按以上要求用 HTML 完成以下效果：
寫CSS的常用套路（下篇）...
點(diǎn)擊觀看——我寫CSS的常用套路（上篇）...
為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會(huì)使陰影更加絲滑
本demo地址：Pagination
注意到box-shadow還有個(gè)inset，用于盒子內(nèi)部發(fā)光
利用這個(gè)特性我們可以在盒子內(nèi)部的某個(gè)范圍內(nèi)設(shè)定顏色，做出一個(gè)新月形
再加點(diǎn)動(dòng)畫和濾鏡效果，“猩紅之月”閃亮登場(chǎng)！
注意到它散發(fā)著淡淡的紅光，其實(shí)就是2個(gè)偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果
本demo地址：Crimson Crescent Loading
文本陰影，本質(zhì)上和box-shadow相同，只不過是相對(duì)于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果
本demo地址：Staggered GlowIn Text
本demo地址：Neon Text
本demo地址：Staggered Bouncing 3D Loading
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本demo地址：Menu Hover Fill Text
漸變可以作為背景圖片的一種，具有很強(qiáng)的色彩效果，甚至可以用來模擬光
線性漸變是筆者最常用的漸變
這個(gè)作品用到了HTML的dialog標(biāo)簽，線性漸變背景，動(dòng)畫以及overflow障眼法，細(xì)心的你看出來了嗎:)
本demo地址：Confirm Modal
徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個(gè)橢圓形的徑向漸變
此外，由于背景可以疊加，我們可以疊加多個(gè)不同位置大小的徑向漸變來生成圓點(diǎn)群，再加上動(dòng)畫就產(chǎn)生了一種微粒效果，無需多余的div元素
本demo地址：Particle Button
圓錐漸變可以用于制作餅圖
用一個(gè)偽元素疊在餅圖上面，并將content設(shè)為某個(gè)值（這個(gè)值通過CSS變量計(jì)算出來），就能制作出度量計(jì)的效果，障眼法又一次完成了它的使命
本demo地址：Gauge (No SVG)
PS里的濾鏡，blur最常用
當(dāng)blur濾鏡和contrast濾鏡一起使用時(shí)，會(huì)產(chǎn)生一種融合（gooey）的奇特效果
本demo地址：Snow Scratch
對(duì)背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果
本demo地址：Frosted Glass
PS里的混合模式，常用于文本在背景下的特殊效果
以下利用濾色模式（screen）實(shí)現(xiàn)文本視頻蒙版效果
本demo地址：Video Mask Text
PS里的裁切，可以制作各種不規(guī)則形狀。如果和動(dòng)畫結(jié)合也會(huì)相當(dāng)有意思
本demo地址：Name Card Hover Expand
由于clip-path有裁切功能，因此可以將多個(gè)文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯(cuò)動(dòng)畫，就能制作出酷炫的故障效果（glitch）。
本demo地址：Cross Bar Glitch Text
PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分
雖然clip-path能裁切出形狀，但它無法鏤空，因?yàn)樾螤畹睦锩嫠懿恢?/p>
可能有人（包括我）會(huì)用偽元素來“模擬”鏤空（通過設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個(gè)背景或浮在圖片上就會(huì)暴露出來，這時(shí)我們就要求助于遮罩了
假設(shè)，你想制作一個(gè)空心的圓環(huán)，那么你只需將一個(gè)徑向漸變作為元素的遮罩，并且第一個(gè)color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因?yàn)檎谡值亩x就是只顯示遮罩圖片非透明的部分
注意：為了消除鋸齒，這個(gè)徑向漸變的中間需要有一個(gè)額外的color-stop用于緩沖，長(zhǎng)度設(shè)置為原長(zhǎng)度加0.5px即可
本demo地址：Circle Arrow Nav
投影效果，不怎么常用，適合立體感強(qiáng)的作品
本demo地址：Card Flip Reflection
雖然這并不是一個(gè)CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情
那么何時(shí)用它呢？當(dāng)CSS動(dòng)畫中有屬性無法從CSS中獲取時(shí)，自然就會(huì)使用到它了
目前CSS還尚未有獲取鼠標(biāo)位置的API，因此考慮用JS來進(jìn)行
通過查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽鼠標(biāo)事件的API中，可通過e.clientX和e.clientY來獲得鼠標(biāo)當(dāng)前的位置
既然能夠獲取鼠標(biāo)的位置，那么跟蹤鼠標(biāo)的位置也就不是什么難事了：通過監(jiān)聽mouseenter和mouseleave事件，來獲取鼠標(biāo)出入一個(gè)元素時(shí)的位置，并用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離，監(jiān)聽mousemove事件，來獲取鼠標(biāo)在元素上移動(dòng)時(shí)的位置，同樣地用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離，這樣一個(gè)跟蹤鼠標(biāo)的效果就實(shí)現(xiàn)了
本demo地址：Menu Hover Image
CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴(kuò)展CSS的功能
目前來說，我們無法直接給漸變添加動(dòng)畫，因?yàn)闉g覽器不理解要改變的值是什么類型
這時(shí)，我們就可以利用CSS.registerProperty()來注冊(cè)我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對(duì)顏色應(yīng)用插值方法來進(jìn)行動(dòng)畫
還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動(dòng)起來呢？答案是肯定的，定義三個(gè)變量：--color1、--color2和--pos，其中--pos的語法類型為長(zhǎng)度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會(huì)順時(shí)針旋轉(zhuǎn)出現(xiàn)
利用絕對(duì)定位和層疊上下文，我們可以疊加多個(gè)從小到大的餅圖，再給它們?cè)O(shè)置不同的顏色，應(yīng)用交錯(cuò)動(dòng)畫，就有了下面這個(gè)炫麗的效果
本demo地址：Mawaru
將交錯(cuò)動(dòng)畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單
本demo地址：Shinchou Menu
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
