6種css3滑鼠滑過動畫效果

阿新 • • 發佈：2018-11-02

<html>

<head>
    <meta charset="utf-8" />
    <title>6種css3滑鼠滑過動畫效果</title>
    <style type="text/css">
    /*****全域性樣式*****/

    * {
        padding: 0;
        margin: 0;
        font-family: "微軟雅黑"
    }

    h2 {
        margin: 15px 0;
        font-weight: 300;
    }

    .content {
        margin: 0 auto;
        max-width: 728px;
        margin-top: 20px;
        text-align: center
    }

    footer {
        margin: 10px 0;
        font-size: 14px;
    }

    hr {
        margin: 20px 0;
    }

    code {
        font-size: 12px;
    }
    /*****滑鼠懸停圖片變大文字消失*****/

    .style1 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style1 ul li {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    .style1 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style1 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
    }

    .style1 ul li:hover {
        -webkit-transform: scale(1.1);
        /*1.1放大值*/
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        /*  本hover用的是：transform屬性；scale是屬性下放大；*/
    }

    .style1 ul li:hover span {
        opacity: 0
    }
    /*****滑鼠懸停文字消失*****/

    .style2 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style2 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    .style2 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        /*其意相同：transition：all；初始過度屬性 值0；*/
    }


    .style2 ul li:hover span {
        opacity: 0
    }
    /*opacit：0；代表完全消失；0.5半透明*/
    /*****滑鼠懸停整體旋轉*****/

    .style3 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style3 ul li {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
    }

    .style3 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style3 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style3 ul li:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        /*css3旋轉屬性； 360deg（順時針旋轉360度）*/
        -ms-transform: rotate(360deg);
    }
    /*****滑鼠懸停整體旋轉放大*****/

    .style4 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style4 ul li {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style4 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style4 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style4 ul li:hover {
        transform: rotate(360deg) scale(1.2);
        -webkit-transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
        -o-transform: rotate(360deg) scale(1.2);
        /*transform 屬性下 rotate（旋轉）和scale（放大）屬性；可以同時用*/
        -ms-transform: rotate(360deg) scale(1.2);
    }
    /*****滑鼠懸停整體上升*****/

    .style5 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style5 ul li {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style5 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style5 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style5 ul li:hover {
        transform: translate(0, -10px);
        -webkit-transform: translate(0, -10px);
        -moz-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
    }
    /*****滑鼠懸停圖片放大縮小動畫*****/

    @-webkit-keyframes play {
        50% {
            transform: scale(0.8);
        }

        100% {
            transform: scale(1);
        }
    }

    .style6 ul li {
        float: left;
        margin: 0 6px;
        position: relative;
        list-style: none
    }

    .style6 ul li {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style6 ul li img {
        width: 170px;
        height: 120px;
        border-radius: 2px;
    }

    .style6 ul li span {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        line-height: 23px;
        position: absolute;
        bottom: 3px;
        width: 170px;
        left: 0;
        font-size: 12px;
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }

    .style6 ul li:first-child:hover {
        animation: play 0.3s 50 linear;
    }

    .style6 ul li:last-child:hover {
        animation: play 0.3s 50 linear;
        position: relative;
    }

    .style6 ul li:last-child h1 {
        position: absolute;
        color: red;
        top: 50px;
        font-size: 40px;
        left: 96px;
    }

    .style6 ul li:nth-child(2):hover {
        animation: play 0.3s 1 linear;
    }

    .style6 ul li:nth-child(3):hover {
        animation: play 0.3s 2 linear;
    }
    </style>
</head>

<body>

    <body class="content">
        <div class="style1 ">
            <h2>1.滑鼠懸停圖片變大文字消失</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停圖片變大文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停圖片變大文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停圖片變大文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停圖片變大文字消失</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style2">
            <h2>2.滑鼠懸停文字消失</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停文字消失</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停文字消失</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style3">
            <h2>3.滑鼠懸停整體旋轉</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style4">
            <h2>4.滑鼠懸停整體旋轉放大</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉放大</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉放大</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉放大</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體旋轉放大</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style5">
            <h2>5.滑鼠懸停整體上升</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體上升</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體上升</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體上升</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停整體上升</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <div class="style6">
            <h2>6.滑鼠懸停心臟咔咔跳</h2>
            <ul>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停心臟咔咔跳</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停心臟咔咔跳</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停心臟咔咔跳</span></li>
                <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>滑鼠懸停心臟咔咔跳</span></li>
            </ul>
        </div>
        <div style="clear:both"></div>
        <footer>
            <code>
        放大 修改scale(放大的值)<br />
        旋轉放大 修改rotate(旋轉度數) scale(放大值)<br />
        上下左右移動 修改translate(x軸,y軸)
    </code>
            <br />
            <hr />
        </footer>
    </body>

</html>

6種css3滑鼠滑過動畫效果

<html> <head> <meta charset="utf-8" /> <title>6種css3滑鼠滑過動畫效果</title> <style type="text/css"> /*

CSS3滑鼠滑過放大突出效果

li{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); -webkit-transition-duration: 0.5s; -moz-transitio

css 設定滑鼠滑過變色效果

1.樣式說明：當滑鼠滑過或者懸停在圖片上時，圖片顏色變灰，看似是圖片變灰變色效果，實際上是圖片被設定為半透明樣式 2.CSS樣式程式碼：（1）HTML程式碼： <div class="sasa-layout

滑鼠滑過圖片使圖片尺寸大小改變（帶動畫效果）

下面實現了滑鼠放到圖片上去，圖片慢慢變大，滑鼠移走，圖片慢慢恢復。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑鼠

20種炫酷CSS3按鈕滑鼠滑過特效

這是一款集合20組不同CSS3按鈕樣式和按鈕滑鼠滑過特效的外掛。這20組css3按鈕每一組都有3種示例，每一個示例都使用CSS3製作炫酷的滑鼠滑過動畫。這些按鈕適用於各種場合，相信總有一款適合你。請注意這些按鈕動畫效果只在最新版本的現代瀏覽器上工作，(Mobile)Saf

超連結與眾不同的滑鼠滑過超連結下劃線動畫效果

檢視原文預設的超連結下劃線動畫十分的生硬，我們可以通過一些簡單的處理，來製作出帶平滑過渡效果的超連結下劃線動畫效果。眾所周知，超連結<a>元素在預設情況下滑鼠滑過時會出現一條下劃線。預設的超連結下劃線動畫十分的生硬，我們可以通過一些簡

HTML(實現滑鼠滑過留下痕跡的效果)

首先我們先要把圖形打出來 <style> div{ width: 10px; height: 10px; background: red; position: absolute;

CSS通過transition 實現的滑鼠滑過邊框線條動畫特效原理

transition: property duration timing-function delay;transition主要包含四個屬性值：執行變換的屬性transition-property，變換延續的時間transition-duration，在延續的時間段內，變換的

css3實現三種不同的loading載入動畫效果

HTML： <div class="box"> <div class="loader"> <div class="loading-1">

h5新標籤和css3動畫製作一個滑鼠懸停的動畫效果

<span style="font-size:18px;"><div class="grid wow zoomIn"> <figure class="effect-bubba"> <

滑鼠滑過圖片抖動晃動效果（css/Shake）

別人網站上看到滑鼠經過圖片左右抖動晃動的特效,自己也想弄一個,查了查是用到的就是CSS3的特性——Shake Shake使用SASS編寫，利用它我們可以實現多種不同樣式的抖動效果。這是一個很微小的動畫

CSS3——制作帶動畫效果的小圖片

技術分享 margin OS div IV hidden pan ali body 還挺有意思的，但是我沒有截取動畫的軟件，就沒辦法展示我的小動圖了，暫時放一個靜態的吧： main.html <!DOCTYPE html> <html lang="en

ASP.NET中GridView實現行滑鼠滑過及選擇變色

https://blog.csdn.net/u010568463/article/details/44835833 一、滑鼠滑過變色只要要給GridView新增OnRowDataBound方法即可。前臺程式碼： <asp:GridView ID="GridView

滑鼠滑過圖片圖片放大

<!doctype html> <html> <head> <style> img { display:block; } .imgbox { width:160px; border:solid 2px

Android 分享介面製作從底部滑出動畫效果

1.自定義類如下： BaseDialog: import android.app.Dialog; import android.content.Context; import android.util.DisplayMetrics; import android.vi

HTML滑鼠滑過特效教程

時下,各種個性化展示網站都會通過滑鼠特效增強與使用者之間的互動，使得網站更加生動，彷彿懂得跟使用者談話一樣。就連展示模式相對古板的資訊類網站或者入口網站也抵擋不住誘惑，悄悄地加入了一些按鈕互動的效果。　　本文將給大家介紹一類簡約而不簡單的滑鼠滑過按鈕特效，既能讓個人網

Css中控制當滑鼠滑過元素時，顯示它裡面的元素

Css中控制當滑鼠滑過li元素時，顯示它裡面的ul元素 #navigation ul li:hover ul{ Background-color:#88c366; Position:absolute; Width:100px;

實現滑鼠滑過文字資訊動態出現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑鼠滑過文字資訊動態出現</title> <style

百度地圖滑鼠滑過marker時開啟自定義資訊視窗

在百度地圖上實現滑鼠滑過marker時開啟自定義的資訊視窗，當滑鼠滑出marker時關閉已開啟的資訊視窗。首先，需要在地圖上新增一個marker，具體如下所示： $.ajax({ async:false, cache:true, u

QQListview左滑刪除，經典案例,高仿QQ左滑，動畫效果，自定義！！

雖然有很多開放寫得已經很完美的listview開源框架, 用起來也很方便，只需修改下佈局，大致套路都一樣，幾乎沒什麼bug。今天我們來看看自己定義的QQListview；在這篇文章你能學到什麼？ 1.事件衝突---listview 上下滑動

6種css3滑鼠滑過動畫效果

相關推薦