鼠標(biāo)懸停，背景顏色變化問題

番茄西紅柿發(fā)布于2019-04-23 11:41 / 3728人閱讀

摘要：實例代碼實現(xiàn)漸變時間變化效果藍(lán)色按鈕橙色按鈕紫色按鈕灰色按鈕藍(lán)色按鈕橙色按鈕紫色按鈕灰色按鈕同理可應(yīng)用在超鏈接按鈕等中

實例代碼：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin: 0; padding: 0;}
        .container{
            margin: 0 auto;
            padding-top: 30px;
            width: 1000px;
        }
        .btn{
            display: inline-block;
            padding: 0 30px;
            width: auto;
            height: 35px;
            font: 14px/35px microsoft yahei;
            color: #fff; border: 0;
            border-radius: 3px;
            text-align: center;
            cursor: pointer;
            /*實現(xiàn)漸變（時間變化效果）*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .blueBtn{
            background: #5dcbff;
        } /*藍(lán)色按鈕*/
        .blueBtn:hover{
            background: #40b6ee;
        }
        .orangeBtn{
            background: #ff5700;
        }/*橙色按鈕*/
        .orangeBtn:hover{
            background: #e25d18;
        }
        .violetBtn{
            background: #6680ff;
        }/*紫色按鈕*/
        .violetBtn:hover{
            background: #425de0;
        }
        .grayBtn{
            background: #999;
        }/*灰色按鈕*/
        .grayBtn:hover{
            background: #7f7f7f;
        }
    style>
head>
<body>
<div class="container">
    <span class="btn blueBtn">藍(lán)色按鈕span>
    <span class="btn orangeBtn">橙色按鈕span>
    <span class="btn violetBtn">紫色按鈕span>
    <span class="btn grayBtn">灰色按鈕span>
div>
body>
html>

同理可應(yīng)用在超鏈接、按鈕等中

GPU云服務(wù)器云服務(wù)器鼠標(biāo)懸停 js鼠標(biāo)懸停鼠標(biāo)懸停事件html html鼠標(biāo)懸停下拉

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1008.html

相關(guān)文章

CSS選擇器

摘要：子選擇器用兩個常用選擇器，中間通過進(jìn)行選擇。注意不要和子選擇器選擇對象范圍混淆例如測試子選擇器第一個標(biāo)簽第二個標(biāo)簽父元素的后代中的所有元素的字體都會被設(shè)置成紅色。通配選擇器通用選擇器用來表示選擇作用于所有元素。 CSS選擇器（Selectors ）一、CSS選擇器作用CSS選擇器可用于實現(xiàn)對HTML網(wǎng)頁上的元素樣式的一對一，一對多或者多對一的控制。二、CSS選擇器的種類（這里介紹常用...

Juven 2019-08-30 12:50 評論0 收藏0
CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導(dǎo)致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結(jié)果會導(dǎo)致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當(dāng)顯示鏈接的層次。默認(rèn)情況下，由于列表（li）是塊級元素...

pingink 2019-08-28 18:03 評論0 收藏0
送給CSS初學(xué)者的懸停過渡動畫三部曲

摘要：最后，將動畫函數(shù)選為。的表現(xiàn)狀態(tài)就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個褪色的過渡。通過百分比的方式指定動畫的進(jìn)度相對于初始位置右移。同時希望動畫持續(xù)秒的時長，采用的動畫效果。 CSS不一定要寫得多么復(fù)雜才能實現(xiàn)特殊效果。如下就是三個超級簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應(yīng)用程序中，卻會讓它增色不少。showImg(https://segmentfa...

jsliang 2019-08-02 16:14 評論0 收藏0
送給CSS初學(xué)者的懸停過渡動畫三部曲

摘要：最后，將動畫函數(shù)選為。的表現(xiàn)狀態(tài)就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個褪色的過渡。通過百分比的方式指定動畫的進(jìn)度相對于初始位置右移。同時希望動畫持續(xù)秒的時長，采用的動畫效果。 CSS不一定要寫得多么復(fù)雜才能實現(xiàn)特殊效果。如下就是三個超級簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應(yīng)用程序中，卻會讓它增色不少。showImg(https://segmentfa...

leo108 2019-08-29 18:44 評論0 收藏0
前端每日實戰(zhàn)：126# 視頻演示如何用純 CSS 創(chuàng)作小球變矩形背景的按鈕懸停效果

摘要：效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbgnoQ?w=400&h=300); 效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

U2FsdGVkX1x 2019-08-02 16:03 評論0 收藏0