标签：star 博客 height width 测试 velocity Math left
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.peo{
height: 500px;
width: 160px;
position: absolute;
bottom: 0;
left: 50px;
}
.head{
position: ;
width: 260px;
height: 260px;
background-color: yellow;
position: absolute;
left: -50px;
border-radius: 50%;
box-shadow: 0 0 10px rgb(0,0,0,.5);
}
.boy{
height: 240px;
background: linear-gradient(rgb(138, 43, 226),transparent);
border-top-left-radius: 35%;
border-top-right-radius: 35%;
box-shadow: 0 0 10px rgb(0,0,0,.8);
}
.yob{
height: 260px;
}
.eye{
position: absolute;
height: 100px;
width: 100px;
background-color: white;
border-radius: 50%;
top: 20%;
left: 20px;
}
.eye:nth-of-type(2){
left: 140px;
}
.rad{
height: 15px;
width: 15px;
background-color: #000;
border-radius: 50%;
top: 45px;
left: 45px;
position: absolute;
}
.mou{
position: absolute;
width: 80px;
height: 35px;
background-color: orangered;
top: 70%;
left:70px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
overflow: hidden;
}
.mou_rad{
height: 20px;
width: 15px;
background-color: white;
position: absolute;
left: 50%;
border-bottom-left-radius: 7.5px;
border-bottom-right-radius: 7.5px;
}
body {
width: 100%;
height: 100vh;
background-color: #000;
background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13), transparent),
radial-gradient(circle at 20% 80%, rgba(41, 196, 255, 0.13), transparent);overflow: hidden
}
canvas {
position: fixed;
width: 100%;
height: 100%;
}
a {
position: absolute;
bottom: 2vmin;
right: 2vmin;
color: rgba(255,255,255,0.2);
text-decoration: none;
}
a:hover {
color: #fff;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var rado = $(".rad:eq(0)");
var radt = $(".rad:eq(1)");
var a1 = $(".eye:eq(0)").offset().left + $(".eye:eq(0)").innerWidth()/2;
var b1 = $(".eye:eq(0)").offset().top + $(".eye:eq(0)").innerHeight()/2;
var a2 = $(".eye:eq(1)").offset().left + $(".eye:eq(1)").innerWidth()/2;
var b2 = $(".eye:eq(0)").offset().top + $(".eye:eq(0)").innerHeight()/2;;
var k1,k2;
$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
var r1 = 40 < Math.sqrt((x-a1)*(x-a1)+(y-b1)*(y-b1))? 40:Math.sqrt((x-a1)*(x-a1)+(y-b1)*(y-b1));
var r2 = 40 < Math.sqrt((x-a2)*(x-a2)+(y-b2)*(y-b2))? 40:Math.sqrt((x-a2)*(x-a2)+(y-b2)*(y-b2));
k1 = Math.atan2(x-a1,y-b1);
k2 = Math.atan2(x-a2,y-b2);
rado[0].style.left = r1*Math.sin(k1)+45+"px";
rado[0].style.top = r1*Math.cos(k1)+45+"px";
radt[0].style.left = r2*Math.sin(k2)+45+"px";
radt[0].style.top = r2*Math.cos(k2)+45+"px";
})
$(".head").hover(function(){
$(".mou").css("overflow","visible");
$(".mou").stop().animate({
height:"5px",
width:"120px"
});
$(".mou_rad").stop().animate({
left:'65%',
borderBottomRightRadius:'20px',
borderBottomLeftRadius:'20px',
});
},function(){
$(".mou").stop().animate({
width:"80px",
height:"35px"
});
$(".mou_rad").stop().animate({
height: '20px',
width: '15px',
left: '50%'
});
})
})
</script>
</head>
<body>
<div class="peo">
<div class="head">
<div class="eye">
<div class="rad"></div>
</div>
<div class="eye">
<div class="rad"></div>
</div>
<div class="mou">
<div class="mou_rad"></div>
</div>
</div>
<div class="yob"></div>
<div class="boy"></div>
</div>
<canvas width="1300px" height="800px" ></canvas>
<script>
const STAR_COUNT = ( window.innerWidth + window.innerHeight ) / 8,
STAR_SIZE = 3,
STAR_MIN_SCALE = 0.2,
OVERFLOW_THRESHOLD = 50;
const canvas = document.querySelector( 'canvas' ),
context = canvas.getContext( '2d' );
let scale = 1,
width,
height;
let stars = [];
let pointerX,
pointerY;
let velocity = { x: 0, y: 0, tx: 0, ty: 0, z: 0.0005 };
let touchInput = false;
generate();
resize();
step();
window.onresize = resize;
canvas.onmousemove = onm ouseMove;
canvas.ontouchmove = onTouchMove;
canvas.ontouchend = onm ouseLeave;
document.onmouseleave = onm ouseLeave;
function generate() {
for( let i = 0; i < STAR_COUNT; i++ ) {
stars.push({
x: 0,
y: 0,
z: STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE )
});
}
}
function placeStar( star ) {
star.x = Math.random() * width;
star.y = Math.random() * height;
}
function recycleStar( star ) {
let direction = 'z';
let vx = Math.abs( velocity.x ),
vy = Math.abs( velocity.y );
if( vx > 1 || vy > 1 ) {
let axis;
if( vx > vy ) {
axis = Math.random() < vx / ( vx + vy ) ? 'h' : 'v';
}
else {
axis = Math.random() < vy / ( vx + vy ) ? 'v' : 'h';
}
if( axis === 'h' ) {
direction = velocity.x > 0 ? 'l' : 'r';
}
else {
direction = velocity.y > 0 ? 't' : 'b';
}
}
star.z = STAR_MIN_SCALE + Math.random() * ( 1 - STAR_MIN_SCALE );
if( direction === 'z' ) {
star.z = 0.1;
star.x = Math.random() * width;
star.y = Math.random() * height;
}
else if( direction === 'l' ) {
star.x = -OVERFLOW_THRESHOLD;
star.y = height * Math.random();
}
else if( direction === 'r' ) {
star.x = width + OVERFLOW_THRESHOLD;
star.y = height * Math.random();
}
else if( direction === 't' ) {
star.x = width * Math.random();
star.y = -OVERFLOW_THRESHOLD;
}
else if( direction === 'b' ) {
star.x = width * Math.random();
star.y = height + OVERFLOW_THRESHOLD;
}
}
function resize() {
scale = window.devicePixelRatio || 1;
width = window.innerWidth * scale;
height = window.innerHeight * scale;
canvas.width = width;
canvas.height = height;
stars.forEach( placeStar );
}
function step() {
context.clearRect( 0, 0, width, height );
update();
render();
requestAnimationFrame( step );
}
function update() {
velocity.tx *= 0.96;
velocity.ty *= 0.96;
velocity.x += ( velocity.tx - velocity.x ) * 0.8;
velocity.y += ( velocity.ty - velocity.y ) * 0.8;
stars.forEach( ( star ) => {
star.x += velocity.x * star.z;
star.y += velocity.y * star.z;
star.x += ( star.x - width/2 ) * velocity.z * star.z;
star.y += ( star.y - height/2 ) * velocity.z * star.z;
star.z += velocity.z;
// recycle when out of bounds
if( star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD ) {
recycleStar( star );
}
} );
}
function render() {
stars.forEach( ( star ) => {
context.beginPath();
context.lineCap = 'round';
context.lineWidth = STAR_SIZE * star.z * scale;
context.strokeStyle = 'rgba(255,255,255,'+(0.5 + 0.5*Math.random())+')';
context.beginPath();
context.moveTo( star.x, star.y );
var tailX = velocity.x * 2,
tailY = velocity.y * 2;
// stroke() wont work on an invisible line
if( Math.abs( tailX ) < 0.1 ) tailX = 0.5;
if( Math.abs( tailY ) < 0.1 ) tailY = 0.5;
context.lineTo( star.x + tailX, star.y + tailY );
context.stroke();
} );
}
function movePointer( x, y ) {
if( typeof pointerX === 'number' && typeof pointerY === 'number' ) {
let ox = x - pointerX,
oy = y - pointerY;
velocity.tx = velocity.tx + ( ox / 8*scale ) * ( touchInput ? 1 : -1 );
velocity.ty = velocity.ty + ( oy / 8*scale ) * ( touchInput ? 1 : -1 );
}
pointerX = x;
pointerY = y;
}
function onm ouseMove( event ) {
touchInput = false;
movePointer( event.clientX, event.clientY );
}
function onTouchMove( event ) {
touchInput = true;
movePointer( event.touches[0].clientX, event.touches[0].clientY, true );
event.preventDefault();
}
function onm ouseLeave() {
pointerX = null;
pointerY = null;
}
</script>
</body>
</html>标签：star,博客,height,width,测试,velocity,Math,left 来源： https://www.cnblogs.com/c21w/p/12509713.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。