1.转动的花朵导航实现思路:用svg中的path标签通过贝塞尔曲线画出一朵花瓣,然后其他四朵花瓣逐个转动相对应的角度,同时在添加a链接,最后添加连续运动的动画属性: 1 <!DOCTYPE html> 2 <html lang="en"> ...
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 ="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='/images/loading.gif' data-original="js/jquery-1.7.2.min.js"></script> 7 <script src='/images/loading.gif' data-original="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 ="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>
一滴牛奶html+css
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 });
一滴牛奶nav.js
原标题:自编SVG小案例
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。