动态笔芯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>xinxin</title>
<style>
*{margin: 0;padding: 0;}
html{width: 100%;height: 100%;}
body{
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574351196580&di=f7b859f31101f650326cd8d6c5fc6266&imgtype=0&src=http%3A%2F%2Ft-1.tuzhan.com%2F30ee7f4faeb0%2Fc-2%2Fl%2F2014%2F10%2F16%2F03%2Fe60de60115644bdaa83f75c7a0770483.jpg");
background-size: cover;
background-repeat: no-repeat;
}
div{
position: fixed;
margin: auto;
top: 0;left: 0;right: 0;bottom: 0;
padding: 16px;
background-color: rgba(255,255,255,.3);
}
p{
text-indent: 2em;
font-size: 26px;
text-align: justify;
color: deepskyblue;
line-height: 48px;
}
</style>
</head>
<body>
<div>
<p>我是个俗气至顶的人，见山是山，见海是海，见花便是花。唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒，你无需开口，我和天地万物便通通奔向你。</p>
</div>
</body>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script>
//随机获取min-max的随机整数
function getRand(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
//获取十六进制随机颜色值
function getColor(){
var color = "#";
var str = "0123456789abcdef";
var rand;
for (var i = 0; i < 6; i++) {
rand = getRand(0,15);
color += str.charAt(rand);
}
return color;
}
// 每过2秒变色
$(function(){
$("p").css("color",getColor());
setInterval(()=>{
$("p").animate({color: getColor()},2000);
},2000);
});
var i=0;
setInterval(autoPlay, 500);
function autoPlay() {
i++;
var img = document.createElement("img");
img.src = "http://pic.90sjimg.com/design/00/05/78/29/5a4a5754a6900.png%21/fwfh/804x804/quality/90/unsharp/true/compress/true";
document.body.appendChild(img);
var w = getRand(10, 30);
img.style.width = w + "px";
img.style.position = "absolute";
var l = getRand(0, window.innerWidth - w); //距离左边
var t = getRand(0, window.innerHeight - w); //距离上面
img.style.left = l + "px";
img.style.top = t + "px";
// 限制小心心的个数为100个
if(i>100){
$($("img")[0]).remove();
}
}
</script>
</html>
