纯CSS动画,心形齿轮!

常规特效
常规特效 发布于 2017-01-11 21:44:44 浏览:778 类型:原创 - 随笔 分类:HTML/CSS - web前端 二维码: 作者原创 版权保护
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
body {
  display: flex;
  justify-content: center;
  margin: 0;
  height: 100vh;
  background: #000;
}

svg {
  align-self: center;
  width: 100vmin;
  height: 100vmin;
  box-shadow: inset 0 0 0 0.125em #000;
  background: radial-gradient(#000000 14%, rgba(0, 0, 0, 0) 17%), radial-gradient(#000000 14%, rgba(0, 0, 0, 0) 17%) 0.75em 0.75em, radial-gradient(#999999 15%, rgba(0, 0, 0, 0) 20%) 0 0.075em, radial-gradient(#999999 15%, rgba(0, 0, 0, 0) 20%) 0.75em 0.825em #666;
  background-size: 1.5em 1.5em;
}

.pos:nth-child(1) polygon {
  fill: #fbd047;
  animation-duration: 8s;
  animation-direction: normal;
}
.pos:nth-child(1) circle {
  fill: #d7a505;
}

.pos:nth-child(2) polygon {
  fill: #fb7c6d;
  animation-duration: 6.5s;
  animation-direction: reverse;
}
.pos:nth-child(2) circle {
  fill: #f8230a;
}

.pos:nth-child(3) polygon {
  fill: #f561ca;
  animation-duration: 6s;
  animation-direction: normal;
}
.pos:nth-child(3) circle {
  fill: #e20ea4;
}

.pos:nth-child(4) polygon {
  fill: #dd7aef;
  animation-duration: 4.5s;
  animation-direction: reverse;
}
.pos:nth-child(4) circle {
  fill: #c61fe4;
}

.pos:nth-child(5) polygon {
  fill: #c4a6dd;
  animation-duration: 4s;
  animation-direction: normal;
}
.pos:nth-child(5) circle {
  fill: #935cc1;
}

.pos:nth-child(6) polygon {
  fill: #62b6f2;
  animation-duration: 13.74687s;
  animation-direction: normal;
}
.pos:nth-child(6) circle {
  fill: #1288dc;
}

.pos:nth-child(7) polygon {
  fill: #84d2ba;
  animation-duration: 8.83728s;
  animation-direction: reverse;
}
.pos:nth-child(7) circle {
  fill: #40b08d;
}

.pos:nth-child(8) polygon {
  fill: #b8ed83;
  animation-duration: 14.72879s;
  animation-direction: normal;
}
.pos:nth-child(8) circle {
  fill: #85e02a;
}

polygon {
  animation: r 0s linear infinite;
}

@keyframes r {
  to {
    transform: rotate(1turn);
  }
}
.pos path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

mask .w {
  fill: #fff;
}

.cover {
  fill: #000;
}

  </style>
 </head>
 <body>
  
<svg viewBox="-1250 -1250 2500 2500">
  <g class="train">
    <g transform="translate(-625 -312.5)rotate(0)" class="pos">
      <polygon points="253.82925969022156,-20.000000000000004 253.82925969022156,20.000000000000004 301.89307210030245,39.65844250282257 294.08945921965733,78.88985371895178 242.16132642758967,78.65866168271796 226.85398913298607,115.61384298316945 263.7362014211899,152.16910035821869 241.5133921004058,185.42788485032054 193.6265264142478,165.34225516678586 165.3422551667859,193.62652641424776 185.42788485032054,241.51339210040575 152.1691003582187,263.7362014211899 115.61384298316946,226.85398913298607 78.65866168271796,242.16132642758967 78.88985371895181,294.0894592196573 39.65844250282258,301.89307210030245 20.000000000000032,253.82925969022156 -20,253.82925969022156 -39.65844250282254,301.89307210030245 -78.88985371895178,294.08945921965733 -78.65866168271793,242.1613264275897 -115.61384298316943,226.8539891329861 -152.16910035821869,263.7362014211899 -185.4278848503204,241.5133921004059 -165.34225516678586,193.6265264142478 -193.62652641424776,165.3422551667859 -241.51339210040587,185.42788485032045 -263.7362014211899,152.1691003582187 -226.85398913298607,115.61384298316948 -242.16132642758967,78.65866168271799 -294.0894592196573,78.88985371895183 -301.8930721003024,39.65844250282273 -253.82925969022153,20.000000000000046 -253.82925969022156,-19.999999999999986 -301.8930721003024,-39.65844250282265 -294.08945921965733,-78.88985371895177 -242.1613264275897,-78.65866168271792 -226.8539891329861,-115.61384298316942 -263.7362014211899,-152.16910035821866 -241.5133921004059,-185.4278848503204 -193.6265264142478,-165.34225516678586 -165.342255166786,-193.62652641424768 -185.42788485032048,-241.51339210040584 -152.16910035821874,-263.7362014211899 -115.61384298316949,-226.85398913298607 -78.6586616827182,-242.16132642758961 -78.88985371895184,-294.0894592196573 -39.658442502822744,-301.8930721003024 -19.99999999999995,-253.82925969022156 19.999999999999854,-253.82925969022156 39.65844250282264,-301.89307210030245 78.88985371895174,-294.08945921965733 78.65866168271812,-242.16132642758964 115.6138429831694,-226.8539891329861 152.16910035821863,-263.73620142118995 185.42788485032037,-241.5133921004059 165.34225516678592,-193.62652641424773 193.62652641424768,-165.342255166786 241.51339210040584,-185.42788485032048 263.7362014211899,-152.16910035821877 226.85398913298604,-115.6138429831695 242.1613264275896,-78.65866168271822 294.0894592196573,-78.88985371895187 301.8930721003024,-39.658442502822766"></polygon>
    </g>
    <g transform="translate(-339.9522812544588 114.10405850922842)rotate(236.25)" class="pos">
      <polygon points="205.89352386246233,-20 205.89352386246233,20 253.24403641232715,41.82049230150814 243.67140984082482,80.65816499855023 191.6041247878656,77.97437099956865 173.01519790611488,113.39261202569703 204.8015061632471,154.71857880685835 178.2765998336153,184.6590087337024 133.420529804388,158.08575329617392 100.50117516864175,180.80834316542013 109.44141897787321,232.17250346855934 72.04076927045658,246.35669895026078 44.67189933441247,201.98159465247934 4.963544370490299,206.80306186269226 -10.990378383256358,256.438505567595 -50.69873334717856,251.61703835738206 -54.31052491832974,199.60588681599003 -91.7111746257463,185.42169133428865 -128.9044125051995,221.95753646010297 -161.8237671409457,199.2349465908568 -140.85106242506018,151.5028758216627 -167.37596875469202,121.56244589481867 -217.28799918877536,136.62877062788547 -235.87692607052605,101.21052960175714 -195.1243189695222,68.69238178417241 -204.69694554102455,29.854709087130324 -255.89352386246236,20 -255.89352386246236,-19.999999999999932 -204.69694554102455,-29.854709087130185 -195.12431896952225,-68.69238178417228 -235.87692607052608,-101.21052960175709 -217.2879991887754,-136.62877062788542 -167.37596875469208,-121.56244589481855 -140.8510624250603,-151.5028758216626 -161.82376714094585,-199.23494659085668 -128.90441250519947,-221.957536460103 -91.71117462574634,-185.42169133428862 -54.31052491832992,-199.60588681599 -50.69873334717879,-251.617038357382 -10.990378383256477,-256.438505567595 4.963544370490202,-206.80306186269226 44.671899334412196,-201.98159465247937 72.04076927045647,-246.3566989502608 109.44141897787321,-232.17250346855934 100.50117516864175,-180.80834316542015 133.42052980438788,-158.08575329617403 178.27659983361514,-184.65900873370256 204.80150616324707,-154.7185788068584 173.01519790611482,-113.3926120256971 191.60412478786552,-77.97437099956886 243.67140984082474,-80.65816499855053 253.24403641232712,-41.8204923015083"></polygon>
    </g>
    <g transform="translate(-90.0918655217863 488.04659655674084)rotate(596.25)" class="pos">
      <polygon points="189.89385281812878,-20 189.89385281812878,20 236.8960489070696,42.77058138657138 226.54328710296875,81.40761443813412 174.45290056300274,77.62641833337561 154.45290056300274,112.26743448475317 183.77270571639738,155.48843446893548 155.48843446893548,183.77270571639735 112.26743448475317,154.45290056300274 77.62641833337565,174.45290056300271 81.40761443813419,226.54328710296875 42.77058138657141,236.8960489070696 20.000000000000004,189.89385281812878 -19.99999999999998,189.89385281812878 -42.77058138657133,236.89604890706963 -81.4076144381341,226.54328710296878 -77.6264183333756,174.45290056300277 -112.26743448475312,154.4529005630028 -155.48843446893545,183.7727057163974 -183.77270571639738,155.48843446893548 -154.45290056300271,112.26743448475321 -174.45290056300271,77.6264183333757 -226.54328710296872,81.4076144381342 -236.8960489070696,42.77058138657143 -189.89385281812878,20.000000000000014 -189.8938528181288,-19.999999999999964 -236.89604890706963,-42.770581386571266 -226.54328710296878,-81.40761443813405 -174.45290056300277,-77.62641833337558 -154.4529005630028,-112.26743448475311 -183.7727057163975,-155.48843446893537 -155.48843446893557,-183.7727057163973 -112.26743448475324,-154.45290056300271 -77.62641833337571,-174.45290056300271 -81.40761443813422,-226.54328710296872 -42.77058138657165,-236.89604890706954 -20.000000000000025,-189.89385281812878 19.999999999999954,-189.8938528181288 42.77058138657136,-236.8960489070696 81.40761443813392,-226.54328710296883 77.6264183333755,-174.4529005630028 112.26743448475304,-154.45290056300286 155.48843446893548,-183.77270571639735 183.77270571639727,-155.48843446893557 154.45290056300271,-112.26743448475324 174.45290056300271,-77.62641833337572 226.54328710296872,-81.40761443813423 236.89604890706954,-42.77058138657166"></polygon>
    </g>
    <g transform="translate(276.0902578865493 363.7445152461468)rotate(881.25)" class="pos">
      <polygon points="141.78204549044273,-20 141.78204549044273,20 187.0565758131098,46.79947027021297 173.37577008008304,84.38717510164929 121.4671002757266,75.8148532548903 95.75559588826503,106.4566309796494 113.21153082091017,156.08812338446623 78.5705146695326,176.08812338446623 44.31634888554938,136.15509408357894 4.924038765061038,143.10102119025618 -13.606447648407537,192.34140884086656 -52.99875776889587,185.39548173418936 -53.57051466953255,132.78685319524433 -88.21153082091008,112.78685319524433 -134.05781804421392,138.5960114639764 -159.76932243167545,107.95423373921733 -126.39113904078764,67.28616793536587 -140.07194477381438,29.698463103929576 -191.7820454904427,19.99999999999999 -191.78204549044273,-19.99999999999994 -140.07194477381438,-29.698463103929544 -126.39113904078765,-67.28616793536584 -159.76932243167548,-107.95423373921729 -134.05781804421395,-138.59601146397634 -88.21153082091021,-112.78685319524425 -53.57051466953261,-132.7868531952443 -52.99875776889584,-185.39548173418936 -13.606447648407585,-192.34140884086656 4.9240387650609385,-143.10102119025618 44.316348885549345,-136.15509408357897 78.57051466953263,-176.08812338446623 113.21153082091013,-156.08812338446626 95.75559588826495,-106.45663097964947 121.4671002757266,-75.8148532548903 173.37577008008302,-84.3871751016494 187.05657581310976,-46.79947027021314"></polygon>
    </g>
    <g transform="translate(444.10323795305123 86.86769319232741)rotate(1201.25)" class="pos">
      <polygon points="125.68348730314621,-19.999999999999996 125.68348730314621,19.999999999999996 169.96404676688508,48.75356928081092 154.65670947228148,85.70875058126238 103.01378177895897,74.72951053149707 74.72951053149708,103.01378177895897 85.70875058126241,154.65670947228148 48.753569280810915,169.96404676688508 20,125.68348730314621 -19.999999999999986,125.68348730314621 -48.75356928081089,169.9640467668851 -85.70875058126235,154.6567094722815 -74.72951053149707,103.01378177895897 -103.01378177895897,74.72951053149708 -154.65670947228148,85.70875058126238 -169.96404676688508,48.753569280810964 -125.6834873031462,20.000000000000007 -125.68348730314621,-19.99999999999998 -169.96404676688508,-48.753569280810915 -154.6567094722815,-85.70875058126235 -103.01378177895899,-74.72951053149706 -74.72951053149704,-103.013781778959 -85.70875058126246,-154.65670947228145 -48.75356928081104,-169.96404676688505 -20.00000000000007,-125.6834873031462 20.000000000000025,-125.6834873031462 48.753569280810986,-169.96404676688505 85.70875058126241,-154.65670947228148 74.72951053149701,-103.01378177895901 103.01378177895899,-74.72951053149706 154.65670947228145,-85.70875058126248 169.96404676688505,-48.75356928081105"></polygon>
      <circle r="62.693865604121925"></circle>
    </g>
    <g transform="translate(695.4666458960577 -348.5065005286219)rotate(0)" class="pos">
      <polygon points="221.8811368742439,-19.999999999999996 221.8811368742439,19.999999999999996 269.51492781355347,41.00068625872483 260.6140904553009,79.99780274599777 208.58567148084043,78.25123994860327 191.2303219161381,114.28999466470002 225.0350283346581,153.8784865094889 200.09543626030876,185.15174580821014 153.97725571527346,161.0038621369073 122.7039964165523,185.9434542112566 135.98418162057794,236.278765311259 99.94542690448117,253.63411487596133 68.87175604818206,211.8676948462098 29.874639560909138,220.76853220446236 20.000000000000032,271.8811368742439 -19.999999999999996,271.8811368742439 -29.874639560909106,220.76853220446236 -68.87175604818204,211.8676948462098 -99.94542690448114,253.63411487596136 -135.9841816205779,236.27876531125904 -122.70399641655223,185.94345421125666 -153.9772557152735,161.0038621369073 -200.09543626030873,185.15174580821017 -225.0350283346581,153.87848650948894 -191.23032191613805,114.28999466470009 -208.58567148084043,78.25123994860326 -260.6140904553009,79.99780274599782 -269.51492781355347,41.00068625872485 -221.8811368742439,20.000000000000068 -221.8811368742439,-20.000000000000018 -269.5149278135535,-41.00068625872478 -260.6140904553009,-79.99780274599776 -208.58567148084046,-78.2512399486032 -191.23032191613808,-114.28999466470005 -225.03502833465814,-153.87848650948888 -200.09543626030876,-185.15174580821014 -153.97725571527351,-161.00386213690723 -122.70399641655237,-185.94345421125658 -135.98418162057789,-236.27876531125904 -99.94542690448131,-253.63411487596127 -68.87175604818205,-211.8676948462098 -29.874639560909213,-220.76853220446233 -19.99999999999994,-271.8811368742439 19.999999999999844,-271.8811368742439 29.87463956090913,-220.76853220446236 68.87175604818196,-211.86769484620982 99.94542690448121,-253.63411487596133 135.9841816205778,-236.2787653112591 122.7039964165523,-185.94345421125664 153.9772557152734,-161.00386213690737 200.0954362603088,-185.15174580821008 225.035028334658,-153.87848650948908 191.2303219161381,-114.28999466470005 208.58567148084038,-78.25123994860337 260.6140904553009,-79.99780274599775 269.51492781355347,-41.000686258725"></polygon>
      <circle r="123.12066851483469"></circle>
      <path d="M14.798869158131383,-122.22803478408836A123.12066851483469 123.12066851483469 0 1 0 14.798869158131383 122.22803478408836L495.1911330044576 62.23933055469297A62.693865604121925 62.693865604121925 0 1 0 495.1911330044576 -62.23933055469297z" transform="rotate(120)"></path>
    </g>
    <g transform="translate(368.393638670191 -609.3385200129926)rotate(38.571428571428555)" class="pos">
      <polygon points="141.78204549044273,-20 141.78204549044273,20 187.0565758131098,46.79947027021297 173.37577008008304,84.38717510164929 121.4671002757266,75.8148532548903 95.75559588826503,106.4566309796494 113.21153082091017,156.08812338446623 78.5705146695326,176.08812338446623 44.31634888554938,136.15509408357894 4.924038765061038,143.10102119025618 -13.606447648407537,192.34140884086656 -52.99875776889587,185.39548173418936 -53.57051466953255,132.78685319524433 -88.21153082091008,112.78685319524433 -134.05781804421392,138.5960114639764 -159.76932243167545,107.95423373921733 -126.39113904078764,67.28616793536587 -140.07194477381438,29.698463103929576 -191.7820454904427,19.99999999999999 -191.78204549044273,-19.99999999999994 -140.07194477381438,-29.698463103929544 -126.39113904078765,-67.28616793536584 -159.76932243167548,-107.95423373921729 -134.05781804421395,-138.59601146397634 -88.21153082091021,-112.78685319524425 -53.57051466953261,-132.7868531952443 -52.99875776889584,-185.39548173418936 -13.606447648407585,-192.34140884086656 4.9240387650609385,-143.10102119025618 44.316348885549345,-136.15509408357897 78.57051466953263,-176.08812338446623 113.21153082091013,-156.08812338446626 95.75559588826495,-106.45663097964947 121.4671002757266,-75.8148532548903 173.37577008008302,-84.3871751016494 187.05657581310976,-46.79947027021314"></polygon>
    </g>
    <g transform="translate(42.84965276149603 -322.04424784665645)rotate(318.57142857142856)" class="pos">
      <polygon points="237.85911135556464,-19.999999999999996 237.85911135556464,19.999999999999996 285.72693293816616,40.286322544557 277.41046530545583,79.41222657390924 225.42984359929767,78.47510732490328 209.16037787626567,115.0169256306073 244.6386181181717,153.01900050531876 221.1272080264728,185.37968028031665 174.02170791887605,163.38115566936196 144.29591489978026,190.14637992371632 161.25006375347115,239.2933031447326 126.60904760209361,259.2933031447326 92.52363800169557,220.03711792738537 54.48137734988947,232.39779770238323 49.979908454955044,284.19161975901 10.19903264022411,288.3727582897161 -4.972609476841354,238.6466635213024 -44.75348529157225,234.46552499059626 -69.9322270686368,279.95062351714097 -107.97448772044295,267.5899437421431 -101.60904760209347,215.99203295551067 -136.25006375347107,195.99203295551064 -177.75244521772305,227.30362119758618 -207.47823823681895,200.5383969432318 -180.67635830772534,155.990417665693 -204.1877683994243,123.62973789069505 -254.83765075839568,135.3537577843975 -271.10711648142774,98.81193947869333 -228.5030852687654,69.01664203302137 -236.81955290147582,29.890738003669092 -287.8591113555647,20.000000000000096 -287.8591113555647,-20.00000000000003 -236.81955290147584,-29.89073800366893 -228.50308526876546,-69.01664203302123 -271.10711648142785,-98.81193947869316 -254.8376507583958,-135.35375778439732 -204.18776839942433,-123.629737890695 -180.67635830772537,-155.99041766569295 -207.47823823681907,-200.53839694323165 -177.75244521772322,-227.30362119758607 -136.2500637534712,-195.99203295551052 -101.60904760209361,-215.99203295551058 -107.97448772044295,-267.5899437421431 -69.93222706863693,-279.95062351714097 -44.75348529157251,-234.4655249905962 -4.972609476841518,-238.6466635213024 10.199032640223974,-288.3727582897161 49.979908454954774,-284.19161975901005 54.481377349889364,-232.39779770238326 92.52363800169556,-220.03711792738537 126.60904760209344,-259.2933031447327 161.2500637534709,-239.29330314473276 144.29591489978012,-190.1463799237164 174.02170791887596,-163.38115566936207 221.1272080264728,-185.37968028031665 244.63861811817162,-153.01900050531887 209.16037787626556,-115.01692563060752 225.4298435992976,-78.47510732490345 277.4104653054558,-79.41222657390931 285.72693293816616,-40.28632254455722"></polygon>
    </g>
  </g>
  <mask id="heart">
    <rect x="-1250" y="-1250" width="2500" height="2500" class="w"></rect>
    <path d="M0,-281.25C0 -781.25 781.25 -781.25 781.25 -250Q781.25 312.5 0 703.125Q-781.25 312.5 -781.25 -250C-781.25 -781.25 0 -781.25 0 -281.25"></path>
  </mask>
  <rect x="-1250" y="-1250" width="2500" height="2500" mask="url(#heart)" class="cover"></rect>
</svg>
 </body>
</html>
标签:
z
给个赞 6 人点赞
收藏 5 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
常规特效 常规特效 作者

常规特效,认真对待

作者最新