SHOP_SPAT

システム全般

SPAT_JAPAN

最新

ポートフォリオ_280×188


概要
システムエンジニアで本当はまじめです。お尻フェチ。自動車関連退職。株トレーダー初心者。








javascript紙吹雪

let screen_w = window.innerWidth;
let screen_h = window.innerHeight;
const KAMI_MAX = 100;
const COLORS = ["#f55","#55f","#5c5","#fa5","#5af"];
    
function rand(min,max)
    {
        return (Math.floor(Math.random()*(max-min+1)+min));
    }

class Kami
    {
        constructor()
        {
            this.elm = document.createElement("div");
            document.body.appendChild(this.elm);
            
            this.sty = this.elm.style;
            
            this.x = rand(0,screen_w);
            this.y = rand(0,screen_h);
            this.vx = rand(-10,10);
            this.vy = rand(5,10);
            
            this.ang = 0;
            this.spd = rand(15,40);
            
            this.rx = rand(0,10)/10;
            this.ry = rand(0,10)/10;
            this.rz = rand(0,10)/10;
            
            this.sty.position = "fixed";
            this.sty.width = "15px";
            this.sty.height = "6px";
            this.sty.backgroundColor = COLORS[rand(0,COLORS.length)];
        }
        update()
        {
            this.x+= this.vx;
            this.y+= this.vy;
            if(this.y>screen_h)
                {
                    this.x = rand(0,screen_w);
                    this.y = -20;
                }
            
            this.ang += this.spd;
            this.sty.left = this.x + "px";
            this.sty.top = this.y + "px";
            this.sty.transform = "rotate3D("+this.rx+","+this.ry+","+this.rz+","+this.ang+"deg)";
        }
    }

let kami = [];

for(let i=0;i



CSSマウスhover


.hovercss1 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.hovercss1 .caption {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		80px;
}
.hovercss1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transform:	rotateX(-180deg);
	transform:		rotateX(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.hovercss1:hover .mask {
	-webkit-transform:	rotateX(0deg);
	transform:		rotateX(0deg);
	opacity:		1;	/* ホバーで表示する */
}

    #notable {
        display:table; 
    }
    .rowno {
        display:table-row;
    }
    .rowno div {
        display:table-cell;
        margin:1px;
        padding:1px;
        border:1px;
        border-bottom: thin solid #ff00ff;
    }
紙吹雪!

リンク

リンク

広告

広告____400×100で作成されています

ページのトップへ戻る