叶落

叶落

某个风雨后的黄昏
   没有晚霞
我站在叶落的枝头
   秋风萧瑟
树下班驳的枯骸
   沧桑寂寞
我的心中游离着
   一种困惑
这轻薄脆弱的叶上
到底承载多少负荷
也有阳光和空气的重量
让它最终凋落

——生命不能承受之轻

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个示例代码,实现在页面上同时显示树叶效果和随机落下的图片: HTML 代码: ```html <div id="image-container"></div> <div class="leaves"></div> ``` CSS 代码: ```css .leaves { width: 100px; height: 100px; background-image: url('https://cdn.pixabay.com/photo/2014/04/03/10/16/leaves-310840_960_720.png'); background-size: cover; animation: leaf-fall 10s linear infinite; position: absolute; top: -100px; } @keyframes leaf-fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } ``` JavaScript 代码: ```javascript const images = [ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg' ]; const imageContainer = document.getElementById('image-container'); for (let i = 0; i < 3; i++) { const randomIndex = Math.floor(Math.random() * images.length); const imageUrl = images[randomIndex]; const img = document.createElement('img'); img.src = imageUrl; img.style.position = 'absolute'; img.style.top = '-100px'; img.style.left = Math.floor(Math.random() * (window.innerWidth - 100)) + 'px'; imageContainer.appendChild(img); images.splice(randomIndex, 1); } const leaves = document.querySelectorAll('.leaves'); for (let i = 0; i < leaves.length; i++) { const leaf = leaves[i]; leaf.style.left = Math.floor(Math.random() * (window.innerWidth - 100)) + 'px'; } ``` 这段代码首先定义了一个包含图片路径的数组 `images`。然后使用 `for` 循环三次,每次从 `images` 数组中随机选择一个图片路径,并创建一个 `img` 元素,将图片路径设置为 `src` 属性,并将 `img` 元素添加到页面中的 `imageContainer` 容器中。同时,我们还需要设置每个图片元素的位置,使用 `Math.random()` 函数生成一个随机的左边距,同时将 `top` 属性设置为 `-100px`,在页面的最顶部开始落下。 接下来,我们需要将树叶效果和随机落下的图片结合在一起。我们使用 `querySelectorAll()` 方法获取所有的树叶元素,然后使用 `for` 循环遍历每个树叶元素,设置一个随机的左边距,使得树叶效果在页面的不同位置出现。 最后,我们需要为树叶效果添加 CSS 样式,实现树叶从页面的顶部落下。我们使用 `@keyframes` 定义了一个名为 `leaf-fall` 的动画,将树叶从 `-100%` 的位置移动到 `100vh` 的位置,实现树叶从页面顶部落下的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值