海上日出 巴金

  为了看日出,我常常早起。那时天还没有大亮,周围很静,只听见船里机器的声音。

  天空还是一片浅蓝,很浅很浅的。转眼间,天水相接的地方出现了一道红霞。红霞的范围慢慢扩大,越来越亮。我知道太阳就要从天边升起来了,便目不转睛地望着哪里。

  果然,过了一会儿,哪里出现了太阳的小半边脸,红是红的很,却没有亮光。太阳像负着什么重担似的,慢慢儿,一纵一纵地,使劲像上升。到了最后,它终于冲了云霞,完全跳出了海面,颜色真红的可爱。一刹那间,这深红的圆东西发出夺目的亮光,射得人眼睛发痛。它旁边的云也突然有了光彩。

  有时候天边的黑云,而且云片很厚,太阳升起来,人就不能够看见,然而太阳在黑云的背后放射它的光芒,给黑云镶了一道光亮的金边。后来,太阳慢慢透出重围,出现在天空,把一片片云染成了紫色或者红色。这时候,不仅是太阳,云和海水,连我自己也成了光亮的了。

  这不是伟大的奇观么?

             摘抄《海上日出》 巴金 、 四年级下册课文

              静心、

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用CSS和HTML实现海上日出动画的示例代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>Sunrise on the Sea</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="sun"></div> <div class="sea"></div> <div class="sky"></div> </div> </body> </html> ``` CSS代码: ``` * { box-sizing: border-box; margin: 0; padding: 0; } .container { width: 100%; height: 100vh; position: relative; overflow: hidden; } .sky { width: 100%; height: 100%; background-color: #98c7e0; position: absolute; top: 0; left: 0; z-index: 1; } .sea { width: 100%; height: 50%; background-color: #2377d1; position: absolute; bottom: 0; left: 0; z-index: 2; } .sun { width: 100px; height: 100px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: -50%; transform: translateY(-50%); animation: sunrise 10s linear forwards; } @keyframes sunrise { 0% { top: 50%; left: -50%; transform: translateY(-50%); } 50% { top: 10%; left: 50%; transform: translate(-50%, -50%); } 100% { top: 50%; left: 100%; transform: translateY(-50%); } } ``` 解释: 1. 创建一个包含所有元素的 `.container` 容器,并设置其 `position: relative` 和 `overflow: hidden` 属性,以便在其中创建绝对定位的元素,并将其限制在容器内。 2. 创建一个表示海的元素 `.sea`,其 `position: absolute` 和 `bottom: 0` 属性将其放置在容器底部,并将其 `z-index: 2` 属性设置为比太阳图标高,以便在日出时太阳在海平面之上。 3. 创建一个表示天空的元素 `.sky`,其 `position: absolute` 和 `top: 0` 属性将其放置在容器顶部,并将其 `z-index: 1` 属性设置为比海洋低,以便在日出时太阳在天空中。 4. 创建一个表示太阳的元素 `.sun`,其 `position: absolute`、`top: 50%` 和 `left: -50%` 属性将其放置在容器左侧并垂直居中,并将其 `transform: translateY(-50%)` 属性将其水平居中。使用 `animation` 属性和 `@keyframes` 规则创建一个名为 `sunrise` 的动画,该动画将太阳从左侧移到右侧并在50%的时间内升起到天空中。 5. 在 `@keyframes sunrise` 规则中,使用 `top` 和 `left` 属性和 `transform` 属性控制太阳的位置和移动,使其从左侧移动到右侧并在50%的时间内升起到天空中。使用 `linear` 缓动函数使动画更加平滑。 这样,您就可以在浏览器中查看该动画。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值