h5 macht Blumenanimationen zu Spezialeffekten
<html >
<Kopf>
<meta charset="UTF-8">
<title>html5 svg花朵动画特效 </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<style type="text/css">
.st0{fill:#F4EFF3;}
.st1{opacity:0.3;}
.st2{fill:#5C234E;}
.st3{fill:#883277;}
.st4{fill:none;Stroke:#007185;Stroke-width:6;Stroke-linecap:round;Stroke-Miterlimit:10;}
.st5{fill:#983D82;}
.st6{fill:#E5004E;}
.st7{fill:#EB584D;}
.st8{fill:#FFCE00;}
.st9{display:none;fill:#5C234E;Stroke:#5C234E;Stroke-Miterlimit:10;}
.st10{fill:none;Stroke:#5C234E;Stroke-width:3;Stroke-linecap:round;Stroke-miterlimit:10;}
.st11{fill:none;Stroke:#5C234E;Stroke-width:2;Stroke-linecap:round;Stroke-miterlimit:10;}
.st12{display:none;}
.st13{display:inline;fill:#5C234E;}
.st14{display:inline;fill:none;Stroke:#5C234E;Stroke-width:3;Stroke-linecap:round;Stroke-miterlimit:10;}
.st15 {Strichbreite:8;}
.st16{display:inline;fill:none;Stroke:#5C234E;Stroke-width:6;Stroke-miterlimit:10;}
.st18{fill:#007185;}
.st19{opacity:0.75;fill:#6AB187;}
.st17{opacity:0.5;fill:#FFFFFF;}
.st20{fill:#FBE1CB;}
.st21{fill:#e49a05; Deckkraft: 0,5. 🎜> .st22{fill:#A1408E;}
.st23{fill:#C88BBC;}
</style>
<defs>
</defs>
<g id="window_1_" class="st1">
<rect x="150.5" y="47.4" class="st20" width="301.8" height="479.4"/>
<path class="st23" d="M151.3,207.6c0,0,35.1-37.7,58.9-33.4c30.4,5.6,44.6,43.6,59.8,41.8c15.2-1.9,30-19.9,46.1- 21,4
s29.8,18.6,49.5,8.4c19.6-10.3,33.6-33.9,55.4-40.2c29.2-8.4,31.2,19.6,31.2,19.6v344.4c0,0-211.6,0.8-298.2,0
C133.9.526.6.151.3.207.6.151.3.207.6z"/>
<path class="st22" d="M150.5,352.7c0,0,22.3-52.7,83-52.7s64.8,32.2,112.5,26.4c30-3.7,73.2-43.4,106.2-26.4c0,41.1,0,226.8,0,226.8
H154L150.5,352.7z"/>
<g>
<path class="st2" d="M450.2,289.3v201H165.3V317v-27.7H450.2 M458.2,281.3h-8H165.3h-8v8V317v173.3v8h8h284.9h8v-8v-201V281.3
L458.2,281.3z"/>
</g>
<g>
<path class="st3" d="M443.6,282.9v201H158.6v-201H443.6 M463.6,262.9h-20H158.6h-20v20v201v20h20h284.9h20v-20v-201V262.9
L463,6,262,9z"/>
</g>
<g>
<path class="st2" d="M451.2,60.9v201H166.3v-201H451.2 M459.2,52.9h-8H166.3h-8v8v201v8h8h284.9h8v-8v-201V52.9L459.2,52.9z"/>
</g>
<g>
<path class="st3" d="M443.6,54.3v201H158.6v-201H443.6 M463,6,34,3h-20H158,6h-20v20v201v20h20h284,9h20v-20v-201V34,3L463,6,34,3
z"/>
</g>
<rect x="95.7" y="499.3" class="st2" width="409.8" height="45.3"/>
</g>
<path id="tige" class="st4 st15" d="M300.8,398.4c0,0,2.1-60.3,1.7-80.3c-0.5-23-6.2-92-6.2-92"/>
<path id="tige-3" class="st12" d="M298.1,398.4c0,0-2.1-60.3-1.7-80.3c0.5-23,6.2-92,6.2-92"/>
<path id="tige-2" class="st12" d="M300.5,399.8c3.1-5.4,9-15,12.1-20.3c5.5-9.6,9.2-23.4,8-34.4c-1.8 -15,6-12,5-28,4-21,5-41,2
c-5,9-8,5-20,9-19,3-21,3-32,7c-0,4-16,4,14,1-35,8,21,3-46,3"/>
<path id="tige-1" class="st12" d="M298.2,399.8c-3.1-5.4-9-15-12.1-20.3c-5.5-9.6-9.2-23.4-8-34.4c1.8 -15,6,12,5-28,4,21,5-41,2
c5,9-8,5,20,9-19,3,21,3-32,7c0,4-16,4-14,1-35,8-21,3-46,3"/>
<g id="pot">
<path id="bottom" class="st5" d="M269.9,499.3h59.6c6.1,0,11.3-4.4,12.3-10.4l11.6-71.6h-108l12.2,71.7
C258,7,495,263,9,499,3,269,9,499,3z"/>
<polygon id="shadow" class="st2" point="245,3,419,3 349,5,442 353,3,419,3 "/>
<path id="top" class="st5" d="M357.9,419.3H241c-4,0-7.2-3.2-7.2-7.2v-13.6c0-4,3.2-7.2,7.2-7.2h117c4,0, 7.2,3.2,7.2,7.2v13.6
C365.1,416.1,361,9,419,3,357,9,419,3z"/>
</g>
<g id="head">
<g>
<g>
<path class="st6" d="M333.1,185.3c-0.9-0.9-1.8-1.8-2.7-2.6c1.2-0.2,2.5-0.5,3.7-0.8c18.6-4.9,31.7-16.6, 29,2-26,3
c-2,5-9,7-19,6-13,6-38,2-8,7c-1,2,0,3-2,5,0,7-3,6,1,1c0,4-1,2,0,8-2,4,1,1-3,6c5,1-18,6,1,5-35,8-8,1 -38,5
c-9,6-2,7-21,5,10,3-26,6,28,9c-0,3,1,2-0,6,2,5-0,9,3,7c-0,8-0,9-1,7-1,9-2,6-2,8c-13,5-13,8-30,1-19,2-37,2 -12,2
c-7,1,7-1,9,23,8,11,5,37,6c0,9,0,9,1,8,1,8,2,7,2,6c-1,2,0,2-2,5,0,5-3,7,0,8c-18,6,4,9-31,7,16,6-29,2 ,26,3
c2,5,9,7,19,6,13,6,38,2,8,7c1,2-0,3,2,5-0,7,3,6-1,1c-0,4,1,2-0,8,2,4-1,1,3,6c-5,1,18,6-1,5,35,8,8,1 ,38,5
c9,6,2,7,21,5-10,3,26,6-28,9c0,3-1,2,0,6-2,5,0,9-3,7c0,8,0,9,1,7,1,9,2,6,2,8c13,5,13,8,30,1,19,2,37,2 ,12.2
C351,8,215,9,346,6,199,1,333,1,185,3z"/>
<path class="st7" d="M334,163.8c-1.2-0.3-2.5-0.6-3.7-0.8c0.9-0.9,1.8-1.7,2.7-2.7c13.3-14,18.2-30.9, 11,1-37,8
c-7,2-6,9-23,8-1,2-37,1,12,8c-0,9,0,9-1,7,1,9-2,5,2,8c-0,3-1,2-0,6-2,5-1-3,7c-5,4-18,5-17,5-31,3-27 -28,5
c-9,5,2,8-12,9,20,1-7,6,38,6c0,4,1,2,0,8,2,4,1,2,3,6c-1,2-0,4-2 .4-0,7-3,7-1c-18,7-4,6-35,7-0,4-38,1,9,3s10,8,21,3,29,5,25,9
c1.2,0.3,2.5,0.6,3.7,0.8c-0.9,0.9-1.8,1.7-2.7,2.7c-13.3,14-18.2,30.9-11.1,37.8c7.2,6.9,23.8,1.2,37.1 -12,8
c0,9-0,9,1,7-1,9,2,5-2,8c0,3,1,2,0,6,2,5,1,3,7c5,4,18,5,17,5,31,3,27,28,5c9,5-2,8,12,9-20,1,7,6 -38,6
c-0,4-1,2-0,8-2,4-1,2-3,6c1,2,0,4,2,4,0,7,3,7,1c18,7,4,6,3 5,7,0,4,38,1-9,3C365,8,180,352,6,168,4,334,163,8z"/>
</g>
<g id="face-group">
<g id="face">
<path id="mouth-crazy" class="st9" d="M315.3,179.2c0,11.9-8.6,21.6-19.2,21.6s-19.3-9.6-19.3-21.6L315.3,179.2z"/>
<path id="mouth-sexy" class="st2 st12" d="M310.2,192.5c-2.7,2.3-9.7,5.1-14.2,5.1c-4.4,0-11.5-2.8-14.2-5.1
c-0,6-0,5-0,6-1,4,0-1,9c2,6-2,1,9,4-6,7,14,1-1,4c4,7-5,2,11 .5-0,7,14,1,1,4C310,8,191,1,310,8,192,310,2,192,5z"/>
<path id="mouth-happy" class="st10" d="M307.5,188.6c0,5.1-5.1,9.3-11.4,9.3c-6.3,0-11.4-4.1-11.4-9.3"/>
<line id="mouth-cool" class="st10 st12" x1="286.6" y1="193.7" x2="305.2" y2="193.7"/>
<g id="eyes-crazy" class="st12">
<circle id="eye-left_7_" class="st2" cx="278.8" cy="163.3" r="6.2"/>
<circle id="eye-right_11_" class="st2" cx="312.3" cy="159.3" r="6.9"/>
</g>
<g id="eyes-sexy" class="st12">
<g id="eye-left_6_">
<path id="eye-right_10_" class="st10" d="M286.6,161.4c0,2.5-2.5,4.6-5.6,4.6c-1.5,0-2.9-0.5-3.9-1.2c-1.1-0.8 -1,8-2-1,8-3,4"
/>
<line class="st11" x1="274.1" y1="167.2" x2="276.4" y2="164.7"/>
<line class="st11" x1="280.7" y1="169.6" x2="280.9" y2="166.2"/>
<line class="st11" x1="287.9" y1="167.1" x2="285.5" y2="164.7"/>
</g>
<g id="eye-right_8_">
<path id="eye-right_9_" class="st10" d="M316.4,161.5c0,2.5-2.5,4.6-5.6,4.6c-1.5,0-2.9-0.5-3.9-1.2c-1.1-0.8 -1,8-2-1,8-3,4"
/>
<line class="st11" x1="303.9" y1="167.2" x2="306.3" y2="164.7"/>
<line class="st11" x1="310.6" y1="169.7" x2="310.8" y2="166.3"/>
<line class="st11" x1="317.7" y1="167.2" x2="315.3" y2="164.8"/>
</g>
</g>
<g id="eyes-happy" class="st10">
<path id="eye-left_5_" d="M305.1,166.1c0-2.5,2.5-4.6,5.6-4.6c3.1,0,5.7,2.1,5.7,4.6"/>
<path id="eye-right_7_" d="M275.4,166.1c0-2.5,2.5-4.6,5.6-4.6s5.7,2.1,5.7,4.6"/>
</g>
<g id="cheeks" class="st19">
<circle class="st7" cx="274.6" cy="178.6" r="6.4"/>
<circle class="st7" cx="316.7" cy="178.6" r="6.4"/>
</g>
</g>
<g id="glasses" class="st2 st12">
<g>
<path class="st2" d="M311.7,179.8h6.6c6.9,0,12.5-5.6,12.5-12.5v-6.2c0-4.2-3.4-7.6-7.6-7.6h-15.4c-4.7,0-8.6,3.9-8.6, 8.6v5.3
C299.2,174.2,304.8,179.8,311.7,179.8z"/>
<path class="st2" d="M279.7,179.8h-6.6c-6.9,0-12.5-5.6-12.5-12.5v-6.2c0-4.2,3.4-7.6,7.6-7.6h15.4c4.7,0,8.6,3.9,8.6, 8.6v5.3
C292.2,174.2,286.6,179.8,279.7,179.8z"/>
<path class="st16" d="M289.8,164.2c0,0,4.3-0.8,5.8-0.8s5.8,0.8,5.8,0.8"/>
<path class="st17" d="M322.4,159.4L322.4,159.4c-1-1-2.7-1-3.7,0l-10.7,10.7c-1,1-1,2.7,0,3.7v0c1,1 ,2,7,1,3,7,0l10,7-10,7
C323.4,162.1,323.4,160.4,322.4,159.4z"/>
<path class="st17" d="M284.6,165.7L284.6,165.7c-0.9-0.9-2.3-0.9-3.1,0l-5.8,5.8c-0.9,0.9-0.9,2.3,0,3.1l0,0
c0.9,0.9,2.3,0.9,3.1,0l5.8-5.8C285.5,168,285.5,166.6,284.6,165.7z"/>
<path class="st17" d="M280.8,157.6L280.8,157.6c-1-1-2.7-1-3.7,0l-10.7,10.7c-1,1-1,2.7,0,3.7l0,0c1,1,2.7,1,3.7 ,0l10,7-10,7
C281.9,160.3,281.9,158.6,280.8,157.6z"/>
</g>
<path class="st10" d="M289.6,164.2c0,0,4.3-0.8,5.8-0.8c1.5,0,5.8,0.8,5.8,0.8"/>
</g>
<path id="shadow" class="st21" d="M320.8,145.3c-0.3-0.3-0.7-0.6-1-0.9c13.9,14,14.9,36.6,1.8,51.8
c-13,5,15,7-36,9,17,7-52,9,4,9c0,7,0,7,1,4,1,4,2,2,2,1c16,13 .8,40.1,12,53.9-4C338.6,183.2,336.8,159,320.8,145.3z"/>
</g>
</g>
</g>
<g id="leaf-group-1">
<line id="leaf-stem-1" class="st4" x1="300" y1="366" x2="289" y2="360" />
<g id="leaf-1">
<path class="st18" d="M224.7,331.3c0,0,22.5-9.6,43.5-3.4c17.6,5.2,28,20.1,24.1,30.5c-3.9,10.4-22,15.8-38.2, 7.1
C234.6,355.1,224.7,331.3,224.7,331.3z"/>
<path class="st19" d="M288.1,359.2c0,0-3.1-2-7.9-5c-1.2-0.7-2.5-1.5-3.8-2.3c-1.4-0.8-2.8-1.7-4.3-2.5c-1.5-0.9-3.1- 1,7-4,7-2,6
c-1,6-0,9-3,3-1,7-4,9-2,4c-0,8-0,4-1,7-0,8-2,5-1,1c-0,8-0,3-1. 7-0,7-2,5-1c-1,7-0,6-3,4-1,3-5-1,8c-1,6-0,5-3,2-1,1-4,8-1,5
c-1,5-0,5-3-0,9-4,3-1,3c-5,4-1,6-9-2,6-9-2,6s0,2,0,0,7,0,1c0,4,0,1,1,1,0,1,1,9,0,2c1. 6,0.2,3.9,0.6,6.7,1.2
c1.4,0.3,2.9,0.6,4.4,1c1.6,0.4,3.2,0.8,4.9,1.3c1.7,0.5,3.4 ,1,5.2,1.7c0.9,0.3,1.8,0.7,2.6,1c0.9,0.4,1.7,0.7,2.6,1.1
c1,7,0,8,3,4,1,7,5,2,6c1,6,0,9,3,2,1,8,4,7,2,8c3,1,9,5,7,3,8,7,9,5,4C285,4,356,6,288,1,359,2,288,1,359,2z" />
</g>
</g>
<g id="leaf-group-2">
<line id="leaf-stem-2" class="st4" x1="300" y1="293.8" x2="287.2" y2="287"/>
<g id="leaf-2">
<path class="st18" d="M224.1,259.6c0,0,22.7-9.3,43.5-2.9c17.6,5.4,27.8,20.5,23.7,30.8c-4,10.3-22.2,15.5-38.3, 6,6
C233.7,283,6,224,1,259,6,224,1,259,6z"/>
<path class="st19" d="M287.5,287.2c0,0-3.2-1.9-8.1-4.7c-1.2-0.7-2.5-1.4-3.9-2.2c-1.4-0.8-2.9-1.5-4.4- 2.4
c-1,5-0,8-3,2-1,6-4,8-2,4c-1,6-0,8-3,3-1,5-5-2,3c-0,8-0,3-1,7- 0,7-2,6-1c-0,9-0,3-1,7-0,6-2,6-0,9c-1,7-0,6-3,4-1,1-5,1-1,6
c-1,7-0,5-3,3-0,9-4,8-1,4c-1,5-0,4-3-0,8-4,4-1,1c-5,4-1,4-9,1-2,3-9,1-2,3s0,2,0,0,7,0,1c0. 4,0,1.1,0.1,1.9,0.2
c1.6,0.2,4,0.4,6.7,0.9c1.4,0.2,2.9,0.5,4.5,0.8c1.6,0.3,3.2,0 .7,4.9,1.1c1.7,0.4,3.5,0.9,5.2,1.5c0.9,0.3,1.8,0.6,2.7,0.9
c0.9,0.3,1.7,0.7,2.6,1c1.7,0.8,3.4,1.5,5.1,2.4c1.7,0.8,3.2,1.7,4.8,2.6c3.1,1.7,5.8,3.5,8.1, 5.1
C284.7,284,7,287,5,287,2,287,5,287,2z"/>
</g>
</g>
<g id="leaf-group-3">
<line id="leaf-stem-3" class="st4" x1="301.5" y1="287.1" x2="313.3" y2="278.1"/>
<g id="leaf-3">
<path class="st18" d="M377.7,249.2c0,0-8.7,22.9-27.7,33.7c-16,9.1-33.9,6.2-38.7-3.8c-4.8-10,3.9-26.8,21.4- 32,5
C353,6,239,8,377,7,249,2,377,7,249,2z"/>
<path class="st19" d="M368.4,252.7c0,0-3.6,1-9,2.6c-1.3,0.4-2.8,0.9-4.3,1.3c-1.5,0.5-3.1,1-4.8,1.6c-1.6,0.6-3.3 ,1,2-5,1,8
c-1,7,0,6-3,4,1,3-5,1,2,1c-0,8,0,4-1,7,0,8-2,5,1,2c-0,8,0,4-1,6,0,8-2,4,1,2c-1,6,0,9-3,2,1,7-4,7 ,2,6
c-1,5,0,9-2,9,1,7-4,3,2,6c-1,4,0,8-2,6,1,6-3,8,2,4c-4,7,3-7,9,5-7,9,5s0,2-0,2,0,5-0,4c0,3 -0,3,0,8-0,7,1,4-1,3
c1.2-1.1,3-2.6,5.3-4.3c1.1-0.9,2.3-1.8,3.7-2.7c1.3-0.9,2.7- 1,9,4,2-2,8c1,5-0,9,3-1,9,4,7-2,8c0,8-0,5,1,7-0,9,2,5-1,3
c0,9-0,4,1,7-0,8,2,5-1,2c1,7-0,7,3,5-1,4,5,2-2,1c1,7-0,6,3,5-1,2,5,2-1,7c3,4-1,6,6-1,8,9,3 -2,4
C364.7,253,368,4,252,7,368,4,252,7z"/>
</g>
</g>
<g id="leaf-group-4">
<line id="leaf-stem-4" class="st4" x1="303" y1="358.1" x2="312.6" y2="351.2"/>
<g id="leaf-4">
<path class="st18" d="M378.2,317.7c0,0-7.7,23.2-26.2,34.9c-15.6,9.8-33.6,7.7-38.8-2.1s2.7-26.9,20-33.4
C353.8.309.3.378.2.317.7.378.2.317.7z"/>
<path class="st19" d="M369.2,323.2c0,0-3.6,1.1-8.9,2.8c-1.3,0.4-2.8,0.9-4.3,1.4c-1.5,0.5-3.1,1.1-4.7,1.7c-1.6,0.6-3.3 ,1,3-5,2
c-1,7,0,7-3,4,1,4-5,2,2c-0,8,0,4-1,7,0,8-2,5,1,2c-0,8,0,4-1,6,0 .8-2,4,1,3c-1,6,0,9-3,1,1,8-4,6,2,7c-1,5,0,9-2,9,1,8-4,2,2,7
c-1,3,0,9-2,6,1,7-3,8,2,5c-4,6,3,1-7,7,5,2-7,7,5,2s0,2-0. 2,0,5-0,5c0,3-0,3,0,8-0,7,1,4-1,3c1,2-1,1,3-2,6,5,2-4,4
c1,1-0,9,2,3-1,8,3,6-2,8c1,3-1,2,7-2,4,1-2,9c1,5-1,3-2,4,6-2,9c0,8-0,5,1,6-0,9,2,5 -1,4c0,8-0,5,1,6-0,8,2,5-1,3
c1,7-0,8,3,5-1,5,5,2-2,2c1,7-0,7,3,4-1,3,5,1-1,8c3,3-1,1,6. 5-1,9,9,2-2,6C365,5,323,6,369,2,323,2,369,2,323,2z"/>
</g>
</g>
</svg>
<div class="buttons">
<button id="btn-happy">Happy</button>
<button id="btn-crazy">Verrückt</button>
<button id="btn-sexy">Sexy</button>
<button id="btn-cool">Cool</button>
</div>
</div>
<script type="text/javascript" src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
Dies ist ein h5-Blumenanimations-Spezialeffekt. Freunde, die ihn benötigen, können ihn direkt auf der chinesischen PHP-Website herunterladen.
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
09 Oct 2016
Verschiedene Spezialeffekte des Filters in CSS3
14 Oct 2016
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
04 Aug 2016
Ich habe einige gut aussehende Websites gesehen und wollte wissen, wie ihre Animationen und Spezialeffekte erstellt wurden. Gibt es eine Software oder ein Plug-in, das die gesamte URL einschließlich JS- und CSS-Stilen extrahieren kann?
23 Nov 2024
Kreise mit HTML5 und CSS3 zeichnenDiese Frage untersucht die Möglichkeit, Kreise mit HTML5 und CSS3 zu zeichnen. Können HTML5 und CSS3 ... erstellen?
23 Nov 2024
Videoquellen in HTML5 dynamisch ändernProblembeschreibungBeim Versuch, Videoquellen in einem HTML5-Tag dynamisch zu ändern...
31 Oct 2024
HTML5-Tabellenattribute Die HTML5-Validierungsfunktion von TransitionVisual Studio identifiziert Cellpadding-, Cellspacing-, Valign- und Align-Attribute als ...
Hot Tools
HTML5-Canvas-Herzflattern-Animations-Spezialeffekte
Der HTML5 Canvas-Spezialeffekt „Herzflattern-Animation“ ist eine generierte Animation, die direkt mit einem Browser geöffnet werden kann, um ein Herz zu sehen.
Quellcode des H5-Panda-Bounce-Spiels
HTML5 Mobile Panda ist auch ein verrückter Spielquellcode. Spielbeschreibung: Halten Sie den Bildschirm gedrückt, um die Stärke der Panda-Feder anzupassen und zur Steinsäule zu springen. Das Spiel endet, wenn Sie in den Fluss fallen.
HTML5-Valentinstag-Box-Animations-Spezialeffekte
Zeichnen Sie basierend auf SVG Animationen zum Öffnen von Liebesbox-Geschenken am Valentinstag und Spezialeffekte für Liebesbox-Animationen.
Quellcode des H5 3D Rolling Ball-Spiels
HTML5 cooler 3D-Ball-Rolling-Handyspielcode herunterladen. Spieleinführung: Ein farbiger Ball rollt und die aktuelle Bahn des farbigen Balls wird durch Ziehen mit der Maus oder dem Touchscreen des Mobiltelefons gesteuert. Dies ist ein einfacher und leicht zu bedienender Quellcode für Mobilspiele.