实现思路:用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>