丧心病狂的动画效果

最新推荐文章于 2021-05-25 23:20:28 发布
最新推荐文章于 2021-05-25 23:20:28 发布
阅读量335 收藏
点赞数 1
分类专栏： html5+css3 动画效果 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
            }
            body {
                background: #464646;
                margin: 0;
                padding: 20px;
                overflow: hidden;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -o-user-select: none;
                user-select: none;
            }
            label {
                cursor: pointer;
            }
            #counter {
                position: absolute;
                top: 50%;
                left: 50%;
                color: #fff;
                font-size: 1.3em;
                text-align: center;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                cursor: default;
            }
            #counter span {
                display: inline-block;
                width: 2em;
                text-align: left;
                color: #f60;
            }
            #max-count span {
                color: #ff0;
            }
            #setting {
                color: #fff;
            }
            .ripple-inner, .ripple-outer {
                position: absolute;
                width: 50px;
                height: 50px;
                border: 1px solid #87ceeb;
                border-radius: 50%;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
                -webkit-animation: ripple 2s ease-out;
                animation: ripple 2s ease-out;
                z-index: -1;
            }
            .ripple-inner {
                -webkit-animation-delay: .3s;
                animation-delay: .3s;
            }
            @-webkit-keyframes ripple {
                to {
                    -webkit-transform: scale(3);
                    transform: scale(3);
                    opacity: 0;
                }
            }
            @keyframes ripple {
                to {
                    -webkit-transform: scale(3);
                    transform: scale(3);
                    opacity: 0;
                }
            }
        </style>
        <script src="../web/js/jquery-1.8.3.min.js"></script>
    </head>

    <body>

        <div id="setting">
        Setting:
        <input type="checkbox" id="click" checked>
        <label for="click">Click</label>
        <input type="checkbox" id="mousemove">
        <label for="mousemove">Mousemove</label>
        <input type="checkbox" id="random">
        <label for="random">Random Color</label>
        <input type="checkbox" id="auto">
        <label for="auto">Auto</label>
    </div>
    <div id="counter">
        <h1 id="current-count">
            Current Ripples:
            <span>0</span>
        </h1>
        <h1 id="max-count">
            Max Ripples:
            <span>0</span>
        </h1>
    </div>



        <script>
