CSS3实现的一批hover特效

最新推荐文章于 2024-08-05 11:08:15 发布

Orange_J

最新推荐文章于 2024-08-05 11:08:15 发布

阅读量4.4k

点赞数 2

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/juhaotian/article/details/47393665

版权

博主分享了从codepen上的hover.css项目中获取灵感，亲手实现的一系列CSS3 hover特效。为了方便，已将所有CSS3代码内联到HTML中，读者可以直接下载并用浏览器查看效果。

摘要由CSDN通过智能技术生成

本特效的原版是codepen上面的hover.css项目，个人很喜欢所以把所有的hover特效自己也写了一遍，上传文件麻烦所以直接把css整合到HTML代码中了，代码复制下来保存后即可用浏览器打开浏览。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id="title">Hover</title>
    <style>
        .container {
            margin: 0 auto;
            width: 800px;
        }

        .button {
            margin: .4em;
            padding: 1em;
            cursor: pointer;
            background: #ececec;
            text-decoration: none;
            color: #666;
            display: inline-block;
        }


        /* 2D TRANSFORMS */
        /* Grow */
        .grow {
            transition-duration: .3s;
            transition-property: transform;

            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .grow:hover {
            transform: scale(1.1);
        }

        /* Shrink */
        .shrink {
            transition-duration: .3s;
            transition-property: transform;

            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .shrink:hover {
            transform: scale(.9);
        }

        /* Pulse */
        @keyframes pulse {
            25% {
                transform: scale(1.1);
            }

            75% {
                transform: scale(.9);
            }
        }

        .pulse {

        }
        .pulse:hover {
            animation-name: pulse;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        /* Pulse Grow*/
        @keyframes pulse-grow {
            to {
                transform: scale(1.1);
            }
        }
        .pulse-grow {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .pulse-grow:hover {
            animation-name: pulse-grow;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* Pulse shrink */
        @keyframes pulse-shrink {
            to {
                transform: scale(.9);
            }
        }

        .pulse-shrink {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .pulse-shrink:hover {
            animation-name: pulse-shrink;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* Push */
        @keyframes push {
            50% {
                transform: scale(.8);
            }
            100% {
                transform: scale(1);
            }
        }

        .push {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .push:hover {
            animation-name: push;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        /* Top */
        @keyframes top {
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        .top {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .top:hover {
            animation-name: top;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        /* Rotate */
        .rotate {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);

            transition-property: transform;
            transition-duration: .3s;
        }
        .rotate:hover {
            transform: rotate(5deg);
        }

        /* Grow Rotate */
        .grow-rotate {
            transition-property: transform;
            transition-duration: .3s;
        }
        .grow-rotate:hover {
            transform: rotate(5deg) scale(1.1);
        }

        /* Float */
        .float {
            transition-property: transform;
            transition-duration: .3s;
        }
        .float:hover {
            transform: translateY(-5px);
        }

        /* sink */
        .sink {
            transition-property: transform;
            transition-duration: .3s;
        }
        .sink:hover {
            transform: translateY(5px);
        }

        /* hover */
        @keyframes hover {
            50% {
                transform: translateY(-3px);
            }

            100% {
                transform: translateY(-6px);
            }
        }

        .hover {
            transition-property: transform;
            transition-duration: .5s;
        }
        .hover:hover {
            transform: translateY(-6px);
            animation-name: hover;
            animation-duration: 1.5s;
            animation-delay: .5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* Hang */
        @keyframes hang {
            50% {
                transform: translateY(3px);
            }

            100% {
                transform: translateY(6px);
            }
        }

        .hang