目 录CONTENT

文章目录

bubble图片气泡效果

米尔嘉
2022-10-17 / 0 评论 / 2 点赞 / 512 阅读 / 1,085 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
米尔嘉

canvas动画效果:上升的气泡动画特效

米尔嘉

最近在买了一个WordPress主题swallow,文章顶部的气泡上升效果吸引了我
于是找到一为的开源仓库:Bubble

Bubble气泡效实现

css/style.css

body{
    background: #333;
}
.single-thumbnail-card {
    position: relative;
    max-width: 900px;
    margin: 50px auto;
}
.single-thumbnail {
    border-radius: 10px;
    height: 350px;
    width: 100%;
    overflow: hidden;
    filter: brightness(50%);
    box-shadow: 0 22px 50px -24px rgba(0,0,0,.6);
    background-color: #fff;
}
.single-image {
    height: 350px;
    width: 100%;
    background: rgba(0,0,0,.5);
    background-size: cover;
    background-position: center;
    filter: blur(15px);
    -webkit-filter: blur(15px);
    -ms-filter: blur(15px);
    -moz-filter: blur(15px);
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=15,MakeShadow=false);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.single-thumbnail-overlay {
    position: absolute;
    color: #fff;
    padding-bottom: 20px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}
.single-thumbnail-overlay a{
    margin-bottom: 22px;
    font-weight: 500;
    font-size: 16px;
    color: #aaa;
    text-decoration:none;
    text-transform: uppercase;
}
.button{
    display: block;
    max-width: 300px;
    margin: 50px auto;
    color: #fff;
    text-decoration: none;
    background-color: #f1404b;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0px 7px 15px 0px rgba(187, 48, 57, 0.52);
    transition: .3s;
}
.button:hover{
    background-color: #222;
    box-shadow:none;
}

js/bubble.js

(function() {
	var canvas, ctx, width, height, bubbles, animateHeader = true;
	initHeader();
	function initHeader() {
		canvas = document.getElementById('header_canvas');
		window_resize();
		ctx = canvas.getContext('2d');
		//建立泡泡
		bubbles = [];
		var num = width * 0.04;//气泡数量0.04
		for (var i = 0; i < num; i++) {
			var c = new Bubble();
			bubbles.push(c);
		}
		animate();
	}
	function animate() {
		if (animateHeader) {
			ctx.clearRect(0, 0, width, height);
			for (var i in bubbles) {
				bubbles[i].draw();
			}
		}
		requestAnimationFrame(animate);
	}
	function window_resize() {
		//canvas铺满窗口
		//width = window.innerWidth;
		//height = window.innerHeight;

        //如果需要铺满内容可以换下面这个
        var panel = document.getElementById('thumbnail_canvas');
		width=panel.offsetWidth;
		height=panel.offsetHeight;

		canvas.width = width;
		canvas.height = height;
	}
    window.onresize = function(){
        window_resize();
    }
	function Bubble() {
		var _this = this;
		(function() {
			_this.pos = {};
			init();
		})();
		function init() {
			_this.pos.x = Math.random() * width;
			_this.pos.y = height + Math.random() * 100;
			_this.alpha = 0.1 + Math.random() * 0.3;//气泡透明度
			_this.alpha_change = 0.0002 + Math.random() * 0.0005;//气泡透明度变化速度
			_this.scale = 0.2 + Math.random() * 0.5;//气泡大小
			_this.scale_change = Math.random() * 0.002;//气泡大小变化速度
			_this.speed = 0.1 + Math.random() * 0.4;//气泡上升速度
		}
		//气泡
		this.draw = function() {
			if (_this.alpha <= 0) {
				init();
			}
			_this.pos.y -= _this.speed;
			_this.alpha -= _this.alpha_change;
			_this.scale += _this.scale_change;
			ctx.beginPath();
			ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
			ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
			ctx.fill();
		}; 
	}
})();

index.html

<link rel="stylesheet" href="css/style.css">
<div id="thumbnail_canvas" class="single-thumbnail-card">
	<div class="single-thumbnail">
		<div class="single-image" style="background-image: url(
https://api.minterjia.com/bing/);"></div>
	</div>
	<canvas id="header_canvas" style="position:absolute;bottom:0"></canvas>
	<div class="single-thumbnail-overlay">
		<div class="single-title">
			<a href="https://minterjia.com">米尔嘉</a>
			<p style="margin-top: 0;">canvas动画效果:上升的气泡动画特效</p>
		</div>
	</div>
</div>
<a class="button" href="https://minterjia.com">米尔嘉</a>
<script src="js/bubble.js"></script>

Bubble效果

米尔嘉

canvas动画效果:上升的气泡动画特效

安然

引用模版

<div id="thumbnail_canvas" class="single-thumbnail-card">
	<div class="single-thumbnail">
		<div class="single-image" style="background-image: url(
https://api.minterjia.com/bing/);"></div>
	</div>
	<canvas id="header_canvas" style="position:absolute;bottom:0"></canvas>
	<div class="single-thumbnail-overlay">
		<div class="single-title">
			<a href="https://minterjia.com">米尔嘉</a>
			<p style="margin-top: 0;">canvas动画效果:上升的气泡动画特效</p>
		</div>
	</div>
</div>
<a class="button" href="https://minterjia.com">米尔嘉</a>

<link rel="stylesheet" href="https://cdn.minterjia.com/love/bubble/css/style.css" />    
<script src="https://cdn.minterjia.com/love/bubble/js/bubble.js"></script>
<div id="thumbnail_canvas" class="single-thumbnail-card">
        <div class="single-thumbnail">
            <div class="single-image" style="background-image: url(https://minterjia.com/upload/2022/10/1.webp);"></div>
        </div>
        <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas>
</div>	
    
<link rel="stylesheet" href="https://cdn.minterjia.com/love/bubble/css/style2.css" />    
<script src="https://cdn.minterjia.com/love/bubble/js/bubble2.js"></script>

<style>
  
  .single-thumbnail-card {
    position: relative;
    max-width:1600px;
    margin: 50px auto;
}
</style>

预览地址

2

评论区