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

贊助商

分類目錄

贊助商

最新文章

搜索

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

作者:admin    時間:2020-2-24 22:32:3    瀏覽:

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

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

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

demo

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

首先，我們從簡單的開始，就是單獨實現(xiàn)一個三角形或箭頭的旋轉(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;/*頂部邊框為紅色*/
    border-bottom: none;/*底部去掉邊框*/
    transition: all 0.5s ease 0s;/*all是所有屬性都將獲得動畫效果  0.5秒完成動畫 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是所有屬性都將獲得動畫效果  0.5秒完成動畫 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

可看代碼注釋，根據(jù)個人需要進行屬性修改，如符號大小、符號顏色、旋轉(zhuǎn)速度、旋轉(zhuǎn)方向等。

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

三角形(箭頭)的旋轉(zhuǎn)效果應用到菜單上時，需要配合菜單的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;/*頂部邊框為紅色*/
    border-bottom: none;/*底部去掉邊框*/
    transition: all 0.5s ease 0s;/*all是所有屬性都將獲得動畫效果  0.5秒完成動畫 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是所有屬性都將獲得動畫效果  0.5秒玩完成動畫 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

可看代碼注釋，根據(jù)個人需要進行屬性修改，如符號大小、符號顏色、旋轉(zhuǎn)速度、旋轉(zhuǎn)方向等。

相關(guān)文章推薦

標簽: css3  hover  懸停效果  箭頭  三角形  
x