HTML5卡通植物之火焰花（太阳花）

鼠标敏感的卡通卡片，鼠标移动时花朵会随着改变方向。

h5, css3, flower

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3895
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

(function() {

/**
     * Init
     */

var root = document.querySelector('.fire-flower');
    var box = root.querySelector('.fire-flower__wrapper');
    var head = box.querySelector('.fire-flower__head');

var MAXDEGS = {
        x: 36 / 260,
        // y: (11.25) / 260
        y: 18 / 260
    };

/**
     * Event bindings and methods
     */

root.addEventListener('click', onMouseMove);
    root.addEventListener('mousemove', onMouseMove);
    root.addEventListener('mouseleave', onMouseLeave);

function onMouseLeave(event) {
        head.style.transform = 'rotate(0)';
    }

function onMouseMove(event) {
        event = event || window.event; // IE-ism

mousePos = calculateMousePosition(event);

rotate = calculateRotation();
        var transform = 'rotateX(' + rotate.x * -1 + 'deg)';
        transform += 'rotateY(' + rotate.y + 'deg)';
        transform += 'rotateZ(' + rotate.y / -8 + 'deg)';

head.style.transform = transform;
    }

/**
     * General methods
     */

function calculateRotation() {
        var x = (mousePos.y - center.y) * MAXDEGS.y;
        var y = (mousePos.x - center.x) * MAXDEGS.x;
        console.log('calcRot', center.x, mousePos.x, mousePos.x - center.x, x);

return {
            x: x,
            y: y * 1 * 0.40
        };
    }

function calculateMousePosition(event) {
        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            var eventDoc = event.target && event.target.ownerDocument || document;
            var doc = eventDoc.documentElement;
            var body = eventDoc.body;

event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
        }

return {
            x: event.pageX,
            y: event.pageY
        };
    }
})();

编译

CSS

body {
    overflow: hidden;
    margin: 0;
}
svg {
    height: 90vw;
    position: absolute;
    width: 60vw;
}
path {
    fill: transparent;
    stroke: #2196f3;
}
.fire-flower {
    background-color: #323333;
    height: 100vh;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
}
.fire-flower__wrapper {
    height: 45.14706vw;
    position: relative;
    width: 42vw;
}
.fire-flower__body,
.fire-flower__head {
    position: absolute;
    top: 0;
    left: 0;
}
.fire-flower__body {
    height: 26.7vw;
    top: 18.44706vw;
    width: 42vw;
}
.fire-flower__head {
    height: 27.67059vw;
    position: relative;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 200ms linear;
    transition: -webkit-transform 200ms linear;
    transition: transform 200ms linear;
    transition: transform 200ms linear, -webkit-transform 200ms linear;
    width: 42vw;
}
.fire-flower__head > div,
.fire-flower__head svg {
    height: 100%;
    position: absolute;
    width: 100%;
}
.fire-flower__head .head__eyes {
    -webkit-transform: translateZ(5vw);
    transform: translateZ(5vw);
}
.fire-flower__head .head__face {
    -webkit-transform: translateZ(0vw);
    transform: translateZ(0vw);
}
.fire-flower__head .head__skull {
    -webkit-transform: translateZ(-5vw);
    transform: translateZ(-5vw);
}
.fire-flower__eye {
    fill: #323333;
    stroke: transparent;
}
.fire-flower__eye-glint {
    fill: #fcffff;
    stroke: transparent;
}
.fire-flower__pedal {
    fill: #8bc34a;
    stroke: transparent;
}
.fire-flower__burn,
.fire-flower__ring {
    fill-rule: evenodd;
    stroke-width: 0;
}
.fire-flower__burn {
    fill-opacity: 0.6;
    fill-rule: evenodd;
    stroke-width: 0;
}
.fire-flower__burn--green {
    fill: #5a911a;
}
.fire-flower__burn--red {
    fill: #c51104;
}
.fire-flower__burn--yellow {
    fill: #d1ba01;
}
.fire-flower__dodge {
    fill: #fcffff;
    fill-opacity: 0.4;
    fill-rule: evenodd;
    stroke-width: 0;
}
.fire-flower__ring--red {
    fill: #f44336;
}
.fire-flower__ring--yellow {
    fill: #ffeb3b;
}
.fire-flower__ring--white {
    fill: #fcffff;
}
.fire-flower__stem {
    fill: #8bc34a;
    stroke: transparent;
}
.fire-flower__stem-highlight {
    fill: #fcffff;
    fill-opacity: 0.4;
    stroke: transparent;
}
.grid {
    height: 45.14706vw;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 84vw;
}
.grid-line {
    stroke-width: 0.5;
}
.grid-line--horizontal {
    stroke: rgba(252, 255, 255, 0.1);
}
.grid-line--vertical {
    stroke: rgba(252, 255, 255, 0.2);
}

HTML

鼠标敏感的卡通卡片，鼠标移动时花朵会随着改变方向。

h5, css3, flower

编辑器支持Emmet

快捷键

鼠标敏感的卡通卡片，鼠标移动时花朵会随着改变方向。

h5, css3, flower

HTML5带音效的问题箱子（随机物品盒子）

HTML5 SVG太阳花跳舞动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：