CSS3实现的直升机飞翔动画效果源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

152 浏览量 2022-10-31 01:47:03 上传评论收藏 2KB ZIP 举报

在本资源中，我们主要探讨的是使用CSS3技术来实现一个直升机飞翔的动画效果。CSS3作为现代网页设计的关键组成部分，提供了丰富的样式控制和动态效果，使得开发者无需依赖JavaScript或其他复杂的编程语言就能创建出引人入胜的视觉体验。下面我们将深入解析这个主题，详细阐述如何利用CSS3实现这样的动画效果。让我们了解一下CSS3的核心特性。CSS3引入了选择器层级、伪类和伪元素、多列布局、边框与背景、过渡（Transitions）、动画（Animations）以及变换（Transforms）等新功能。在这个直升机动画中，尤其是动画和变换这两个特性起着至关重要的作用。动画（Animations）是通过@keyframes规则定义的，允许开发者指定一个动画从开始到结束的各个阶段的样式。例如，我们可以定义一个名为"fly-animation"的动画，设定直升机从地面上升到空中，然后在空中盘旋的过程。以下是一个简单的@keyframes示例： ```css @keyframes fly-animation { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(100px) translateY(-50px) rotate(10deg); } 100% { transform: translateX(0) translateY(0); } } ``` 在这个例子中，动画开始时直升机位于原点（0%），随着动画进行，它会向右移动100px，向上移动50px，并且旋转10度（50%），最后回到初始位置（100%）。变换（Transforms）允许我们对元素进行二维或三维空间的变形，如旋转、缩放、平移等。在直升机动画中，我们可能需要用到`translate`（平移）、`rotate`（旋转）和`scale`（缩放）这些属性。例如： ```css helicopter { transform: translateX(0) translateY(0) rotate(0deg); animation: fly-animation 5s infinite; /* 这里将动画应用到直升机元素 */ } ``` 这个样式将直升机初始化为原点位置，不旋转，并且应用上面定义的“fly-animation”动画，动画持续5秒并无限循环。除了这些关键特性，我们还需要考虑其他的CSS3属性来完善动画效果。比如，我们可以使用`opacity`调整透明度，以模拟直升机的远近变化；使用`z-index`控制元素的前后顺序，确保直升机始终在背景之上；还可以通过`animation-delay`设置动画开始的时间，以创建更丰富的交互效果。此外，为了保证在不同浏览器中的兼容性，我们需要添加浏览器特定的前缀，如`-webkit-`、`-moz-`、`-ms-`等。例如： ```css @-webkit-keyframes fly-animation { /* ... */ } helicopter { -webkit-transform: translateX(0) translateY(0) rotate(0deg); -webkit-animation: fly-animation 5s infinite; /* 其他浏览器前缀 */ } ``` 这个CSS3实现的直升机飞翔动画效果充分利用了CSS3的动画和变换特性，创造出一个动态的视觉效果。通过熟练掌握这些技术，开发者可以创造出更多富有创意和吸引力的网页交互元素，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

CSS3 实现的直升机飞翔动画效果源码.zip （1个子文件）

132686877877524749

