先看一下实现的效果~
哈哈 没关系哈，这个动图是有点小，但是你也能看得清对吧~
首先处理右下角的文字掉落
先看html
<p>
<span>我</span>
<span>是</span>
<span>一</span>
<span>个</span>
<span>p</span>
<span>标</span>
<span>签</span>
</p>
CSS
p {
line-height: 60px;
background-color: #ccc;
width: 300px;
margin: 100px auto;
text-align: center;
position: fixed;
bottom: -50px;
right: 100px;
}
span {
animation: down 2s infinite;
display: inline-block;
position: relative;
font-weight: bold;
font-size: 28px;
}
@keyframes down {
0% {
transform: translateY(-360px);
}
100% {
transform: translateY(0);
}
}
JS
let spans = document.getElementsByTagName('span')
let p = document.getElementsByTagName('p')[0]
//鼠标经干改变颜色
p.addEventListener('mouseover', function (e) {
if (e.target.nodeName.toLowerCase() == 'span') {
this.style.color = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',0.8)';
e.target.style.color = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',0.8)';
}
})
let s = 0
for (let i = 0; i < spans.length; i++) {
s += .1
//动画延迟事件
spans[i].style['animation-delay'] = `${
s}s`;
}
小星星动画
HTML
生成几个小星星呢 <input type="text"> <button>生成</button>
<div class="div"></div>
CSS
.div {
box-sizing: inherit;
position: absolute;
left: 0;
top: 0;
text-align: left;
width: 100%;
height: 100%;
background-color: #ccc;
margin: 0 auto;
display: none;
}
.div>img {
width: 30px;
height: 30px;
position: absolute;
}
.div>img:nth-child(1) {
transition: all 100ms ease 1ms;
z-index: 10;
}
.div>img:nth-child(2) {
transition: all 100ms ease 2ms;
z-index: 9;
}
.div>img:nth-child(3) {
transition: all 100ms ease 3ms;
z-index: 8;
}
.div>img:nth-child(4) {
transition: all 100ms ease 4ms;
z-index: 7;
}
.div>img:nth-child(5) {
transition: all 100ms ease 5ms;
z-index: 6;
}
.div>img:nth-child(6) {
transition: all 100ms ease 6ms;
z-index: 5;
}
.div>img:nth-child(7) {
transition: all 100ms ease 7ms;
z-index: 4;
}
.div>img:nth-child(8) {
transition: all 100ms ease 8ms;
z-index: 3;
}
.div>img:nth-child(9) {
transition: all 100ms ease 9ms;
z-index: 2;
}
.div>img:nth-child(10) {
transition: all 100ms ease 10ms;
z-index: 1;
}
JS
let divBox = document.getElementsByClassName('div')[0]
let inp = document.getElementsByTagName('input')[0]
let btn = document.getElementsByTagName('button')[0]
//防止多次刷新页面dom
let flag = true；
//存储输入的数量
let num;
//鼠标划入
divBox.addEventListener('mouseover', function (e) {
let x = e.clientX
let y = e.clientY
if (flag) {
let HtmlStr = '';
for (let i = 0; i < num; i++) {
//例用 ES6 字符串拼接
HtmlStr += `<img class="img${
i}" src="./xingxing.png" alt="">`
}
this.innerHTML = HtmlStr
//关闭flag
flag = false
}
for (let i = 0; i < num; i++) {
let classImg = document.getElementsByClassName(`img${
i}`)[0]
//定位 赋值
classImg.style.top = y - 15 + 'px'
classImg.style.left = x - 15 + 'px'
}
e.preventDefault()
})
//移动事件
divBox.addEventListener('mousemove', function (e) {
let x = e.clientX
let y = e.clientY
if (flag) {
let HtmlStr = '';
for (let i = 0; i < num; i++) {
HtmlStr += `<img class="img${
i}" src="./xingxing.png" alt="">`
}
this.innerHTML = HtmlStr
flag = false
}
for (let i = 0; i < num; i++) {
let classImg = document.getElementsByClassName(`img${
i}`)[0]
classImg.style.top = y - 15 + 'px'
classImg.style.left = x - 15 + 'px'
}
e.preventDefault()
})
//点击按钮判断
btn.addEventListener('click', function () {
//不是空不是非数字
if (!isNaN(inp.value) && inp.value != '') {
//数字大于0小于等于10
if (inp.value > 10 || inp.value <= 0) {
window.alert('请输入小于十大于零')
}
num = inp.value
divBox.style.display = 'block'
} else {
window.alert('请输入数字')
return
}
})
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小星星</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
text-align: center;
}
p {
line-height: 60px;
background-color: #ccc;
width: 300px;
margin: 100px auto;
text-align: center;
position: fixed;
bottom: -50px;
right: 100px;
}
span {
animation: down 2s infinite;
display: inline-block;
position: relative;
font-weight: bold;
font-size: 28px;
}
@keyframes down {
0% {
transform: translateY(-360px);
}
100% {
transform: translateY(0);
}
}
.div {
box-sizing: inherit;
position: absolute;
left: 0;
top: 0;
text-align: left;
width: 100%;
height: 100%;
background-color: #ccc;
margin: 0 auto;
display: none;
}
.div>img {
width: 30px;
height: 30px;
position: absolute;
}
.div>img:nth-child(1) {
transition: all 100ms ease 1ms;
z-index: 10;
}
.div>img:nth-child(2) {
transition: all 100ms ease 2ms;
z-index: 9;
}
.div>img:nth-child(3) {
transition: all 100ms ease 3ms;
z-index: 8;
}
.div>img:nth-child(4) {
transition: all 100ms ease 4ms;
z-index: 7;
}
.div>img:nth-child(5) {
transition: all 100ms ease 5ms;
z-index: 6;
}
.div>img:nth-child(6) {
transition: all 100ms ease 6ms;
z-index: 5;
}
.div>img:nth-child(7) {
transition: all 100ms ease 7ms;
z-index: 4;
}
.div>img:nth-child(8) {
transition: all 100ms ease 8ms;
z-index: 3;
}
.div>img:nth-child(9) {
transition: all 100ms ease 9ms;
z-index: 2;
}
.div>img:nth-child(10) {
transition: all 100ms ease 10ms;
z-index: 1;
}
</style>
</head>
<body>
<img src="" alt="">
生成几个小星星呢 <input type="text"> <button>生成</button>
<div class="div">
</div>
<p>
<span>我</span>
<span>是</span>
<span>一</span>
<span>个</span>
<span>p</span>
<span>标</span>
<span>签</span>
</p>
<script>
let spans = document.getElementsByTagName('span')
let divBox = document.getElementsByClassName('div')[0]
let inp = document.getElementsByTagName('input')[0]
let btn = document.getElementsByTagName('button')[0]
let s = 0
for (let i = 0; i < spans.length; i++) {
s += .1
spans[i].style['animation-delay'] = `${
s}s`;
}
let p = document.getElementsByTagName('p')[0]
p.addEventListener('mouseover', function (e) {
if (e.target.nodeName.toLowerCase() == 'span') {
this.style.color = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',0.8)';
e.target.style.color = 'rgba(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',0.8)';
}
})
let flag = true
let num;
divBox.addEventListener('mouseover', function (e) {
let x = e.clientX
let y = e.clientY
if (flag) {
let HtmlStr = '';
for (let i = 0; i < num; i++) {
HtmlStr += `<img class="img${
i}" src="./xingxing.png" alt="">`
}
this.innerHTML = HtmlStr
flag = false
}
for (let i = 0; i < num; i++) {
let classImg = document.getElementsByClassName(`img${
i}`)[0]
classImg.style.top = y - 15 + 'px'
classImg.style.left = x - 15 + 'px'
}
e.preventDefault()
})
divBox.addEventListener('mousemove', function (e) {
let x = e.clientX
let y = e.clientY
if (flag) {
let HtmlStr = '';
for (let i = 0; i < num; i++) {
HtmlStr += `<img class="img${
i}" src="./xingxing.png" alt="">`
}
this.innerHTML = HtmlStr
flag = false
}
for (let i = 0; i < num; i++) {
let classImg = document.getElementsByClassName(`img${
i}`)[0]
classImg.style.top = y - 15 + 'px'
classImg.style.left = x - 15 + 'px'
}
e.preventDefault()
})
btn.addEventListener('click', function () {
if (!isNaN(inp.value) && inp.value != '') {
if (inp.value > 10 || inp.value <= 0) {
window.alert('请输入小于十大于零')
}
num = inp.value
divBox.style.display = 'block'
} else {
window.alert('请输入数字')
return
}
})
</script>
</body>
</html>
奖励一颗小星星
