SVG 气泡

下载代码

html

css

分享到微信朋友圈

html

</div>

css

@import "https://fonts.googleapis.com/css?family=Mouse+Memoirs";
HTML, BODY {
  height: 100%;
}

BODY {
  background-color: lightyellow;
  background: radial-gradient(lightyellow, gold, teal, indigo);
}

.hidden {
  display: none;
}

.marked {
  outline: 2px solid red;
  stroke: red;
  stroke-width: 2;
}

.svg {
  position: absolute;
  width: 250px;
  height: 250px;
  overflow: visible;
  mix-blend-mode: multiply;
}

.svg--defs {
  width: 0;
  height: 0;
}

.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  isolation: isolate;
}

.demo__title {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  font-family: 'Mouse Memoirs', sans-serif;
  font-size: 4.9rem;
  color: #FFF;
  cursor: pointer;
}

.demo-title__splash {
  position: absolute;
  top: -75px;
  left: -40px;
  opacity: 0;
  pointer-events: none;
}

.demo__tip {
  display: block;
  font-size: 1rem;
  font-family: Trebuchet MS;
}

.bubble {
  cursor: pointer;
}

.bubble__splash {
  opacity: 0;
  pointer-events: none;
}

JavaScript

'use strict';

console.clear();
var maxBubbles = 25; //25
var container = document.querySelector('.demo');
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;
var content = document.querySelector('.demo__content');
var title = document.querySelector('.demo__title');
title.content = document.querySelector('.demo-title__content');
title.splash = document.querySelector('.demo-title__splash');

var shape = document.querySelector('.bubble');
var shapeWidth = shape.clientWidth;
var shapeHeight = shape.clientHeight;

var bubbles = [];

var minX = 0;
var minY = 0;

var baseShapeSize = 200;
var minShapeSize = 50;

var time = 7;
var minTime = 4;

var posibleSides = ['top', 'right', 'bottom', 'left'];

//------------------------------

//------------------------------

Bubble.prototype.collapse = function () {
    var that = this;
    
    function resetBubble() {
        var tl = new TimelineLite();
        that.setSize();
        that.setPos();

tl.to( that.content, .3, {
            'scale': 1,
            'opacity': 1,
            'delay': 2,
            'onComplete': function() { 
                that.isCollapsed = false; 
                }
        } );
    }
    
    var tl = new TimelineLite();
    tl.set( this.content, {
            'scale': 0,
            'transform-origin': '100px 100px',
            'opacity': 0
        } );
    tl.set( this.splash, {
        'scale': .5,
        'transform-origin': '100px 100px',
        'opacity': 1,
    } );
    tl.to( this.splash, .15, {
        'scale': 1.5,
        'opacity': 0,
        'ease': Power1.easeOut,
        'onComplete': resetBubble
    } );
}

//------------------------------

Bubble.prototype.setPos = function () {
    var target = this.getSide();
    this.bubble.style.transform = 'translate3d(' + target.coords.x +'px, ' + target.coords.y + 'px, 0)';
}

//------------------------------

Bubble.prototype.setSize = function () {
    this.shapeSize = Math.round( Math.random() * (baseShapeSize - minShapeSize) ) + minShapeSize;
    this.bubble.style.width = this.shapeSize + 'px';   
    this.bubble.style.height = this.shapeSize + 'px';   
    
    this.maxX = containerWidth - this.shapeSize;
    this.maxY = containerHeight - this.shapeSize;
}

//------------------------------

Bubble.prototype.addAnimation = function () {
    
    var minX = 0;
    var newTime = Math.random() * time + minTime;
    var elem = this.bubble;
    var delay = Math.random() * time;
    var tl = new TimelineLite();
    var that = this;
    
    animate();
    
    function animate () {
        var target = that.getSide( that.side );
        that.side = target.side;
        var propSet = { x: target.coords.x,
                        y: target.coords.y,
                        ease: SlowMo.easeInOut,
                        delay: delay,
                        onComplete: animate
                    };        
        tl.to( elem, newTime, propSet);
        
        if ( delay ) {
            delay = 0;
        }
    }   
}

//------------------------------

Bubble.prototype.getSide = function () {
    var targetParams = {
        side: '',
        coords: {}
    };
    var maxRandX = Math.round( Math.random() * this.maxX );
    var maxRandY = Math.round( Math.random() * this.maxY );
    
    var sides = {'top': 
                    { x: maxRandX, 
                      y: minY },
                 'right': 
                    { x: this.maxX, 
                      y: maxRandY },
                 'bottom': 
                    { x: maxRandX, 
                      y: this.maxY },
                 'left': { 
                     x: minX, 
                     y: maxRandY }
                };
        
    delete sides[ this.side ];
    var keys = Object.keys( sides );    
    var randPos = Math.floor( Math.random() * keys.length );
    var newSide = keys[ randPos ];    
    
    targetParams.side = newSide;
    targetParams.coords = sides[ newSide ];
    
    return targetParams;
    
}

//------------------------------

function addBubble () {
    var bubble = new Bubble( i );
    bubbles.push( bubble );
}

//------------------------------

for ( var i = 0; i < maxBubbles; i ++ ) {
    addBubble();
}

//------------------------------

window.onresize = function () {
    containerWidth = container.clientWidth;
    containerHeight = container.clientHeight;
    
    bubbles.forEach( function ( item ) {
        item.maxX = containerWidth - item.shapeSize;
        item.maxY = containerHeight - item.shapeSize;
        // item.addAnimation();
    });
}

//------------------------------

title.onclick = function () {
    var that = this;
    
    function resetElem() {
        var tl = new TimelineLite();
        
        tl.to( that.content, .3, {
            'scale': 1,
            'opacity': 1,
            'onComplete': function() { 
                that.isCollapsed = false; 
                }
        } );
    }
    
    var tl = new TimelineLite();
    tl.set( this.content, {
            'scale': 0,
            'opacity': 0
        } );
    tl.set( this.splash, {
        'scale': .5,
        'opacity': 1,
    } );
    tl.to( this.splash, .15, {
        'scale': 1.5,
        'opacity': 0,
        'ease': Power1.easeOut,
        'onComplete': resetElem
    } );
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg