欧美性猛交xxx嘿人猛交_又色又爽又高潮免费观看_精品国产一区二区三区久久影院_青娱乐极品视觉盛宴国产视频

技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

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

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

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

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

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

demo

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

首先，我們從簡單的開始，就是單獨實現一個三角形或箭頭的旋轉，不要用到菜單上。

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

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

html完整代碼

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

<style type="text/css">



/* 這是三角形旋轉效果樣式 */

.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);/*旋轉180度 ，-180deg 是逆旋轉*/
}


/* 這是箭頭旋轉效果樣式 */

.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);/*旋轉180度 */
    /*transform: rotate(-45deg);*/ /*逆旋轉180度*/

}

</style>

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



</body>
</html>

execcodegetcode

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

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

三角形(箭頭)的旋轉效果應用到菜單上時，需要配合菜單的css代碼。

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

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

完整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);/*旋轉180度， -180deg是逆旋轉*/
}

/* 箭頭樣式 */
.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);/*旋轉180度*/
    /*transform: rotate(-45deg);*/ /*逆旋轉180度*/
    margin-top:10px;
}

</style>

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

   
  <div class="item">產品列表<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

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

相關文章推薦

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