TweenMax+MorphSVGPlugin+svg实现寿司开关点击效果代码

代码语言:html

所属分类:表单美化

代码描述:TweenMax+MorphSVGPlugin+svg实现寿司开关点击效果代码

代码标签: TweenMax MorphSVGPlugin svg 寿司 开关 点击

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


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

<head>

 
<meta charset="UTF-8">
 

 
 
 
<style>
body
{
 
background-color:#0CB2E3;
 
overflow: hidden;
 
text-align:center;
}

body
,
html
{
 
height: 100%;
 
width: 100%;
 
margin: 0;
 
padding: 0;
}


svg
{
 
 
width:100%;
 
height:100%;
 
visibility:hidden;
 
-webkit-tap-highlight-color:transparent;
}

.hit{

 
cursor:pointer;
 
-webkit-tap-highlight-color:transparent;
}


.shadow{
 
mix-blend-mode:multiply;
}
</style>



</head>

<body >
 
<svg class="sushiSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
 
<defs>
   
<clipPath id="salmonMask">
     
<rect class="salmonMask" x="261.5" y="246" width="101" height="106" rx="20" ry="20" fill="red"/>
   
</clipPath>
 
</defs>

 
<!-- <rect width="100%" height="100%" fill="#0CB2E3"/> -->
<path class="shadow" d="M943.5,583c0,18.26,2,94.51-.7,113.64C937.94,731,908.27,755.12,874.26,756c-10.49.27-196.39,.........完整代码请登录后点击上方下载按钮下载查看

网友评论0