wp 优化 / 网站建设

鼠标点击显示圆圈动画

言七墨 · 11月28日 · 2019年 · 677次已读

今天,给大家介绍一款 wordpress 鼠标点击特效,当鼠标单击网页任何地方时,都会出现一个犹如水波放大的彩色圆圈动画。这个特效,点击的时候不仅会让访客感觉很有手感,而且也会让访客感觉你的网站很有特色。话不多说,直接上代码。

效果:

教程:

  • 添加显示代码:

将以下代码添加到 footer.php 的 </body> 上面:

<script src="https://cdn.qimok.cn/1.js"></script>
<script src="https://cdn.qimok.cn/2.js"></script>
    <script>
    'use strict';
    var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }
    window.CP.exitedLoop(1);
     }
    window.CP.exitedLoop(2);
     return target; };
    var OPTS = {
        fill: 'none',
        radius: 25,
        strokeWidth: { 50: 0 },
        scale: { 0: 1 },
        angle: { 'rand(-35, -70)': 0 },
        duration: 500,
        left: 0,
        top: 0,
        easing: 'cubic.out'
    };
    var circle1 = new mojs.Shape(_extends({}, OPTS, {
        stroke: '#FF8966'
    }));
    var circle2 = new mojs.Shape(_extends({}, OPTS, {
        radius: { 0: 15 },
        strokeWidth: { 30: 0 },
        stroke: '#E5446D',
        delay: 'rand(75, 150)'
    }));
    document.addEventListener('click', function (e) {
        circle1.tune({ x: e.pageX, y: e.pageY }).replay();
        circle2.tune({ x: e.pageX, y: e.pageY }).replay();
    });
    </script>
  • 添加样式代码:

将以下代码放到 style.css 中即可:

.message {
        position: fixed;
        width: 80%;
        text-align: center;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
        font-size: 1.2rem;
        font-family: 'Baloo Bhaina', cursive;
        color: #706C61;
    }
0 条回应