{"id":70,"date":"2020-01-06T14:52:08","date_gmt":"2020-01-06T05:52:08","guid":{"rendered":"https:\/\/ux-love.work\/?p=70"},"modified":"2020-02-16T15:29:04","modified_gmt":"2020-02-16T06:29:04","slug":"post-70","status":"publish","type":"post","link":"https:\/\/ux-love.work\/?p=70","title":{"rendered":"js\u3068svg\u3092\u4f7f\u3063\u305fCSS\u3068JavaScript\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30ed\u30b4\u306e6\u306e\u7d20\u6674\u3089\u3057\u3044\u4f8b\u306e\u30b3\u30ec\u30af\u30b7\u30e7\u30f3"},"content":{"rendered":"<p>js\u3068svg\u3092\u4f7f\u3063\u305f<strong>CSS\u3068JavaScript\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30ed\u30b4<\/strong>\u306e14\u306e\u7d20\u6674\u3089\u3057\u3044\u4f8b\u306e\u30b3\u30ec\u30af\u30b7\u30e7\u30f3<\/p>\n<h4 id=\"outline__1\">1.\u30d5\u30a7\u30a4\u30b9\u30e1\u30a4\u30c9\uff1a\u30a2\u30cb\u30e1\u30ed\u30b4<\/h4>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-default-tab=\"result\" data-user=\"MiguelAraCo\" data-slug-hash=\"QbZqoQ\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Carbon LDP Animated Logo\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/MiguelAraCo\/pen\/QbZqoQ\/\"><br \/>\nCarbon LDP Animated Logo<\/a> by Miguel Aragon (<a href=\"https:\/\/codepen.io\/MiguelAraCo\">@MiguelAraCo<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h4 id=\"outline__2\">2.&nbsp;Webbab\u306e\u30ed\u30b4<\/h4>\n<p><iframe style=\"width: 100%;\" title=\"Logo \" src=\"\/\/codepen.io\/fixcl\/embed\/ONeOdL\/?height=265&amp;theme-id=0&amp;default-tab=js,result\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/fixcl\/pen\/ONeOdL\/\">Logo <\/a> by Marco Barr\u00eda<br \/>\n(<a href=\"https:\/\/codepen.io\/fixcl\">@fixcl<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h4 id=\"outline__3\"><\/h4>\n<h4 id=\"outline__4\">3.\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5316\u3055\u308c\u305fStack Overflow\u30ed\u30b4\uff08\u7d14\u7c8b\u306aCSS\uff09<\/h4>\n<p><iframe style=\"width: 100%;\" title=\"Animated Stack Overflow logo (pure CSS)\" src=\"\/\/codepen.io\/lindell\/embed\/mEVgJP\/?height=265&amp;theme-id=0&amp;default-tab=css,result\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/lindell\/pen\/mEVgJP\/\">Animated Stack Overflow logo (pure CSS)<\/a> by Johan Lindell<br \/>\n(<a href=\"https:\/\/codepen.io\/lindell\">@lindell<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h4 id=\"outline__5\">4.\u30a2\u30cb\u30e1\u30ed\u30b4<\/h4>\n<p><iframe style=\"width: 100%;\" title=\"Animated Logo\" src=\"\/\/codepen.io\/iconjunkie\/embed\/vLEaNZ\/?height=265&amp;theme-id=0&amp;default-tab=html,result\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/iconjunkie\/pen\/vLEaNZ\/\">Animated Logo<\/a> by David McFeders<br \/>\n(<a href=\"https:\/\/codepen.io\/iconjunkie\">@iconjunkie<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h4 id=\"outline__6\">5.\u30ab\u30fc\u30dc\u30f3LDP\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30ed\u30b4<\/h4>\n<p><iframe style=\"width: 100%;\" title=\"Carbon LDP Animated Logo\" src=\"\/\/codepen.io\/MiguelAraCo\/embed\/QbZqoQ\/?height=265&amp;theme-id=0&amp;default-tab=css,result\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/MiguelAraCo\/pen\/QbZqoQ\/\">Carbon LDP Animated Logo<\/a> by Miguel Aragon<br \/>\n(<a href=\"https:\/\/codepen.io\/MiguelAraCo\">@MiguelAraCo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h4 id=\"outline__3\"><\/h4>\n<h4 id=\"outline__8\">6.FLWRS SVG\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30ed\u30b4 &#8211; \u30d4\u30e5\u30a2CSS<\/h4>\n<p><iframe style=\"width: 100%;\" title=\"FLWRS SVG ANIMATED LOGO - PURE CSS\" src=\"\/\/codepen.io\/flwrs\/embed\/gLrygN\/?height=265&amp;theme-id=0&amp;default-tab=html,result\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/flwrs\/pen\/gLrygN\/\">FLWRS SVG ANIMATED LOGO &#8211; PURE CSS<\/a> by Atiqah Hafiz<br \/>\n(<a href=\"https:\/\/codepen.io\/flwrs\">@flwrs<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>js\u3068svg\u3092\u4f7f\u3063\u305fCSS\u3068JavaScript\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30ed\u30b4\u306e14\u306e\u7d20\u6674\u3089\u3057\u3044\u4f8b\u306e\u30b3\u30ec\u30af\u30b7\u30e7\u30f3 1.\u30d5\u30a7\u30a4\u30b9\u30e1\u30a4\u30c9\uff1a\u30a2\u30cb\u30e1\u30ed\u30b4 See the Pen Carbon LDP Animated Logo by Miguel Aragon (@MiguelAraCo) on CodePen. 2.&nbsp;Webbab\u306e\u30ed\u30b4 See the Pen Logo by Marco Barr\u00eda  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":161,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"adace-sponsor":[],"class_list":["post-70","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web"],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/posts\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ux-love.work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=70"}],"version-history":[{"count":3,"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/posts\/70\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/posts\/70\/revisions\/128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ux-love.work\/index.php?rest_route=\/wp\/v2\/media\/161"}],"wp:attachment":[{"href":"https:\/\/ux-love.work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ux-love.work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ux-love.work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=70"},{"taxonomy":"adace-sponsor","embeddable":true,"href":"https:\/\/ux-love.work\/index.php?rest_route=%2Fwp%2Fv2%2Fadace-sponsor&post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}