使用纯CSS实现日出日落效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>东升西落</title>
<style type="text/css">
.ship {
animation-name: move-ship;
animation-duration: 40s;
}
.clouds {
animation-name: move-clouds;
animation-duration: 40s;
}
.sun-small {
animation-name: move-sun;
animation-duration: 10s;
}
.comet {
animation-name: move-comet;
animation-duration: 10s;
}
@keyframes move-comet {
100% {
transform: translate(400px, 375px);
}
}
@keyframes move-clouds {
to {transform: translateX(-1000px);}
}
@keyframes move-sun {
to {transform: translate(350px, -400px);}
}
@keyframes move-ship {
to {transform: translateX(1000px);}
}
</style>
</head>
<body>
<head>
<title>Водное путешествие</title>
<meta charset="utf-8">
<base href="https://htmlacademy.ru/assets/course80/">
<link rel="stylesheet" href="epoch1.css">
</head>
<body class="ancient-world">
<div>
<div class="comet"></div>
<div class="sun-small"></div>
<div class="clouds"></div>
<div class="water"></div>
<div class="ship"></div>
</div>
</body>
</body>
</html>
.
相关推荐
此资源“纯CSS3实现的日落时渐变色背景动画效果源码.zip”提供了利用CSS3特性创建日落时分背景颜色渐变动画的方法。这个效果可以为网站增添动态美感，提升用户体验，特别适用于设计主题或动态背景。 在CSS3中，我们...
【标题】"纯css3实现的蓝天白云太阳动画效果源码.zip" 提供的是一个使用CSS3技术构建的动态天空场景，其中包括蓝天、白云和太阳的动画效果。这个压缩包中的源码展示了如何利用CSS3的特性来创建复杂的视觉效果，无需...
可以使用径向渐变制作太阳的光辉效果，结合`transform: rotate()`实现日出日落的动态变化。 2. **多云**：通过组合多个不规则形状的云朵，利用`border-radius`创建圆润的边缘，使用过渡效果让云朵缓慢移动。 3. **...
例如，旋转雨滴或雪花以模拟下落效果，或者改变太阳的位置以表现日出日落。 2. **过渡（Transitions）**：当元素的属性值发生变化时，`transition`属性可以平滑地过渡到新状态，为天气变化添加平滑的动画效果。例如...
本资源包含一个使用纯CSS3技术构建的动态风景动画效果，展现了阳光、海鸥、沙滩、遮阳伞以及比基尼美女的元素。这个动画效果是网页设计中一种创新的视觉表现手法，能够吸引用户注意力并提升用户体验。下面将详细探讨...
此资源“纯CSS3实现的动态天气小图标特效源码.zip”提供了一种利用CSS3技术制作动态天气小图标的解决方案。这种技术无需依赖JavaScript或者其他图像处理库，完全通过CSS3的特性实现，对于网页性能优化和减少网络请求...
【标题】"纯CSS3+SVG绘制森林里的雄鹿背景效果源码"是一个关于使用现代Web技术实现动态背景效果的示例。这个项目利用了CSS3的先进特性以及可缩放向量图形（SVG）来创建一个逼真的森林场景，其中包含一只雄鹿的图像。...
【纯CSS3绘制蓝天白云建筑小车场景动画】是一个利用CSS3的强大功能来构建动态视觉效果的实践案例。CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，使得网页设计更加丰富...
本文将详细介绍如何仅使用CSS3技术实现地球自转的效果。这个教程将分为四个步骤，逐步教你如何创建一个逼真的地球模型，并让它在网页上进行自转，同时还包括月晕效果和昼夜交替的视觉呈现。 ### 第一步：构建静态...
【纯CSS3上班族场景动画特效】是一种利用现代CSS3技术构建的网页动态效果，它无需JavaScript，完全依赖CSS3的特性来实现上班族日常生活的情景展示。这种特效为网站增添生动性和趣味性，使得用户在浏览时能有更丰富的...
此外，调整颜色渐变和透明度变化可以实现烟花绽放或日出日落的效果。 在实际应用中，你可以结合CSS3、HTML5 Canvas或者WebGL来渲染粒子效果，从而在网页上实现高性能且流畅的视觉体验。对于开发者来说，理解并掌握...
【纯CSS3蓝天白云太阳动画特效特效代码】是一种利用CSS3的强大功能来创建动态视觉效果的方法。CSS3，即层叠样式表第三版，是Web设计领域中的一个重要里程碑，它扩展了CSS2的功能，增加了对动画、过渡和更多高级布局...