gsap+svg实现投影幕布倒计时电影放映动画效果代码-html代码-BFW代码库

gsap+svg实现投影幕布倒计时电影放映动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现投影幕布倒计时电影放映动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body {
	background-color: #d7ecd0;
	overflow: hidden;
}

#projectionScreen {
	overflow:hidden;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
	visibility:hidden;
	opacity:0;
	position: absolute;
	top:50%;
	left:50%;
	}

</style>


</head>

<body>

<svg id="projectionScreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
    
<defs>
  <radialgradient id="filmGradient" cx="600" cy="450" r="340" gradientUnits="userSpaceOnUse">
    	<stop offset="0" stop-color="#e6e6e6"/>
    	<stop offset="0.1" stop-color="#d1d1d1"/>
	    <stop offset="1" stop-color="#1a1a1a"/>
  </radialgradient>
  
  <mask id="filmMask">
	<circle class="big" cx="600" cy="450" transform="rotate(-90 600 450)" r="250" stroke="#fff" stroke-width="500" fill="none" />
  </mask>
  
  <mask id="sockMask">
	<rect x="490" y="285.13" width="260" height="260" fill="#fff"/>
  </mask>
  
  <mask id="textMask">
	<rect x="213" y="585" width="774" height="130" fill="#fff"/>
  </mask>


</defs>
  
  
<title>Film Countdown</title>
<ellipse id="shadow" cx="600" cy="1080.97" rx="375" ry="13" fill="#111" opacity="0.15"/>

<g id="screenMaster&.........完整代码请登录后点击上方下载按钮下载查看