鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

*,*::before,*::after {
	box-sizing:border-box
}
body {
	position:fixed;
	width:100%;
	height:100%;
	background:#4cc5f4;
	overflow:hidden 
}
.tekst {
	color:#505050;
	margin:0;
	padding:0;
	font-family:'Lato',arial,sans-serif;
	text-transform:uppercase;
	font-size:14px;
	line-height:28px;
	font-weight:bold;
	display:block;
	letter-spacing:2px;
	max-width:100%;
	text-align:center;
	position:absolute;
	bottom:20px;
	left:30px;
	z-index:1
}
a {
	color:#fefefe;
	text-decoration:none;
	cursor:pointer
}
a:hover {
	text-decoration:underline
}
.pozycja {
	position:absolute;
	top:50%;
	left:50%;
	height:100%;
	-webkit-transform:translate(-50%,-111px);
	-moz-transform:translate(-50%,-111px);
	-ms-transform:translate(-50%,-111px);
	-o-transform:translate(-50%,-111px);
	transform:translate(-50%,-111px)
}
.ludek {
	position:relative;
	width:200px;
	height:100%
}
.ludek .cialo,.skora {
	position:absolute;
	width:100%;
	height:105%;
	top:0;
	left:0;
	background:#191919;
	border-radius:200px 200px 0 0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-webkit-transform-origin:bottom center;
	-moz-transform-origin:bottom center;
	-ms-transform-origin:bottom center;
	-o-transform-origin:bottom center;
	transform-origin:bottom center
}
.ludek .skora {
	overflow:hidden
}
.ludek .cialo .ucho {
	position:absolute;
	top:80px;
	width:45px;
	height:45px;
	background:#191919;
	border-radius:45px
}
.ludek .cialo .ucho.lewe {
	left:-10%
}
.ludek .cialo .ucho.prawe {
	right:-10%
}
.ludek .oko {
	width:50px;
	height:50px;
	position:absolute;
	top:85px;
	background:#fefefe;
	border-radius:50%;
	z-index:1
}
.ludek .oko.lewe {
	left:47px
}
.ludek .oko.prawe {
	left:103px
}
.ludek .oko .zrenica {
	width:15px;
	height:15px;
	position:absolute;
	top:18px;
	left:18px;
	background:#191919;
	border-radius:50%
}
.ludek .powieka_gorna {
	width:70%;
	height:30px;
	position:absolute;
	top:50px;
	left:15%;
	background:#191919;
	border-radius:30px 30px 0 0;
	z-index:3
}
.ludek .powieka_dolna {
	width:70%;
	height:30px;
	position:absolute;
	top:140px;
	left:15%;
	background:#191919;
	border-radius:0 0 30px 30px;
	z-index:3
}
.ludek .usta {
	width:80%;
	height:32px;
	position:absolute;
	top:145px;
	left:10%;
	background:#fefefe;
	border-radius:32px;
	z-index:4
}

JavaScript

$(function() {
    var tarcie = (1 / 6);
    var cialo_x = 0,
        cialoRuchX = 0,
        uszy_x = 0,
        uszy_y = 0,
        uszyRuchX = 0,
        uszyRuchY = 0,
        zrenica_x = 0,
        zrenica_y = 0,
        zrenicaRuchX = 0,
        zrenicaRuchY = 0,
        oko_x = 0,
        oko_y = 0,
        okoRuchX = 0,
        okoRuchY = 0,
        powieka_gorna_x = 0,
        powieka_gorna_y = 0,
        powiekaGornaRuchX = 0,
        powiekaGornaRuchY = 0,
        powieka_dolna_x = 0,
        powieka_dolna_y = 0,
        powiekaDolnaRuchX = 0,
        powiekaDolnaRuchY = 0,
        usta_x = 0,
        usta_y = 0,
        ustaRuchX = 0,
        ustaRuchY = 0;

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