CSS3海贼船动画完整案例资源-CSDN下载

共2个文件

png：1个

html：1个

需积分: 50 76 浏览量 2018-05-24 19:39:31 上传评论收藏 187KB ZIP 举报

【CSS3海贼船动画完整案例】是一个展示CSS3强大动画功能的实际项目，它通过精心设计的代码，呈现了飘动的云朵、明亮的太阳、波涛汹涌的大海以及起伏的山峰等生动场景。这个案例充分体现了CSS3在网页动态效果方面的卓越表现力，使网页元素能够栩栩如生地展现出来。我们来探讨CSS3动画的基础知识。CSS3动画是通过`@keyframes`规则创建的，这个规则定义了一个或多个在动画过程中元素外观的变化。例如，在这个海贼船案例中，`@keyframes`可能被用来定义云朵从一侧移动到另一侧，太阳上升和下降，以及海浪起伏的各个阶段。云朵的动画效果可以通过改变其`transform`属性实现，特别是`translateX`和`translateY`，这两个属性控制元素在水平和垂直方向上的位移。同时，`opacity`属性可以用来调整云朵的透明度，使其看起来像是在飘动。为了增加真实感，阴影效果（`box-shadow`）也可以应用于云朵，模拟云朵随风漂浮时的立体感。太阳的动画可能涉及到`rotate`和`scale`属性，让太阳在升起和落下时旋转并改变大小。此外，使用渐变背景（`linear-gradient`）可以创建出太阳的光芒效果，通过改变背景位置（`background-position`）模拟阳光照射的变化。大海的波浪效果通常会用到`background-image`属性，创建一个重复的波纹图案。通过改变`background-position`，可以模拟海浪的起伏。为了增加动态感，还可以利用`animation-duration`和`animation-iteration-count`属性设置动画的持续时间和重复次数。山峰的动画可能相对简单，主要通过改变`height`和`transform`属性来模拟山峰的起伏。同时，可以利用`rgba`颜色值和`opacity`来创造日出和日落时山峰的光影变化。在实际应用中，这些元素会被包裹在一个容器内，通过`position`属性（如`relative`或`absolute`）和`z-index`属性来控制它们的布局和层次关系。然后，使用`class`选择器将相应的动画效果应用到每个元素上，并通过`animation-name`引用在`@keyframes`中定义的动画，最后通过`animation-duration`、`animation-delay`和`animation-timing-function`来调整动画的速度和节奏。 CSS3海贼船动画案例展示了如何利用CSS3的动画特性来创造丰富的视觉效果。通过熟练掌握和灵活运用这些技术，开发者可以为网页增添更多动态元素，提升用户体验，使网页更加生动和吸引人。

资源推荐

资源详情

资源评论

收起资源包目录

海贼船.zip （2个子文件）

海贼船

index.html 5KB

imgs

1.png 185KB

<!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> * { margin: 0; padding: 0; } html, body { /* 如果不设置body宽高,radial-gradient无效 */ width: 100%; height: 100%; } body { /* 径向渐变的太阳 */ background: radial-gradient(250px at right top, red, orange, yellow, skyblue); overflow: hidden; } /* 移动的船 */ img { position: absolute; bottom: 100px; right: 100px; transform: translate(0px, 0px) rotate(3deg); animation: move 10s ease-in-out 0s forwards; } @keyframes move { 20% { transform: translate(-500px, 0px) rotate(-3deg); } 21% { transform: translate(-500px, 3px) rotate(-3deg); } 25% { transform: translate(-450px, 0px) rotate(1deg); } 26% { transform: translate(-450px, 3px) rotate(2deg); } 27% { transform: translate(-450px, 0px) rotate(3deg); } 50% { transform: translate(-450px, 50px) rotate(15deg); } 80% { transform: translate(-300px, 200px) rotate(50deg); } 100% { transform: translate(-300px, 400px) rotate(60deg); } } /* 线性渐变的海洋 */ sea { width: 100%; height: 110px; background: linear-gradient(to top, #05f, #05f, #008); position: absolute; bottom: 0; z-index: 10; } /* 线性渐变的山 */ mountain1 { width: 100px; height: 300px; border-radius: 50% 50%; background: linear-gradient(to bottom, #080, #050); position: absolute; bottom: -130px; left: 40px; } mountain2 { width: 100px; height: 300px; border-radius: 50% 50%; background: linear-gradient(to bottom, #0f0, #080, #050); position: absolute; bottom: -70px; left: 110px; z-index: 1; } mountain3 { width: 100px; height: 300px; border-radius: 50% 50%; background: linear-gradient(to bottom, #060, #050); position: absolute; bottom: -100px; left: 190px; } /* 飘动的云朵 */ cloud { margin-left: 50px; width: 250px; height: 150px; position: relative; -webkit-animation: 'cloud' 5s linear infinite; } /* 这里的通配符*的意思是cloud内部的所有元素都适配 */ cloud * { position: absolute; background: #FFF; border-radius: 50%; box-shadow:0px 5px 0px #6695B0; } cloud .one { left: 60px; top: 30px; width: 128px; height: 128px; } cloud .two { left: 20px; top: 76px; width: 82px; height: 82px; } cloud .thr { left: 155px; top: 94px; width: 64px; height: 64px; } cloud .fou { left: 56px; top: 118px; width: 135px; height: 40px; border-radius: 0; } @keyframes cloud { 0% { margin-left: 50px; } 50% { margin-left: 150px; } 100% { margin-left: 50px; } } </style> </head> <body> <img src="./imgs/1.png"> <sea></sea>  <mountain1></mountain1> <mountain2></mountain2> <mountain3></mountain3>  <cloud> <div class="one"></div> <div class="two"></div> <div class="thr"></div> <div class="fou"></div> </cloud> </body> </html>

评论收藏

内容反馈