(function ($) {
    var count = 0;
    var max = 0;
    var curCounter = $('#current-count span');
    var maxCounter = $('#max-count span');
    var container = $('body');
    var width = container.width();
    var height = container.height();
    var setting = {
        auto: false,
        click: true,
        mousemove: false,
        random: false
    };

    var createRipple = function (e) {
        var x = e.pageX || e.left;
        var y = e.pageY || e.top;
        var ripple = $('<div class="ripple-outer"></div><div class="ripple-inner"></div>');
        if (setting.random) {
            ripple.appendTo(container).css({
                left: x - 25,
                top: y - 25,
                borderColor: randomColor({
                    luminosity: 'light'
                })
            });
        } else {
            ripple.appendTo(container).css({
                left: x - 25,
                top: y - 25
            })
        }
        curCounter.text(++count);
        if (count > max) {
            maxCounter.text(max = count);
        }
        setTimeout(function () {
            ripple.remove();
            curCounter.text(--count);
        }, 2300);
    };

    var autoPlay = function () {
        if (setting.auto) {
            createRipple({
                left: Math.random() * width,
                top: Math.random() * height
            })
        }
        requestAnimationFrame(autoPlay);
    }
    autoPlay();

    $(document).on('change', 'input', function () {
        setting[this.id] = this.checked;
    });
    $(window).resize(function () {
        width = container.width();
        height = container.height();
    });

    container.click(function (e) {
        if (!setting.click) return;
        createRipple(e, this);
    }).mousemove(function (e) {
        if (!setting.mousemove) return;
        createRipple(e, this);
    });

})(jQuery);
        </script>
        <script>
    ;(function (root, factory) {

    // Support AMD
    if (typeof define === 'function' && define.amd) {
        define([], factory);

        // Support CommonJS
    } else if (typeof exports === 'object') {
        var randomColor = factory();

        // Support NodeJS & Component, which allow module.exports to be a function
        if (typeof module === 'object' && module && module.exports) {
            exports = module.exports = randomColor;
        }

        // Support CommonJS 1.1.1 spec
        exports.randomColor = randomColor;

        // Support vanilla script loading
    } else {
        root.randomColor = factory();
    };

}(this, function () {

    // Shared color dictionary
    var colorDictionary = {};

    // Populate the color dictionary
    loadColorBounds();

    var randomColor = function (options) {
        options = options || {};

        var H, S, B;

        // Check if we need to generate multiple colors
        if (options.count != null) {

            var totalColors = options.count,
                colors = [];

            options.count = null;

            while (totalColors > colors.length) {
                colors.push(randomColor(options));
            }

            options.count = totalColors;

            return colors;
        }

        // First we pick a hue (H)
        H = pickHue(options);

        // Then use H to determine saturation (S)
        S = pickSaturation(H, options);

        // Then use S and H to determine brightness (B).
        B = pickBrightness(H, S, options);

        // Then we return the HSB color in the desired format
        return setFormat([H, S, B], options);
    };

    function pickHue(options) {

        var hueRange = getHueRange(options.hue),
            hue = randomWithin(hueRange);

        // Instead of storing red as two seperate ranges,
        // we group them, using negative numbers
        if (hue < 0) {
            hue = 360 + hue
        }

        return hue;

    }

    function pickSaturation(hue, options) {

        if (options.luminosity === 'random') {
            return randomWithin([0, 100]);
        }

        if (options.hue === 'monochrome') {
            return 0;
        }

        var saturationRange = getSaturationRange(hue);

        var sMin = saturationRange[0],
            sMax = saturationRange[1];

        switch (options.luminosity) {

        case 'bright':
            sMin = 55;
            break;

        case 'dark':
            sMin = sMax - 10;
            break;

        case 'light':
            sMax = 55;
            break;
        }

        return randomWithin([sMin, sMax]);

    }

    function pickBrightness(H, S, options) {

        var brightness,
            bMin = getMinimumBrightness(H, S),
            bMax = 100;

        switch (options.luminosity) {

        case 'dark':
            bMax = bMin + 20;
            break;

        case 'light':
            bMin = (bMax + bMin) / 2;
            break;

        case 'random':
            bMin = 0;
            bMax = 100;
            break;
        }

        return randomWithin([bMin, bMax]);

    }

    function setFormat(hsv, options) {

        switch (options.format) {

        case 'hsvArray':
            return hsv;

        case 'hsv':
            return colorString('hsv', hsv);

        case 'rgbArray':
            return HSVtoRGB(hsv);

        case 'rgb':
            return colorString('rgb', HSVtoRGB(hsv));

        default:
            return HSVtoHex(hsv);
        }

    }

    function getMinimumBrightness(H, S) {

        var lowerBounds = getColorInfo(H).lowerBounds;

        for (var i = 0; i < lowerBounds.length - 1; i++) {

            var s1 = lowerBounds[i][0],
                v1 = lowerBounds[i][1];

            var s2 = lowerBounds[i + 1][0],
                v2 = lowerBounds[i + 1][1];

            if (S >= s1 && S <= s2) {

                var m = (v2 - v1) / (s2 - s1),
                    b = v1 - m * s1;

                return m * S + b;
            }

        }

        return 0;
    }

    function getHueRange(colorInput) {

        if (typeof parseInt(colorInput) === 'number') {

            var number = parseInt(colorInput);

            if (number < 360 && number > 0) {
                return [number, number];
            }

        }

        if (typeof colorInput === 'string') {

            if (colorDictionary[colorInput]) {
                var color = colorDictionary[colorInput];
                if (color.hueRange) {
                    return color.hueRange
                }
            }
        }

        return [0, 360];

    }

    function getSaturationRange(hue) {
        return getColorInfo(hue).saturationRange;
    }

    function getColorInfo(hue) {

        // Maps red colors to make picking hue easier
        if (hue >= 334 && hue <= 360) {
            hue -= 360;
        }

        for (var colorName in colorDictionary) {
            var color = colorDictionary[colorName];
            if (color.hueRange &&
                hue >= color.hueRange[0] &&
                hue <= color.hueRange[1]) {
                return colorDictionary[colorName];
            }
        }
        return 'Color not found';
    }

    function randomWithin(range) {
        return Math.floor(range[0] + Math.random() * (range[1] + 1 - range[0]));
    }

    function shiftHue(h, degrees) {
        return (h + degrees) % 360;
    }

    function HSVtoHex(hsv) {

        var rgb = HSVtoRGB(hsv);

        function componentToHex(c) {
            var hex = c.toString(16);
            return hex.length == 1 ? "0" + hex : hex;
        }

        var hex = "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);

        return hex;

    }

    function defineColor(name, hueRange, lowerBounds) {

        var sMin = lowerBounds[0][0],
            sMax = lowerBounds[lowerBounds.length - 1][0],

            bMin = lowerBounds[lowerBounds.length - 1][1],
            bMax = lowerBounds[0][1];

        colorDictionary[name] = {
            hueRange: hueRange,
            lowerBounds: lowerBounds,
            saturationRange: [sMin, sMax],
            brightnessRange: [bMin, bMax]
        };

    }

    function loadColorBounds() {

        defineColor(
            'monochrome',
            null, [[0, 0], [100, 0]]);

        defineColor(
            'red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100,
                    50]]);

        defineColor(
            'orange', [19, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);

        defineColor(
            'yellow', [47, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);

        defineColor(
            'green', [63, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);

        defineColor(
            'blue', [179, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100,
                    35]]);

        defineColor(
            'purple', [258, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [
                    100, 42]]);

        defineColor(
            'pink', [283, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);

    }

    function HSVtoRGB(hsv) {

        // this doesn't work for the values of 0 and 360
        // here's the hacky fix
        var h = hsv[0];
        if (h === 0) {
            h = 1
        }
        if (h === 360) {
            h = 359
        }

        // Rebase the h,s,v values
        h = h / 360;
        var s = hsv[1] / 100,
            v = hsv[2] / 100;

        var h_i = Math.floor(h * 6),
            f = h * 6 - h_i,
            p = v * (1 - s),
            q = v * (1 - f * s),
            t = v * (1 - (1 - f) * s),
            r = 256,
            g = 256,
            b = 256;

        switch (h_i) {
        case 0:
            r = v, g = t, b = p;
            break;
        case 1:
            r = q, g = v, b = p;
            break;
        case 2:
            r = p, g = v, b = t;
            break;
        case 3:
            r = p, g = q, b = v;
            break;
        case 4:
            r = t, g = p, b = v;
            break;
        case 5:
            r = v, g = p, b = q;
            break;
        }
        var result = [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
        return result;
    }

    function colorString(prefix, values) {
        return prefix + '(' + values.join(', ') + ')';
    }

    return randomColor;
}));
        </script>
    </body>
</html>
金翅
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
切图+动画实现图形转换
qq_45287715的博客
06-01 181
实现效果 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
史上最扯Java图形绘制（J2SE）之一JAVA动画效果
qq_44934536的博客
04-23 392
史上最扯Java图形绘制（J2SE）之一JAVA动画效果
Unity3D_切图以及序列帧动画
10-28
在Cocos2dx中，对大图的处理已经封装好了一套自己的API，但是在Unity3D中貌似没有类似的API，或者说我没找到。不过这也在情理之中，毕竟Unity3D是做3D的，要切割图片的地方还是很少的。 因为我用Unity3D主要是用于做2D游戏的（PS：很蛋疼吧？我也觉得），所以就不得不考虑切图和播放序列帧这两个在2D上常见的功能了，下面废话不多说。我的任务是把下面这张图切割成16块，并且按照动画的序列播放出来。
切图并动画化
077CYW的博客
07-24 311
切图工具：http://renderhjs.net/shoebox/ 安装完成后，将图片拖拽到此处，save 切割完成 动画化看教程：https://docs.cocos.com/creator/manual/zh/video-tutorial/index.html sample设置为12 第一个动画完成。其他动画类似。 ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
mmdev
10-24 153
示意图就不展示了，和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉，在这里我简单说明一下用自定义ViewGroup来实现. 实现方法：我们自定义一个ViewGroup实现左右滑动，第一屏隐藏，第二屏显示. 代码如下： package com.jj.sliding_6; import android.content.Context; import androi...
android波浪动画简书,android 实现水波纹效果(二) 优化篇
weixin_42395002的博客
05-25 301
在我的上一篇文章中,初步介绍了一下水波纹的实现,确实也实现了,刚开始我表示很满意啊,但是后来看了一下系统的实现效果,我开始发现有点不对劲;来对比一下:这是优化前的效果这是上篇中我自己实现的效果,看起来好像也没什么不对,但是再看一下系统实现的效果:这是优化后的效果这是优化后的效果,仔细看区别看不出来?仔细看一下,系统的实现效果是不管点击到哪里,两侧的阴影效果都会同时到达顶点,但是上一篇中实现的效果则...
Android 自定义 ViewPager 打造千变万化的图片切换效果
分享美好的专栏
09-01 3422
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/38026503  记得第一次见到ViewPager这个控件，瞬间爱不释手，做东西的主界面通通ViewPager，以及图片切换也抛弃了ImageSwitch之类的，开始让ViewPager来做。时间长了，ViewPager的切换效果觉得枯燥，形成了审美疲劳~~我们需要改变，今天
优化 Linux/Gnome桌面环境的 窗口动画效果
黎明曙光
08-03 5572
在ubuntu  中文社区看到 关闭 Gnome窗口动画效果的帖子， 从中找到:How to disable/change Gnome2-6.0/Metacity window minimizing animation?On Sat, 2004-05-01 at 20:04, supraexpress at globaleyes.net wrote:> How can the Gno
Python 一行代码能实现丧心病狂的功能
12-23
标题中的"Python 一行代码能实现丧心病狂的功能"表达了Python编程语言的高效和简洁性，这在处理大量数据和复杂任务时尤其明显。在描述中，作者通过读取109张头部CT扫描图片并将其转换为四维numpy数组来展示了Python...
丧心病狂：用300行的python写个小游戏
09-19
标题中的“丧心病狂：用300行的python写个小游戏”表明这是一个使用Python编程语言编写的小型游戏项目，挑战者通过300行的代码实现了游戏功能。这通常是一个初学者或爱好者为了练习编程技能而进行的挑战，因为这样的...
Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)
01-05
这样丧心病狂的设计，后台也不好给数据吧。 先看看效果: 两级的效果: 三级的效果: 全部展开的效果(我只写了五级) 说说为什么写这货吧: 公司产品提出三级这个需求后,我就在网上找啊找. 找的第一个,发现实现其实...
B站会员答题题目汇总版本详解.doc
10-06
- 丧心病狂的xx月亮连续杀人事件是虚构的，可能出自某部动漫或小说，作者可能是虚渊玄，他是著名的编剧和小说家。 - 美版《恐龙战队》的绿衣队员叫“汤米”，这是美国改编自日本《超人力霸王》系列的特摄剧。 - ...
spine基础以及骨骼动画的使用（1）
shenmirenLcy的博客
11-13 5153
最近在研究骨骼动画，我想把我现阶段掌握的spine以及导入到cocos2dx中使用的方法分享一下，希望可以对大家有所帮助。         Spine软件现在网络上也有免费的破解版本，对于你自己用来练习是足够了。         我安装的是1.7.03版本。安装破解的教程网络上都是有的，所以我也不展开讲解了。安装破解完软件以后，你会发现他的软件里面有一些自带的图片切图和一些工程文件。如果没有的
基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）
08-06
基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业） 基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明（大作业）基于Python+OpenCV实现双目立体视觉的图像匹配与测距代码+文档说明。
专卖店销售数据统计表（销售管理分析）.xls
最新发布
08-06
销售管理表，财务报表，占比分析，消费能力分析，数据分析表，产品销售，客户关系 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
框架：战略思考、澄清与解码落地规划.pptx
08-06
框架：战略思考、澄清与解码落地规划.pptx
2021年最新易支付修复版源码/支持微信支付宝官方接口和码支付网信钱包等/个人也能用的易支付商户系统
08-06
安装环境介绍:Linux + Nginx1.1x +PHP7.2 +MySql5.6 集合了微信官方+支付宝官方+易商户+码支付+易通商户+网信钱包免签即时到账接口,让个人用户也能用上好用的易支付商户系统,系统自带10套基础模板。 修复短信注册,替换成阿里云短信 后台更改为上传Logo和Logo链接 后台登录密码不明文 清除平台统计数据 删除不必要功能,优化性能体验前台新增无需验证注册方式 删除不必要功能,优化性能体验 修复前台不能上传收款二维码功能 修复后台无法保存码支付ID和KEY到数据库
"逻辑回归：线性关系拟合效果好且计算快
当我们的数据呈现出明显的线性关系时，逻辑回归表现出了丧心病狂的拟合效果，能够更准确地刻画数据之间的特征关系。这使得逻辑回归成为了在金融领域等特征与标签之间线性关系较强的问题中的首选算法之一。 除了对...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值