index.html 14KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 直升机飞翔动画</title> <style> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%: overflow: hidden; position: fixed; top: 0%; left: 0%; } html { background-color: rgba(179, 179, 179, 1); } #letter { font-size: 120px; font-family: Helvetica; font-weight: Bold; color: rgba(18, 22, 26, 0.7); width: 120px; height: 120px; text-align: center; vertical-align: middle; line-height: 120px; position: fixed; top: 50%; left: 50%; margin-top: -60px; margin-left: -60px; opacity: 1; z-index: 15; } #description { position: fixed; bottom: 10px; width: 100%; z-index: 100; font-family: Helvetica; font-weight: 200; color: rgba(18, 22, 26, 0.7); text-align: center; font-size: 11px; letter-spacing: 1px; } #animation { position: fixed; animation: bounce 4s ease-in-out 0s infinite normal none; -webkit-animation: bounce 4s ease-in-out 0s infinite normal none; width: 100%; height: 100%; top: 0%; left: 0%; } .helicopter { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -220px; z-index: 105; -webkit-transform: rotate(-15deg) scale(0.9); -moz-transform: rotate(-15deg) scale(0.9); -ms-transform: rotate(-15deg) scale(0.9); -o-transform: rotate(-15deg) scale(0.9); transform: rotate(-15deg) scale(0.9); } .helicopter .cockpit { width: 175px; height: 175px; border-radius: 100px; background-color: rgba(171, 220, 40, 1); position: fixed; overflow: hidden; z-index: 5; } .helicopter .cockpit:before { content: ""; width: 170px; height: 170px; border-radius: 40px; background-color: rgba(65, 94, 133, 1); position: absolute; z-index: 5; top: -10px; left: -25px; } .helicopter .cockpit:after { content: ""; width: 170px; height: 170px; border-radius: 40px; background-color: rgba(255, 255, 255, 0.1); position: absolute; z-index: 8; top: -60px; left: -60px; } .helicopter .tail { position: absolute; border-top: 10px solid transparent; border-bottom: 90px solid transparent; border-left: 330px solid rgba(171, 220, 40, 1); border-top-right-radius: 10px; border-bottom-right-radius: 10px; height: 10px; top: 40px; left: 150px; -webkit-transform-origin: left center; transform-origin: left center; } .helicopter .main { border-bottom: 70px solid rgba(171, 220, 40, 1); border-left: 15px solid transparent; border-right: 15px solid transparent; width: 10px; position: absolute; left: 130px; top: -10px; } .helicopter .smallrotor { animation: rotate 0.6s linear 0s infinite normal none; -webkit-animation: rotate 0.6s linear 0s infinite normal none; background-color: rgba( 28, 18, 2, 0.02); width: 100px; height: 100px; position: absolute; top: 5px; left: 428px; border-radius: 100px; overflow: hidden; } .helicopter .smallrotor div { width: 120px; height: 10px; background-color: rgba( 28, 18, 2, 0.03); position: absolute; top: 50%; left: 50%; margin-left: -60px; margin-top: -5px; } .helicopter .smallrotor div:nth-of-type(2) { -webkit-transform: rotate( 90deg); -moz-transform: rotate( 90deg); -ms-transform: rotate( 90deg); -o-transform: rotate( 90deg); transform: rotate( 90deg); } .helicopter .rotor { width: 700px; height: 700px; border-radius: 350px; position: absolute; top: -360px; left: -200px; overflow: hidden; background-color: rgba( 28, 18, 2, 0.03); -webkit-transform: scale( 1, 0.075); -moz-transform: scale( 1, 0.075); -ms-transform: scale( 1, 0.075); -o-transform: scale( 1, 0.075); transform: scale( 1, 0.075); z-index: 20; } .helicopter .rotor .rotator { width: 700px; height: 700px; border-radius: 350px; position: absolute; animation: rotate 0.6s linear 0s infinite normal none; -webkit-animation: rotate 0.6s linear 0s infinite normal none; } .helicopter .rotor .rotator div { width: 700px; height: 60px; background-color: rgba( 28, 18, 2, 0.03); position: absolute; top: 50%; left: 50%; margin-left: -350px; margin-top: -30px; } .helicopter .rotor div:nth-of-type(1) { -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); -ms-transform: rotate( 0deg); -o-transform: rotate( 0deg); transform: rotate( 0deg); } .helicopter .rotor div:nth-of-type(2) { -webkit-transform: rotate( 90deg); -moz-transform: rotate( 90deg); -ms-transform: rotate( 90deg); -o-transform: rotate( 90deg); transform: rotate( 90deg); } .cloud { position: fixed; margin-left: -2000px; left: 0%; } .cloud:nth-of-type(1) { top: 0%; animation: cloudmove 18s linear 5s infinite normal none; -webkit-animation: cloudmove 18s linear 5s infinite normal none; } .cloud:nth-of-type(2) { top: 25%; animation: cloudmove 30s linear -15s infinite normal none; -webkit-animation: cloudmove 30s linear -15s infinite normal none; } .cloud:nth-of-type(3) { top: 50%; animation: cloudmove 20s linear 0s infinite normal none; -webkit-animation: cloudmove 20s linear 0s infinite normal none; } .cloud:nth-of-type(4) { top: 75%; animation: cloudmove 20s linear 5s infinite normal none; -webkit-animation: cloudmove 20s linear 5s infinite normal none; } .cloud:nth-of-type(5) { top: 100%; animation: cloudmove 25s linear -10s infinite normal none; -webkit-animation: cloudmove 25s linear -10s infinite normal none; } .cloud .fluff { background-color: #fff; border-radius: 400px; width: 400px; height: 400px; position: absolute; top: 0; left: 0; margin-top: -200; margin-left: -200; } .cloud .fluff:nth-of-type(1) { -webkit-transform: scale( 0.8); -moz-transform: scale( 0.8); -ms-transform: scale( 0.8); -o-transform: scale( 0.8); transform: scale( 0.8); margin-top: -320px; margin-left: -380px; animation: fluff 20s ease-in-out -4s infinite alternate none; -webkit-animation: fluff 20s ease-in-out -4s infinite alternate none; } .cloud .fluff:nth-of-type(2) { margin-top: -340px; margin-left: -90px; animation: fluff 20s ease-in-out -8s infinite alternate none; -webkit-animation: fluff 20s ease-in-out -8s infinite alternate none; } .cloud .fluff:nth-of-type(3) { -webkit-transform: scale( 0.7); -moz-transform: scale( 0.7); -ms-transform: scale( 0.7); -o-transform: scale( 0.7); transform: scale( 0.7); margin-top: -300px; margin-left: 90px; animation: fluff 20s ease-in-out -10s infinite alternate none; -webkit-animation: fluff 20s ease-in-out -10s infinite alternate none; } .cloud .fluff:nth-of-type(4) { -webkit-transform: scale( 0.5); -moz-transform: scale( 0.5); -ms-transform: scale( 0.5); -o-transform: scale( 0.5); transform: scale( 0.5); margin-top: -190px; margin-left: -250px; animation: fluff 20s ease-in-out -15s infinite alternate none; -webkit-animation: fluff 20s ease-in-out -15s infinite alternate none; } @keyframes fluff { 80% { -webkit-transform: translate( 90px, -10px); -moz-transform: translate( 90px, -10px); -ms-transform: translat

评论收藏

内容反馈

版权申诉