<!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>HTML5很棒的模拟电影开场（或闭幕致谢）动画</title>
<style>
body {
background-color: #040302;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
#sunGlow {
mix-blend-mode: screen;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<svg viewBox="0 0 1280 576" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="dot" cx="400" cy="50" r="1" fill="#fff" />
<radialGradient id="sunGlowGrad" cx="640" cy="212" r="0" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#EFE2DF" />
<stop offset="8.629441e-002" style="stop-color:#9C795A" />
<stop offset="0.8325" style="stop-color:#040302" />
</radialGradient>
<radialGradient id="massivePlanetGrad" cx="640" cy="760" r="600" gradientUnits="userSpaceOnUse">
<stop offset="0.8883" style="stop-color:#040302" />
<stop offset="1" style="stop-color:#090C15" />
</radialGradient>
<radialGradient id="lensFlareGrad" cx="561.8718" cy="329.3705" r="57.6777" gradientTransform="matrix(1.387 0 0 1.387 -139.3268 -72.9125)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#3B211D" />
<stop offset="1" style="stop-color:#040302;stop-opacity:0" />
</radialGradient>
<filter id="glow" x="-100%" y="-100%" width="350%" height="250%">
<feGaussianBlur id="glowBlur" stdDeviation="0" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#DAAEAC" flood-opacity="1"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<radialGradient id="planetGrad" cx="640" cy="352" r="180" gradientUnits="userSpaceOnUse">
<stop id="gradientAppear" offset="0.89" stop-color="#040302" />
<stop offset="1" stop-color="#3C5A5E" />
</radialGradient>
</defs>
<title>模拟电影开场（或闭幕致谢）动画</title>
<g id="whole">
<g id="starContainer" />
<g id="sunGroup" filter="url(#glow)">
<circle id="sun" cx="640" cy="250" r="32.06" fill="#efe2df" />
</g>
<circle id="mainPlanet" cx="640" cy="352.25" r="154.25" fill="url(#planetGrad)" />
<circle id="sunGlow" fill="url(#sunGlowGrad)" cx="640" cy="212" r="200" opacity="0" />
<circle id="massivePlanet" fill="url(#massivePlanetGrad)" cx="640" cy="760" r="607.7" />
<circle id="lensFlare" fill="url(#lensFlareGrad)" cx="640" cy="383.9" r="80" opacity="0" />
<g id="mainTextGroup" fill="#EFE2DF" opacity="0">
<path d="M222.9,430.1v3.8h-34.1c6.7-6.1,12.4-13,17.6-20.4c2.5-3.6,7.3-11.3,7.3-18.7c0-7.3-6.4-11.5-11.9-11.5
c-5.1,0-8.6,2.7-12.2,5.9v-4.6c3.5-3,7.8-4.9,12.5-4.9c9.4,0,15.7,7.5,15.7,15.1c0,4.9-1.3,10.5-8,20.4c-3.5,5.2-7.7,10-11.7,14.9
H222.9z" />
<path d="M256.5,434.6c-16,0-28.3-12.2-28.3-27.5c0-14.5,11.2-27.4,28.4-27.4c17,0,28.3,12.8,28.3,27.2
C284.9,423,272,434.6,256.5,434.6z M256.7,383.7c-13.6,0-23.8,10.4-23.8,23.5c0,12.6,9.8,23.5,23.5,23.5c12.3,0,23.8-9.2,23.8-23.8
C280.3,394.7,270.6,383.7,256.7,383.7z" />
<path d="M319.2,434.6c-16,0-28.3-12.2-28.3-27.5c0-14.5,11.2-27.4,28.4-27.4c17,0,28.3,12.8,28.3,27.2
C347.6,423,334.7,434.6,319.2,434.6z M319.3,383.7c-13.6,0-23.8,10.4-23.8,23.5c0,12.6,9.8,23.5,23.5,23.5
c12.3,0,23.8-9.2,23.8-23.8C342.9,394.7,333.3,383.7,319.3,383.7z" />
<path d="M361.8,433.9h-4.1v-53.5h4.1V433.9z" />
<path d="M378.4,406.3h-5.1v-7.6h5.1V406.3z M378.4,433.9h-5.1v-7.6h5.1V433.9z" />
<path d="M470.2,433.9h-4.3l-8.5-18.5h-26.1l-8.5,18.5h-4.3l24.5-53.9h2.4L470.2,433.9z M444.4,386.8l-11.5,25.1h23
L444.4,386.8z" />
<path d="M515.3,380.4c6.2,0,9.4,0.2,12.8,1.7c4.8,2,7.8,6.7,7.8,12.1c0,7.8-5.6,10.7-7.7,11.9
c10,2.1,12.4,8.4,12.4,13.5c0,5.3-2.5,8.9-5.3,10.7c-4.9,3.1-8.2,3.6-14.4,3.6h-14v-53.5H515.3z M511.1,383.9v21.3h5
c4.4,0,15.3,0,15.3-10.7c0-3.5-1.6-6.8-4.2-8.4c-2.1-1.3-5.1-2.2-12.2-2.2H511.1z M511.1,408.6v21.8h9.3c4,0,15.7,0,15.7-10.9
c0-2.7-0.8-5.3-3.3-7.5c-2.7-2.5-6.2-3.4-14.3-3.4H511.1z" />
<path d="M558.1,433.9h-4.2v-53.5h4.2V433.9z" />
<path d="M619.7,389c-5.7-3.6-12.4-5.3-19.1-5.3c-11.7,0-23.3,8.5-23.3,23.6c0,14.7,11.6,23.6,23.1,23.6
c5.6,0,11-1.3,16.2-3.4V413h-11.3v-3.5h15.5V430c-6.4,2.9-13.3,4.5-20.2,4.5c-13.8,0-27.9-10.7-27.9-27.6
c0-15.3,11.8-27.3,28.7-27.3c8.1,0,14,2.7,18.4,4.5V389z" />
<path d="M699.3,383.9h-20v50h-4.2v-50H655v-3.5h44.3V383.9z" />
<path d="M755.2,433.9H751v-25.3h-35.8v25.3h-4.1v-53.5h4.1V405H751v-24.6h4.2V433.9z" />
<path d="M818.7,433.9h-4.3l-8.5-18.5h-26.1l-8.5,18.5H767l24.5-53.9h2.4L818.7,433.9z M792.8,386.8l-11.5,25.1h23
L792.8,386.8z" />
<path d="M878.8,433.9h-3.5l-40.6-47.1v47.1h-4.2v-53.5h3.8l40.2,46.7v-46.7h4.2V433.9z" />
<path d="M906.1,407.1l28,26.8h-5.3l-28.1-26.8v26.8h-4.1v-53.5h4.1v26.7l25.7-26.7h5.2L906.1,407.1z" />
<path d="M988.7,405.2v28.7h-4.2v-28.7l-20.7-24.8h5l17.8,21.2l17.9-21.2h5.1L988.7,405.2z" />
<path d="M1041.5,434.6c-16,0-28.3-12.2-28.3-27.5c0-14.5,11.2-27.4,28.4-27.4c17,0,28.3,12.8,28.3,27.2
C1069.9,423,1057,434.6,1041.5,434.6z M1041.6,383.7c-13.6,0-23.8,10.4-23.8,23.5c0,12.6,9.8,23.5,23.5,23.5
c12.3,0,23.8-9.2,23.8-23.8C1065.2,394.7,1055.6,383.7,1041.6,383.7z" />
<path d="M1127.8,407.4c0,7.6-0.5,12.5-3.8,17.6c-3.1,4.9-9.3,9.6-18.4,9.6c-6.8,0-14.8-2.7-18.7-9.5
c-3.8-6.6-3.9-11.1-3.9-17.7v-27h4.1v27.8c0,7.4,1.3,11.3,2.9,14.1c2.5,4.3,7.5,8.5,15.3,8.5c6.3,0,12.7-2.9,15.4-8.3
c2.4-4.7,3-8.9,3-14.3v-27.8h4.1V407.4z" />
</g>
</g>
</svg>
<p id="intro">LAUNCH</p>
<audio id="myAudio" src="media/movie_intro.mp3" />
<script src='js/TweenMax.min.js'></script>
<script>
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
sun = select('#sun'),
sunGlow = select('#sunGlow'),
sunGlowGrad = select('#sunGlowGrad'),
massivePlanet = select('#massivePlanet'),
massivePlanetGrad = select('#massivePlanetGrad'),
mainPlanet = select('#mainPlanet'),
starContainer = select('#starContainer'),
gradientAppear = select('#gradientAppear'),
glowBlur = select('#glowBlur'),
mainTextGroup = select('#mainTextGroup'),
codepenText = select('#codepenText'),
lensFlare = select('#lensFlare'),
chrisgannonPen = select('#chrisgannonPen'),
planetGrad = select('#planetGrad'),
audio = select('#myAudio');
TweenMax.set('svg', {
visibility: 'visible'
})
var tl = new TimelineMax({
paused: true
});
tl.from([massivePlanet, massivePlanetGrad], 7.2, {
attr: {
cy: 560
},
//fill:'#000',
ease: Linear.easeNone
})
.to(planetGrad, 3, {
attr: {
cy: 380
},
ease: Linear.easeNone
HTML5+svg实现很棒的模拟电影开场(或闭幕致谢)动画效果源码.zip
版权申诉
110 浏览量
2022-11-03
23:51:59
上传
评论
收藏 1.56MB ZIP 举报
HTML5+svg实现很棒的模拟电影开场(或闭幕致谢)动画效果源码.zip （4个子文件） 
132689862341235290 media 
movie_intro.mp3 1.53MB
index.html 9KB js jquery-1.11.1.min.js 94KB TweenMax.min.js 107KB资源评论
