CSS效果集錦（持續更新中）

浣熊乾麵包發表於2017-11-19
CSS

高亮光弧效果

　　使用CSS3實現的一個高亮光弧效果，當滑鼠hover到某一個元素上時，一道光弧從左向右閃過，效果如下：

程式碼如下：

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>light</title>
    <style>
        body{
            margin: 0;
        }
        a.floor{
            display: block;
            height: 475px;
        }
        a.floor:hover:before{
            -webkit-transition: left 1.5s;
            -moz-transition: left 1.5s;
            transition: left 1.5s;
            left: 920px;
        }
        a.floor:before{
            content: "";
            position: absolute;
            width: 80px;
            height: 475px;
            top: 0;
            left: -150px;
            overflow: hidden;
            background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
            background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            -webkit-transform: skewX(-25deg);
            -moz-transform: skewX(-25deg);
        }
    </style>
</head>
<body>
<a class="floor" href="javascript:;">
    <img src="./images/girl.jpg" height="475" width="760" alt="">
</a>
</body>
</html>
複製程式碼

 

滑鼠hover圖片突出顯示

　　類似於今日頭條首頁的圖片，當滑鼠hover到上面的時候會著重顯示圖片（放大效果）：

 

程式碼如下：

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        body{
            margin: 0;
        }
        .img-wrap {
            width: 194px;
            height: 108px;
            float: left;
            margin-left: 6px;
            background: #e8e8e8;
            border: 1px solid #e8e8e8;
            overflow: hidden;
            cursor: pointer;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .img-wrap img {
            width: 100%;
            height: 100%;
            border: 0;
            -webkit-transition: all .5s ease-out .1s;
            transition: all .5s ease-out .1s;
        }
        .img-wrap:hover img {
            -webkit-transform: matrix(1.04,0,0,1.04,0,0);
            -ms-transform: matrix(1.04,0,0,1.04,0,0);
            transform: matrix(1.04,0,0,1.04,0,0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    </style>
</head>
<body>
<a class="img-wrap" target="_blank" href="/group/6347460154771013889/">
    <img alt="" src="http://p3.pstatp.com/list/640x360/e59000a6ecaab7d1535">
</a>
</body>
</html>
複製程式碼

 

滑鼠hover圖片移動

向上移動：

程式碼：

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <style>
        body{
            padding: 4rem;
        }
        .img-wrap {
            width: 194px;
            height: 108px;
            display: block;
            cursor: pointer;
        }

        .img-wrap:hover img {
            -webkit-transform: translateY(-5px);
            -moz-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
        }

        .img-wrap img {
            width: 100%;
            height: 100%;
            border: 0;
             -webkit-transition: -webkit-transform .4s ease; 
             transition: -webkit-transform .4s ease; 
            -moz-transition: transform .4s ease,-moz-transform .4s ease;
             transition: transform .4s ease; 
            transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    </style>
</head>
<body>
<a class="img-wrap" href="javascript:;">
    <img alt="" src="http://p3.pstatp.com/list/640x360/11ff00027e781c4f7807">
</a>
</body>
</html>
複製程式碼

向左移動：

 

將上面CSS樣式改成下面即可：

複製程式碼
body{
    padding: 4rem;
}
.img-wrap {
    width: 194px;
    height: 108px;
    display: block;
    cursor: pointer;
}

.img-wrap:hover img {
    -webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px);
}

.img-wrap img {
    width: 100%;
    height: 100%;
    border: 0;
     -webkit-transition: -webkit-transform .4s ease; 
     transition: -webkit-transform .4s ease; 
    -moz-transition: transform .4s ease,-moz-transform .4s ease;
     transition: transform .4s ease; 
    transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
複製程式碼

 

晃動的計算器圖示

程式碼如下：

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        body{
            padding: 4rem;
        }
       .calculator{
            margin: -35px auto 30px;
            width: 150px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #ff7200;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 0;
       }
       .calculator:hover{
            background-color: #fb7b14;
       }
       .calculator i{
            display: inline-block;
            width: 12px;
            height: 16px;
            line-height: 1;
            margin-right: 10px;
            vertical-align: middle;
            background: url("cal.png") no-repeat;
       }
       .calculator i.tada{
            -webkit-animation: tada 2s infinite linear;
            -moz-animation: tada 2s infinite linear;
            animation: tada 2s infinite linear; 
       }

       .calculator .calculator-txt{
            line-height: 1;
            vertical-align: middle;
            color: #ff7200;
            font-size: 14px;
       }

       .calculator:hover .calculator-txt{
            color: #fff;
       }

       .calculator:hover i{
            background-position: 0 -16px;
       }
       .calculator:hover i.tada{
            -webkit-animation: ccc 2s infinite;
            -moz-animation: ccc 2s infinite;
            animation: ccc 2s infinite;
       }

       @keyframes tada{
            0% {
                -webkit-transform: none;
                -moz-transform: none;
                transform: none;
            }
            5% {
                -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
                -moz-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
                transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
            }
            10% {
                -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
                -moz-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
                transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
            }
            15% {
                -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
                -moz-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
                transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
            }
            20% {
                -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
                -moz-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
                transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
            }
            25%, 26% {
                -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
                -moz-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
                transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
            }
            100% {
                -webkit-transform: none;
                -moz-transform: none;
                transform: none;
            }
       }
    </style>
</head>
<body>
<div class="calculator">
    <i class="tada"></i><span class="calculator-txt">省錢計算器</span>
</div>
</body>
</html>
複製程式碼

 

轉動的地球

程式碼如下：

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global</title>
    <style tyle="text/css">
        body {
            background-color: #111;
        }
        #earth {
            width: 300px;
            height: 300px;
            background: url(http://users.evtek.fi/~sampsara/3D/Earth-Spec4096.jpg);
            border-radius: 50%;
            background-size: 610px;
            box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
            animation-name: rotate;
            animation-duration: 12s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            -webkit-animation-name: rotate;
            -webkit-animation-duration: 12s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @keyframes rotate {
            from {
                background-position: 0px 0px;
            }
            to {
                background-position: 610px 0px;
            }
        }
        @-webkit-keyframes rotate {
            from {
                background-position: 0px 0px;
            }
            to {
                background-position: 610px 0px;
            }
        }
    </style>
</head>
<body>
    <div id="earth"></div>
</body>
</html>
複製程式碼

地圖圖片下載

 

點贊效果

程式碼如下：

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>like</title>
    <style type="text/css">
        img{ 
            /*width: 20px; 
            height: 20px;*/ 
            position: absolute; 
            bottom: 100px; 
            left: 50%; 
            margin-left: -12.5px; 
        }
        .btn{ width: 100px; height: 30px; border:0; background: red; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }
    </style>
    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").on(`click`, function(){
                $(".demo").append("<img src=`love-r.png`>");
                $("img").animate({
                    bottom:"200px",
                    width: "50px",
                    marginLeft: "-25px",
                    opacity:"0"
                }, 1000, function(){
                    $(".demo").empty();
                });
            });
        });
    </script>
</head>
<body>
    <div class="demo"></div>
    <input id="btn1" type="button" class="btn" value="點贊">
</body>
</html>
複製程式碼

愛心圖示下載

本文轉自Jaxu部落格園部落格，原文連結：http://www.cnblogs.com/jaxu/p/5946947.html，如需轉載請自行聯絡原作者


相關文章