技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

純CSS3：鼠標(biāo)移上去三角形(箭頭)旋轉(zhuǎn)【實(shí)例演示#源碼下載】

作者:admin    時(shí)間:2020-2-24 22:32:3    瀏覽:

我們常在一些網(wǎng)站菜單上看到當(dāng)鼠標(biāo)移上去三角形或箭頭旋轉(zhuǎn)的效果，這個(gè)效果在百度知道、淘寶網(wǎng)站上都有用到，個(gè)人覺(jué)得這個(gè)效果很好，于是在本文將介紹它的實(shí)現(xiàn)方法。我用的方法是純css3實(shí)現(xiàn)，無(wú)需用到j(luò)Query程序。

鼠標(biāo)移上去三角形(箭頭)旋轉(zhuǎn)

鼠標(biāo)移上去三角形(箭頭)旋轉(zhuǎn)

demo

一、三角形(箭頭)的旋轉(zhuǎn)效果

首先，我們從簡(jiǎn)單的開(kāi)始，就是單獨(dú)實(shí)現(xiàn)一個(gè)三角形或箭頭的旋轉(zhuǎn)，不要用到菜單上。

三角形(箭頭)的旋轉(zhuǎn)效果

三角形(箭頭)的旋轉(zhuǎn)效果

html完整代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css">



/* 這是三角形旋轉(zhuǎn)效果樣式 */

.box {
    margin: 100px auto;
    width: 0;
    height: 0;
    border: 5px solid transparent;/*三角形寬5px 邊框都為透明*/
    border-top-color: red;/*頂部邊框?yàn)榧t色*/
    border-bottom: none;/*底部去掉邊框*/
    transition: all 0.5s ease 0s;/*all是所有屬性都將獲得動(dòng)畫(huà)效果  0.5秒完成動(dòng)畫(huà) ease(逐漸變慢)*/
}

.box:hover {
    transform: rotate(180deg);/*旋轉(zhuǎn)180度 ，-180deg 是逆旋轉(zhuǎn)*/
}


/* 這是箭頭旋轉(zhuǎn)效果樣式 */

.arrow {
    margin: 150px auto;
    width: 5px;
    height: 5px;
    border-top: 2px solid #000; /* 箭頭顏色 */
    border-right: 2px solid #000; /* 箭頭顏色 */
    transform: rotate(135deg);
    transition: all 0.5s ease 0s;/*all是所有屬性都將獲得動(dòng)畫(huà)效果  0.5秒完成動(dòng)畫(huà) ease(逐漸變慢)*/
}
.arrow:hover {
    transform: rotate(315deg);/*旋轉(zhuǎn)180度 */
    /*transform: rotate(-45deg);*/ /*逆旋轉(zhuǎn)180度*/

}

</style>

</head>
<body>
    
    <!-- 這是三角形html -->
    <div class="box"></div>
  
    <!-- 這是箭頭html -->
    <div class="arrow"></div>



</body>
</html>

execcodegetcode

可看代碼注釋?zhuān)鶕?jù)個(gè)人需要進(jìn)行屬性修改，如符號(hào)大小、符號(hào)顏色、旋轉(zhuǎn)速度、旋轉(zhuǎn)方向等。

二、菜單上使用三角形(箭頭)的旋轉(zhuǎn)效果

三角形(箭頭)的旋轉(zhuǎn)效果應(yīng)用到菜單上時(shí)，需要配合菜單的css代碼。

菜單上使用三角形(箭頭)的旋轉(zhuǎn)效果

菜單上使用三角形(箭頭)的旋轉(zhuǎn)效果

完整html代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css">

/* 菜單樣式 */
.item {
    margin: 20px 10px;
    width:80px;
    height:23px;
    float:left;
    margin-left:30px;
    cursor:pointer;
}

/* 三角形樣式 */
.box {
    float:right;
    margin-top:10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;/*三角形寬5px 邊框都為透明*/
    border-top-color: red;/*頂部邊框?yàn)榧t色*/
    border-bottom: none;/*底部去掉邊框*/
    transition: all 0.5s ease 0s;/*all是所有屬性都將獲得動(dòng)畫(huà)效果  0.5秒完成動(dòng)畫(huà) ease(逐漸變慢)*/
}

.item:hover .box {
    transform: rotate(180deg);/*旋轉(zhuǎn)180度， -180deg是逆旋轉(zhuǎn)*/
}

/* 箭頭樣式 */
.arrow {
    float:right;
    margin-top:7px;
    width: 5px;
    height: 5px;
    border-top: 2px solid red;  /* 箭頭顏色 */
    border-right: 2px solid red; /* 箭頭顏色 */
    transform: rotate(135deg);
    transition: all 0.5s ease 0s;/*all是所有屬性都將獲得動(dòng)畫(huà)效果  0.5秒玩完成動(dòng)畫(huà) ease(逐漸變慢)*/
}

.item:hover .arrow {
    transform: rotate(315deg);/*旋轉(zhuǎn)180度*/
    /*transform: rotate(-45deg);*/ /*逆旋轉(zhuǎn)180度*/
    margin-top:10px;
}

</style>

</head>
<body style="color:#999">

   
  <div class="item">產(chǎn)品列表<div class="box"></div></div>
  <div class="item">幫助支持<div class="box"></div></div>

  <div class="item">我的消息<div class="arrow"></div></div>
  <div class="item">我的私信<div class="arrow"></div></div>


</body>

</html>

execcodegetcode

可看代碼注釋?zhuān)鶕?jù)個(gè)人需要進(jìn)行屬性修改，如符號(hào)大小、符號(hào)顏色、旋轉(zhuǎn)速度、旋轉(zhuǎn)方向等。

相關(guān)文章推薦

標(biāo)簽: css3  hover  懸停效果  箭頭  三角形  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */