<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #000;
margin:0 auto;
}
span {
width: 30px;
height: 30px;
background: url("images/flower.gif") no-repeat;
position: absolute;
background-size: 100% 100%;
animation: flash 1s alternate infinite;
}
@keyframes flash {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
span:hover{
transform: scale(3,3) rotate(180deg) !important;
transition:all 1s;
}
</style>
</head>
<body>
/*<!--<span></span>--> */
<script>
window.onload = function () {
// 1.求出屏幕的尺寸
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
// console.log(screenW);
// console.log(screenH);
// 2.动态创建鲜花
for (var i = 0; i < 150; i++) {
// 循环遍历
var span = document.createElement('span');
document.body.appendChild(span);
// 2.2随机坐标
var x=parseInt(Math.random()*screenW);
var y=parseInt(Math.random()*screenH);
console.log(x,y);
span.style.left=(x)+"px";
span.style.top=y+"px";
// 2.3随机缩放
var scale=Math.random()*1.5;
span.style.transform='scale('+scale+','+scale+')';
// 2.4频率
var rate=Math.random()*1.5;
span.style.animationDelay=rate+"s";
}
}
</script>
</body>
</html>
js/h5/css3鲜花表白的效果图源代码
最新推荐文章于 2024-08-11 17:47:06 发布