1.转动的花朵导航
实现思路:用svg中的path标签通过贝塞尔曲线画出一朵花瓣,然后其他四朵花瓣逐个转动相对应的角度,同时在添加a链接,最后添加连续运动的动画属性:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 svg{ 8 width: 100%; 9 height: 100%; 10 position: absolute; 11 top: 0; 12 left:0; 13 } 14 path{ 15 width: 100%; 16 fill:#F6E6CC; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="nav"> 22 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > 23 <g> 24 <a xlink:href="#home"> 25 <path d="M150 150 C200 360, 360 200, 150 150 Z" fill="#fff" /> 26 <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">home</text> 27 <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 150 150" to="360 150 150" repeatCount="indefinite"/> 28 </a> 29 </g> 30 <g> 31 <a xlink:href="#about"> 32 <path d="M150 150 C200 360, 360 200, 150 150 Z" fill="#fff" /> 33 <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">about</text> 34 </a> 35 <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-72 150 150" to="288 150 150" repeatCount="indefinite"/> 36 </g> 37 <g> 38 <a xlink:href="#skill"> 39 <path d="M150 150 C200 360, 360 200, 150 150 Z" fill="#fff" /> 40 <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">skill</text> 41 </a> 42 <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-144 150 150" to="216 150 150" repeatCount="indefinite"/> 43 </g> 44 <g> 45 <path d="M150 150 C200 360, 360 200, 150 150 Z" fill="#fff" /> 46 <a xlink:href="#portfolio"> 47 <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">portfolio</text> 48 </a> 49 <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-216 150 150" to="144 150 150" repeatCount="indefinite"/> 50 </g> 51 <g> 52 <a xlink:href="#contact"> 53 <path d="M150 150 C200 360, 360 200, 150 150 Z" fill="#fff" /> 54 <text x="170" y="210" transform="rotate(45 200 220)" style="fill:#000;font-size:16px;">contact</text> 55 </a> 56 <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="-288 150 150" to="72 150 150" repeatCount="indefinite"/> 57 </g> 58 </svg> 59 </div> 60 </svg> 61 </body> 62 </html>
2.一滴牛奶
实现思路:通过贝塞尔曲线绘画路径
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js/jquery-1.7.2.min.js"></script> 7 <script src="js/nav.js"></script> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 li{ 14 list-style: none; 15 } 16 /*svg样式*/ 17 #blob{ 18 width: 100%; 19 height: 100%; 20 position: absolute; 21 top: 0; 22 left:0; 23 } 24 #blob_path{ 25 width: 100%; 26 fill:#fff; 27 } 28 /*svg样式结束*/ 29 #nav{ 30 width: 100%; 31 height: 100%; 32 position: fixed; 33 background: #FED057; 34 } 35 h1{ 36 text-align: center; 37 margin-top: 200px; 38 color: #fff; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="nav"> 44 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="blob"> 45 <path id="blob_path" d="M0 0 H2000V0L0,0 Z" fill="#fff"/> 46 </svg> 47 <h1>点击网页预览效果</h1> 48 </div> 49 </body> 50 </html>
1 $(function(){ 2 var timer;//定时器 3 var target_c5_c6_y=0;//目标值 4 var current_c5_c6_y=50;//起始值 5 var target_c6_c9_x=0;//目标值 6 var current_c6_c9_x=50;//起始值 7 var target_c3_y=0;//目标值 8 var current_c3_y=50;//起始值 9 var target_c4_c7_y=0;//目标值 10 var current_c4_c7_y=50;//起始值 11 var target_c8_y=0;//起始值 12 var current_c8_y=50;//起始值 13 14 blob = $('#blob'), 15 blobPath = $('#blob_path'), 16 17 $('body').click(function(){ 18 svgCurve(270,200,80,150,80); 19 }); 20 //流体动画 21 function svgCurve(tar1,tar2,tar3,tar4,tar5){ 22 var newCurve; 23 target_c5_c6_y=tar1;//目标值 24 target_c6_c9_x=tar2;//目标值 25 target_c3_y=tar3;//目标值 26 target_c4_c7_y=tar4;//目标值 27 target_c8_y=tar5;//目标值 28 timer=setInterval(function(){ 29 current_c5_c6_y=current_c5_c6_y+(target_c5_c6_y-current_c5_c6_y)/5; 30 current_c6_c9_x=current_c6_c9_x+(target_c6_c9_x-current_c6_c9_x)/2; 31 current_c3_y=current_c3_y+(target_c3_y-current_c3_y)/2; 32 current_c4_c7_y=current_c4_c7_y+(target_c4_c7_y-current_c4_c7_y)/2; 33 current_c8_y=current_c8_y+(target_c8_y-current_c8_y)/2; 34 newCurve = "M0 0 C50 50,100 "+current_c3_y+" ,80 "+current_c4_c7_y+" C40 "+current_c5_c6_y+", "+current_c6_c9_x+" "+current_c5_c6_y+", 160 "+current_c4_c7_y+" C120 "+current_c8_y+","+current_c6_c9_x+" 0,2000 0 V0H0 Z"; 35 blobPath.attr('d', newCurve); 36 },80); 37 } 38 39 });