{"id":1349,"date":"2018-05-08T11:29:46","date_gmt":"2018-05-08T02:29:46","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1349"},"modified":"2018-05-14T09:13:32","modified_gmt":"2018-05-14T00:13:32","slug":"%e3%82%b9%e3%83%a9%e3%82%a4%e3%82%b9%ef%bc%88%e5%88%86%e5%89%b2%e7%94%bb%e5%83%8f%ef%bc%89%e9%80%a3%e7%b6%9a%e7%99%bb%e5%a0%b4%e5%9e%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=1349","title":{"rendered":"\u30b9\u30e9\u30a4\u30b9\uff08\u5206\u5272\u753b\u50cf\uff09\u9023\u7d9a\u767b\u5834\u578b\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc"},"content":{"rendered":"<p>\u3000\u30b9\u30e9\u30a4\u30c9\u3092\u7e26\u65b9\u5411\u306b\u5206\u5272\u3057\u305f\uff08\u3053\u3053\u3067\u306f8\u5206\u5272\uff09\u753b\u50cf\u306e\u5404\u3005\u304c\u3001\u62e1\u5927\u79fb\u52d5\u3057\u306a\u304c\u3089\u9023\u7d9a\u3057\u3066\u767b\u5834\u3057\u3001\u6700\u7d42\u7684\u306b\u306f\u30b9\u30c6\u30fc\u30b8\u306b\u672c\u6765\u306e\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u3068\u3044\u3046\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002<br \/>\n\u3000\u753b\u50cf\u3092\u5206\u5272\u3059\u308b\u306b\u306f\u3001fireworks\u306a\u3069\u306e\u5b9a\u756a\u30bd\u30d5\u30c8\u304c\u3042\u308b\u304c\u3001photoscape\u306e\u3088\u3046\u306a\u7121\u6599\u30bd\u30d5\u30c8\u306e\u4f7f\u7528\u304c\u4fbf\u5229\u3067\u3042\u308b\u3002<\/p>\n<h4>\u7528\u610f\u3059\u308b\u753b\u50cf<\/h4>\n<p>\u3000600*338px\u306e\u30b9\u30e9\u30a4\u30c9\uff08\u3053\u3053\u3067\u306f5\u679a\uff09\u306e\u5404\u3005\u3092\u7e26\u306b\u5206\u5272\uff08\u3053\u3053\u3067\u306f8\u5206\u5272\uff09\u3057\u3001\u5404\u30b9\u30e9\u30a4\u30c9\u306b\u3064\u304d\u77ed\u518a\u72b6\u306e\u30b9\u30e9\u30a4\u30b9\u753b\u50cf\uff08\u5e4575PX\u3001\u9ad8\u3055338px\uff098\u679a\u3092\u4f5c\u6210\u3057\u3001img\u30d5\u30a9\u30eb\u30c0\uff08\u3053\u3053\u3067\u306f\u3000wp-images\/img14\uff09\u306b\u5165\u308c\u3066\u304a\u304f\u3002\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u306e\u30cd\u30fc\u30df\u30f3\u30b0\u306f\u30011\u679a\u76ee\uff1a11-18.jpg\u30012\u679a\u76ee\uff1a21-28.jpg \u306e\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n<p><!-- \u8868\u793a\u9818\u57df --><\/p>\n<div id=\"stage\">\n <!-- \u30b9\u30e9\u30a4\u30c91  \u5404\u30b9\u30e9\u30a4\u30b9\u306e\u914d\u7f6e --><\/p>\n<div id=\"slide1\" class=\"slide\">\n    <img decoding=\"async\" src=\"wp-images\/img14\/11.jpg\" class=\"slice slice1\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/12.jpg\" class=\"slice slice2\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/13.jpg\" class=\"slice slice3\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/14.jpg\" class=\"slice slice4\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/15.jpg\" class=\"slice slice5\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/16.jpg\" class=\"slice slice6\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/17.jpg\" class=\"slice slice7\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/18.jpg\" class=\"slice slice8\">\n  <\/div>\n<div id=\"slide2\" class=\"slide\">\n    <img decoding=\"async\" src=\"wp-images\/img14\/21.jpg\" class=\"slice slice1\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/22.jpg\" class=\"slice slice2\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/23.jpg\" class=\"slice slice3\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/24.jpg\" class=\"slice slice4\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/25.jpg\" class=\"slice slice5\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/26.jpg\" class=\"slice slice6\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/27.jpg\" class=\"slice slice7\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/28.jpg\" class=\"slice slice8\">\n  <\/div>\n<div id=\"slide3\" class=\"slide\">\n    <img decoding=\"async\" src=\"wp-images\/img14\/31.jpg\" class=\"slice slice1\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/32.jpg\" class=\"slice slice2\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/33.jpg\" class=\"slice slice3\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/34.jpg\" class=\"slice slice4\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/35.jpg\" class=\"slice slice5\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/36.jpg\" class=\"slice slice6\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/37.jpg\" class=\"slice slice7\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/38.jpg\" class=\"slice slice8\">\n  <\/div>\n<div id=\"slide4\" class=\"slide\">\n    <img decoding=\"async\" src=\"wp-images\/img14\/41.jpg\" class=\"slice slice1\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/42.jpg\" class=\"slice slice2\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/43.jpg\" class=\"slice slice3\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/44.jpg\" class=\"slice slice4\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/45.jpg\" class=\"slice slice5\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/46.jpg\" class=\"slice slice6\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/47.jpg\" class=\"slice slice7\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/48.jpg\" class=\"slice slice8\">\n  <\/div>\n<div id=\"slide5\" class=\"slide\">\n    <img decoding=\"async\" src=\"wp-images\/img14\/51.jpg\" class=\"slice slice1\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/52.jpg\" class=\"slice slice2\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/53.jpg\" class=\"slice slice3\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/54.jpg\" class=\"slice slice4\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/55.jpg\" class=\"slice slice5\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/56.jpg\" class=\"slice slice6\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/57.jpg\" class=\"slice slice7\"><br \/>\n    <img decoding=\"async\" src=\"wp-images\/img14\/58.jpg\" class=\"slice slice8\">\n  <\/div>\n<\/div>\n<style type=\"text\/css\">\n\/* \u8868\u793a\u9818\u57df\u306e\u8a2d\u5b9a *\/\n#stage\n { position:relative;\n   max-width:600px;\n   max-height:338px;\n   overflow:hidden;\n   margin-bottom:15px;\n }\n\/* \u8868\u793a\u9818\u57df\u306e\u78ba\u4fdd *\/\n.slide {\n   width:100%;\n   padding-top:12%;\n }\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306e\u521d\u671f\u914d\u7f6e *\/\n.slice { position:absolute; top:0; left:100%; width:12.5%; }\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306eanimation\u306e\u30bb\u30c3\u30c8 *\/\n#slide1 .slice1 { animation:appr1 30s ease 0s infinite; }\n#slide1 .slice2 { animation:appr2 30s ease 0s infinite; }\n#slide1 .slice3 { animation:appr3 30s ease 0s infinite; }\n#slide1 .slice4 { animation:appr4 30s ease 0s infinite; }\n#slide1 .slice5 { animation:appr5 30s ease 0s infinite; }\n#slide1 .slice6 { animation:appr6 30s ease 0s infinite; }\n#slide1 .slice7 { animation:appr7 30s ease 0s infinite; }\n#slide1 .slice8 { animation:appr8 30s ease 0s infinite; }\n#slide2 .slice1 { animation:appr1 30s ease 6s infinite; }\n#slide2 .slice2 { animation:appr2 30s ease 6s infinite; }\n#slide2 .slice3 { animation:appr3 30s ease 6s infinite; }\n#slide2 .slice4 { animation:appr4 30s ease 6s infinite; }\n#slide2 .slice5 { animation:appr5 30s ease 6s infinite; }\n#slide2 .slice6 { animation:appr6 30s ease 6s infinite; }\n#slide2 .slice7 { animation:appr7 30s ease 6s infinite; }\n#slide2 .slice8 { animation:appr8 30s ease 6s infinite; }\n#slide3 .slice1 { animation:appr1 30s ease 12s infinite; }\n#slide3 .slice2 { animation:appr2 30s ease 12s infinite; }\n#slide3 .slice3 { animation:appr3 30s ease 12s infinite; }\n#slide3 .slice4 { animation:appr4 30s ease 12s infinite; }\n#slide3 .slice5 { animation:appr5 30s ease 12s infinite; }\n#slide3 .slice6 { animation:appr6 30s ease 12s infinite; }\n#slide3 .slice7 { animation:appr7 30s ease 12s infinite; }\n#slide3 .slice8 { animation:appr8 30s ease 12s infinite; }\n#slide4 .slice1 { animation:appr1 30s ease 18s infinite; }\n#slide4 .slice2 { animation:appr2 30s ease 18s infinite; }\n#slide4 .slice3 { animation:appr3 30s ease 18s infinite; }\n#slide4 .slice4 { animation:appr4 30s ease 18s infinite; }\n#slide4 .slice5 { animation:appr5 30s ease 18s infinite; }\n#slide4 .slice6 { animation:appr6 30s ease 18s infinite; }\n#slide4 .slice7 { animation:appr7 30s ease 18s infinite; }\n#slide4 .slice8 { animation:appr8 30s ease 18s infinite; }\n#slide5 .slice1 { animation:appr1 30s ease 24s infinite; }\n#slide5 .slice2 { animation:appr2 30s ease 24s infinite; }\n#slide5 .slice3 { animation:appr3 30s ease 24s infinite; }\n#slide5 .slice4 { animation:appr4 30s ease 24s infinite; }\n#slide5 .slice5 { animation:appr5 30s ease 24s infinite; }\n#slide5 .slice6 { animation:appr6 30s ease 24s infinite; }\n#slide5 .slice7 { animation:appr7 30s ease 24s infinite; }\n#slide5 .slice8 { animation:appr8 30s ease 24s infinite; }<\/p>\n<p>\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306eanimation *\/\n@keyframes appr1 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t3% { left:0%; transform:scale(1,1); }\n\t20% { left:0%; }\n\t100% { left:0%; z-index:0; }\n}\n@keyframes appr2 {\n\t0% {left:100%; z-index:100; transform:scale(0,0);}\n\t0.4% { left:100%; transform:scale(0,0);}\n\t3% { left:12.5%; transform:scale(1,1); }\n\t20% { left:12.5%;}\n\t100% { left:12.5%; z-index:0; }\n}\n@keyframes appr3 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t0.8% { left:100%; transform:scale(0,0); }\n\t3% { left:25%; transform:scale(1,1); }\n\t20% { left:25%;}\n\t100% { left:25%; z-index:0; }\n}\n@keyframes appr4 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t1.2% { left:100%; transform:scale(0,0); }\n\t3% { left:37.5%; transform:scale(1,1); }\n\t20% { left:37.5%;}\n\t100% { left:37.5%; z-index:0; }\n}\n@keyframes appr5 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t1.6% { left:100%; transform:scale(0,0); }\n\t3% { left:50%; transform:scale(1,1); }\n\t20% { left:50%;}\n\t100% { left:50%; z-index:0; }\n}\n@keyframes appr6 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t2.0% { left:100%; transform:scale(0,0); }\n\t3% { left:62.5%; transform:scale(1,1); }\n\t20% { left:62.5%;}\n\t100% { left:62.5%; z-index:0; }\n}\n@keyframes appr7 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t2.4% { left:100%; transform:scale(0,0); }\n\t3% { left:75%; transform:scale(1,1); }\n\t20% { left:75%;}\n\t100% { left:75%; z-index:0; }\n}\n@keyframes appr8 {\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\n\t2.8% { left:100%; transform:scale(0,0);}\n\t3% { left:87.5%; transform:scale(1,1); }\n\t20% { left:87.5%;}\n\t100% { left:87.5%; z-index:0; }\n}\n<\/style>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528HTML<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!-- \u8868\u793a\u9818\u57df --&gt;\r\n&lt;div id=&quot;stage&quot;&gt;\r\n &lt;!-- \u30b9\u30e9\u30a4\u30c91  \u5404\u30b9\u30e9\u30a4\u30b9\u306e\u914d\u7f6e --&gt;\r\n  &lt;div id=&quot;slide1&quot; class=&quot;slide&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/11.jpg&quot; class=&quot;slice slice1&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/12.jpg&quot; class=&quot;slice slice2&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/13.jpg&quot; class=&quot;slice slice3&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/14.jpg&quot; class=&quot;slice slice4&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/15.jpg&quot; class=&quot;slice slice5&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/16.jpg&quot; class=&quot;slice slice6&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/17.jpg&quot; class=&quot;slice slice7&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/18.jpg&quot; class=&quot;slice slice8&quot;&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=&quot;slide2&quot; class=&quot;slide&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/21.jpg&quot; class=&quot;slice slice1&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/22.jpg&quot; class=&quot;slice slice2&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/23.jpg&quot; class=&quot;slice slice3&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/24.jpg&quot; class=&quot;slice slice4&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/25.jpg&quot; class=&quot;slice slice5&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/26.jpg&quot; class=&quot;slice slice6&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/27.jpg&quot; class=&quot;slice slice7&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/28.jpg&quot; class=&quot;slice slice8&quot;&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=&quot;slide3&quot; class=&quot;slide&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/31.jpg&quot; class=&quot;slice slice1&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/32.jpg&quot; class=&quot;slice slice2&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/33.jpg&quot; class=&quot;slice slice3&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/34.jpg&quot; class=&quot;slice slice4&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/35.jpg&quot; class=&quot;slice slice5&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/36.jpg&quot; class=&quot;slice slice6&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/37.jpg&quot; class=&quot;slice slice7&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/38.jpg&quot; class=&quot;slice slice8&quot;&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=&quot;slide4&quot; class=&quot;slide&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/41.jpg&quot; class=&quot;slice slice1&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/42.jpg&quot; class=&quot;slice slice2&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/43.jpg&quot; class=&quot;slice slice3&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/44.jpg&quot; class=&quot;slice slice4&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/45.jpg&quot; class=&quot;slice slice5&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/46.jpg&quot; class=&quot;slice slice6&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/47.jpg&quot; class=&quot;slice slice7&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/48.jpg&quot; class=&quot;slice slice8&quot;&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div id=&quot;slide5&quot; class=&quot;slide&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/51.jpg&quot; class=&quot;slice slice1&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/52.jpg&quot; class=&quot;slice slice2&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/53.jpg&quot; class=&quot;slice slice3&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/54.jpg&quot; class=&quot;slice slice4&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/55.jpg&quot; class=&quot;slice slice5&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/56.jpg&quot; class=&quot;slice slice6&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/57.jpg&quot; class=&quot;slice slice7&quot;&gt;\r\n    &lt;img src=&quot;wp-images\/img14\/58.jpg&quot; class=&quot;slice slice8&quot;&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>\u672c\u30b5\u30f3\u30d7\u30eb\u8868\u793a\u7528CSS<\/h4>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/* \u8868\u793a\u9818\u57df\u306e\u8a2d\u5b9a *\/\r\n#stage\r\n { position:relative;\r\n   max-width:600px;\r\n   overflow:hidden;\r\n }\r\n\/* \u8868\u793a\u9818\u57df\u306e\u78ba\u4fdd *\/\r\n.slide {\r\n   width:100%;\r\n   padding-top:12%;\r\n }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306e\u521d\u671f\u914d\u7f6e *\/\r\n.slice { position:absolute; top:0; left:100%; width:12.5%; }\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306eanimation\u306e\u30bb\u30c3\u30c8 *\/\r\n#slide1 .slice1 { animation:appr1 30s ease 0s infinite; }\r\n#slide1 .slice2 { animation:appr2 30s ease 0s infinite; }\r\n#slide1 .slice3 { animation:appr3 30s ease 0s infinite; }\r\n#slide1 .slice4 { animation:appr4 30s ease 0s infinite; }\r\n#slide1 .slice5 { animation:appr5 30s ease 0s infinite; }\r\n#slide1 .slice6 { animation:appr6 30s ease 0s infinite; }\r\n#slide1 .slice7 { animation:appr7 30s ease 0s infinite; }\r\n#slide1 .slice8 { animation:appr8 30s ease 0s infinite; }\r\n#slide2 .slice1 { animation:appr1 30s ease 6s infinite; }\r\n#slide2 .slice2 { animation:appr2 30s ease 6s infinite; }\r\n#slide2 .slice3 { animation:appr3 30s ease 6s infinite; }\r\n#slide2 .slice4 { animation:appr4 30s ease 6s infinite; }\r\n#slide2 .slice5 { animation:appr5 30s ease 6s infinite; }\r\n#slide2 .slice6 { animation:appr6 30s ease 6s infinite; }\r\n#slide2 .slice7 { animation:appr7 30s ease 6s infinite; }\r\n#slide2 .slice8 { animation:appr8 30s ease 6s infinite; }\r\n#slide3 .slice1 { animation:appr1 30s ease 12s infinite; }\r\n#slide3 .slice2 { animation:appr2 30s ease 12s infinite; }\r\n#slide3 .slice3 { animation:appr3 30s ease 12s infinite; }\r\n#slide3 .slice4 { animation:appr4 30s ease 12s infinite; }\r\n#slide3 .slice5 { animation:appr5 30s ease 12s infinite; }\r\n#slide3 .slice6 { animation:appr6 30s ease 12s infinite; }\r\n#slide3 .slice7 { animation:appr7 30s ease 12s infinite; }\r\n#slide3 .slice8 { animation:appr8 30s ease 12s infinite; }\r\n#slide4 .slice1 { animation:appr1 30s ease 18s infinite; }\r\n#slide4 .slice2 { animation:appr2 30s ease 18s infinite; }\r\n#slide4 .slice3 { animation:appr3 30s ease 18s infinite; }\r\n#slide4 .slice4 { animation:appr4 30s ease 18s infinite; }\r\n#slide4 .slice5 { animation:appr5 30s ease 18s infinite; }\r\n#slide4 .slice6 { animation:appr6 30s ease 18s infinite; }\r\n#slide4 .slice7 { animation:appr7 30s ease 18s infinite; }\r\n#slide4 .slice8 { animation:appr8 30s ease 18s infinite; }\r\n#slide5 .slice1 { animation:appr1 30s ease 24s infinite; }\r\n#slide5 .slice2 { animation:appr2 30s ease 24s infinite; }\r\n#slide5 .slice3 { animation:appr3 30s ease 24s infinite; }\r\n#slide5 .slice4 { animation:appr4 30s ease 24s infinite; }\r\n#slide5 .slice5 { animation:appr5 30s ease 24s infinite; }\r\n#slide5 .slice6 { animation:appr6 30s ease 24s infinite; }\r\n#slide5 .slice7 { animation:appr7 30s ease 24s infinite; }\r\n#slide5 .slice8 { animation:appr8 30s ease 24s infinite; }\r\n\r\n\/* \u5404\u30b9\u30e9\u30a4\u30b9\u306eanimation *\/\r\n@keyframes appr1 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t3% { left:0%; transform:scale(1,1); }\r\n\t20% { left:0%; }\r\n\t100% { left:0%; z-index:0; }\r\n}\r\n@keyframes appr2 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0);}\r\n\t0.4% { left:100%; transform:scale(0,0);}\r\n\t3% { left:12.5%; transform:scale(1,1); }\r\n\t20% { left:12.5%;}\r\n\t100% { left:12.5%; z-index:0; }\r\n}\r\n@keyframes appr3 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t0.8% { left:100%; transform:scale(0,0); }\r\n\t3% { left:25%; transform:scale(1,1); }\r\n\t20% { left:25%;}\r\n\t100% { left:25%; z-index:0; }\r\n}\r\n@keyframes appr4 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t1.2% { left:100%; transform:scale(0,0); }\r\n\t3% { left:37.5%; transform:scale(1,1); }\r\n\t20% { left:37.5%;}\r\n\t100% { left:37.5%; z-index:0; }\r\n}\r\n@keyframes appr5 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t1.6% { left:100%; transform:scale(0,0); }\r\n\t3% { left:50%; transform:scale(1,1); }\r\n\t20% { left:50%;}\r\n\t100% { left:50%; z-index:0; }\r\n}\r\n@keyframes appr6 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t2.0% { left:100%; transform:scale(0,0); }\r\n\t3% { left:62.5%; transform:scale(1,1); }\r\n\t20% { left:62.5%;}\r\n\t100% { left:62.5%; z-index:0; }\r\n}\r\n@keyframes appr7 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t2.4% { left:100%; transform:scale(0,0); }\r\n\t3% { left:75%; transform:scale(1,1); }\r\n\t20% { left:75%;}\r\n\t100% { left:75%; z-index:0; }\r\n}\r\n@keyframes appr8 {\r\n\t0% {left:100%; z-index:100; transform:scale(0,0); }\r\n\t2.8% { left:100%; transform:scale(0,0);}\r\n\t3% { left:87.5%; transform:scale(1,1); }\r\n\t20% { left:87.5%;}\r\n\t100% { left:87.5%; z-index:0; }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u30b9\u30e9\u30a4\u30c9\u3092\u7e26\u65b9\u5411\u306b\u5206\u5272\u3057\u305f\uff08\u3053\u3053\u3067\u306f8\u5206\u5272\uff09\u753b\u50cf\u306e\u5404\u3005\u304c\u3001\u62e1\u5927\u79fb\u52d5\u3057\u306a\u304c\u3089\u9023\u7d9a\u3057\u3066\u767b\u5834\u3057\u3001\u6700\u7d42\u7684\u306b\u306f\u30b9\u30c6\u30fc\u30b8\u306b\u672c\u6765\u306e\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u3068\u3044\u3046\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002 \u3000\u753b\u50cf\u3092\u5206\u5272\u3059\u308b\u306b\u306f\u3001fireworks\u306a\u3069\u306e\u5b9a\u756a &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1349\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1349","post","type-post","status-publish","format-standard","hentry","category-3"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1349"}],"version-history":[{"count":29,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1349\/revisions"}],"predecessor-version":[{"id":1378,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1349\/revisions\/1378"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}