{"id":1001,"date":"2016-02-16T12:21:42","date_gmt":"2016-02-16T03:21:42","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1001"},"modified":"2016-02-20T20:56:05","modified_gmt":"2016-02-20T11:56:05","slug":"%e5%86%86%e5%bd%a2%e3%83%af%e3%82%a4%e3%83%97%e5%88%87%e6%9b%bf%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=1001","title":{"rendered":"\u5186\u5f62\u30ef\u30a4\u30d7\u5207\u66ff\u578b\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc"},"content":{"rendered":"<p>\u3000\u5148\u7a3f\u3067\u5186\u5f62\u30ef\u30a4\u30d7\u578b\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u7d39\u4ecb\u3057\u305f\u304c\u3001\u4eca\u56de\u306f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u7d39\u4ecb\u3067\u3042\u308b\u3002\u4e0b\u306b\u793a\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u306f\u3001\u5186\u5f62\u30b9\u30e9\u30a4\u30c9\u3092\u5186\u5f62\u30ef\u30a4\u30d7\u3067\u5207\u308a\u66ff\u3048\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002<br \/>\n\u3000\u5225\u30da\u30fc\u30b8\u306b\u306f\u3001\u4e0b\u306e\u30b5\u30f3\u30d7\u30eb\u306e\u30b9\u30e9\u30a4\u30c9\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30ae\u30e3\u30e9\u30ea\u30fc\u306e\u7a3f\u3067\u793a\u3057\u305f\u62e1\u5927\u5199\u771f\u304c\u8868\u793a\u3055\u308c\u308b\u30b5\u30f3\u30d7\u30eb\uff12\u3092\u793a\u3057\u305f\u3002\u3053\u306e\u30b5\u30f3\u30d7\u30eb\uff12\u306f\u3001\u6700\u65b0\u306eIe\u3001Firefox\u3001Chrome\u3067\u306f\u6b63\u5e38\u8868\u793a\u3055\u308c\u308b\u304c\u3001Microsoft Edge \u3067\u306f\u3001\u62e1\u5927\u5199\u771f\u304c\u8868\u793a\u3055\u308c\u305f\u3068\u304d\u306b\u4e8c\u3064\u306eanimation\u3092\u505c\u6b62\u3055\u305b\u308b\u30bf\u30a4\u30df\u30f3\u30b0\u304c\u305a\u308c\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u308f\u304b\u3063\u305f\u3002\u79c1\u306b\u306f\u539f\u56e0\u304c\u308f\u304b\u3089\u306a\u3044\u306e\u3067\u5bfe\u51e6\u4e0d\u80fd\u3067\u3042\u308b\u304c\u3001\u53c2\u8003\u306e\u305f\u3081\u7d39\u4ecb\u3057\u3066\u304a\u304d\u305f\u3044\u3002<\/p>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff11\uff08DEMO\uff09\u3000\u30b5\u30f3\u30d7\u30eb\uff12\u306f<a href=\"http:\/\/css.programming.jp\/pages\/slideshow_circlewipe2.html\" target=\"_blank\">\u5225\u30da\u30fc\u30b8\u306b\u3042\u308a\u307e\u3059\u3002<\/a><\/h4>\n<div id=\"stage\">\n<div id=\"frame\">\n<div id=\"photos\">\n<div class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img4\/s1.jpg\"><span class=\"memo\">\u30c1\u30f3\u30b0\u30eb\u30de<\/span><\/div>\n<div class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img4\/s2.jpg\"><span class=\"memo\">\u30b3\u30de\u30af\u30b5<\/span><\/div>\n<div class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img4\/s3.jpg\"><span class=\"memo\">\u30a4\u30ef\u30ae\u30ad\u30e7\u30a6<\/span><\/div>\n<div class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img4\/s4.jpg\"><span class=\"memo\">\u30ad\u30f3\u30dd\u30a6\u30b2<\/span><\/div>\n<div class=\"pic\"><img decoding=\"async\" src=\"wp-images\/img4\/s5.jpg\"><span class=\"memo\">\u30b3\u30d0\u30a4\u30b1\u30a4\u30bd\u30a6<\/span><\/div>\n<\/p><\/div>\n<div id=\"shutter\">\n<div class=\"part1\">\n<div class=\"arc1\"><\/div>\n<\/div>\n<div class=\"part2\">\n<div class=\"arc2\"><\/div>\n<\/div><\/div>\n<\/p><\/div>\n<\/div>\n<style type=\"text\/css\">\n\/* \u8868\u793a\u753b\u9762 *\/\n#stage {\n\tposition: relative;\n\twidth: 200px;\n\theight:200px;\n\tpadding:10px;\n}\n\/* \u8868\u793a\u67a0 *\/\n#frame {\n\twidth: 200px;\n\theight: 200px;\n\tposition: absolute;\n\ttop:0;\n\tleft:0;\n\toverflow: hidden;\n}\n\/*\u5168\u3066\u306e\u5199\u771f\u3092\u6c34\u5e73\u4e00\u5217\u306b\u683c\u7d0d\u3057\u305fdiv\u3001#photos\u306b,\n\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u57fa\u672c\u306e animation \u3092\u8a2d\u5b9a*\/\n#photos {\n\tposition:absolute;\n\ttop:0;\n    width:1200px;\n\tanimation: imgPassToLeft 30s infinite;\n}\n\/*\u5404\u5199\u771f\u306e\u4e26\u3073\u3092\u6c34\u5e73\u306b\u8a2d\u5b9a*\/\n.pic {\n\tposition:relative;\n\tfloat:left;\n}\n.pic img {\n\tborder-radius:50%;\n}\n.memo {\n\tdisplay:block;\n\tposition:absolute;\n\tleft:53px;\n\tbottom:20px;\n\tcolor:#fff;\n\tfont-weight:bold;\n\tbackground:rgba(0,0,0,0.4);\n}\n\/* \u30b9\u30e9\u30a4\u30c9\u306e\u4e0a\u5c64\u3067\u958b\u9589\u3059\u308b\u30b7\u30e3\u30c3\u30bf\u30fc *\/\n#shutter {\n\tpointer-events: none;\n}\n\/* \u5de6\u53f3\u306e\u534a\u5186 *\/\n.part1,.part2 {\n\tposition:absolute;\n\twidth:100px;height:200px;\n\toverflow:hidden;\n\tbackground:transparent;\n}\n.part1 {\n\ttop:0;left:100px;\n}\n.part2 {\n\ttop:0;left:0px;\n}\n.arc1,.arc2 { \n\ttop:0;left:0;\n\twidth:0;height:0;\n\tborder-radius: 50%;\n\tborder:100px solid transparent;\n}\n.arc1 {\n\tmargin-left:-101px;\n    border-top:100px solid #000;\n    border-right:100px solid #000;\n\ttransform:rotate(45deg);\n\tanimation:rot1 6s linear infinite;\n\tanimation-fill-mode: forwards;\n}\n.arc2 {\n\tmargin-left:1px;\n    border-bottom:100px solid #000;\n    border-left:100px solid #000;\n\ttransform:rotate(45deg);\n\tanimation:rot2 6s linear infinite;\n\tanimation-fill-mode: forwards;\t\n}\n\/* \u30b9\u30e9\u30a4\u30c9\u5207\u66ffanimation\u8a2d\u5b9a *\/\n@keyframes imgPassToLeft {\n\t0%  {   left:   0%;}\n\t19.99%{ left:   0%;}\n\t20% {   left:-100%;}\n\t39.99%{ left:-100%;}\n\t40% {   left:-200%;}\n\t59.99%{ left:-200%;}\n\t60% {   left:-300%;} \n\t79.99%{ left:-300%;}\n\t80% {   left:-400%;}\n\t99.99%{ left:-400%;}\n\t100% {  left:   0%;}\n}\n\/* \u5186\u5f27\u306eanimation *\/\n@keyframes rot1 {\n\t0% { transform:rotate(45deg); }\n\t10% { transform:rotate(225deg); }\n\t95% { transform:rotate(225deg); }\n\t100% { transform:rotate(45deg); }\n}\n@keyframes rot2 {\n\t0% { transform:rotate(45deg); }\n\t10% { transform:rotate(45deg); }\n\t20% { transform:rotate(225deg); }\n\t90% { transform:rotate(225deg); }\n\t95% { transform:rotate(45deg); }\n\t100% { transform:rotate(45deg); }\n}\n<\/style>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff11\u8868\u793a\u7528HTML<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;stage&quot;&gt;\r\n  &lt;div id=&quot;frame&quot;&gt;\r\n    &lt;div id=&quot;photos&quot;&gt;\r\n      &lt;div class=&quot;pic&quot;&gt;&lt;img src=&quot;img9\/s1.jpg&quot;&gt;&lt;span class=&quot;memo&quot;&gt;\u30c1\u30f3\u30b0\u30eb\u30de&lt;\/span&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;pic&quot;&gt;&lt;img src=&quot;img9\/s2.jpg&quot;&gt;&lt;span class=&quot;memo&quot;&gt;\u30b3\u30de\u30af\u30b5&lt;\/span&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;pic&quot;&gt;&lt;img src=&quot;img9\/s3.jpg&quot;&gt;&lt;span class=&quot;memo&quot;&gt;\u30a4\u30ef\u30ae\u30ad\u30e7\u30a6&lt;\/span&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;pic&quot;&gt;&lt;img src=&quot;img9\/s4.jpg&quot;&gt;&lt;span class=&quot;memo&quot;&gt;\u30ad\u30f3\u30dd\u30a6\u30b2&lt;\/span&gt;&lt;\/div&gt;\r\n      &lt;div class=&quot;pic&quot;&gt;&lt;img src=&quot;img9\/s5.jpg&quot;&gt;&lt;span class=&quot;memo&quot;&gt;\u30b3\u30d0\u30a4\u30b1\u30a4\u30bd\u30a6&lt;\/span&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt; \r\n    &lt;div id=&quot;shutter&quot;&gt;\r\n      &lt;div class=&quot;part1&quot;&gt;&lt;div class=&quot;arc1&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\r\n\t  &lt;div class=&quot;part2&quot;&gt;&lt;div class=&quot;arc2&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>\u30b5\u30f3\u30d7\u30eb\uff11\u8868\u793a\u7528CSS<\/h4>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/* \u8868\u793a\u753b\u9762 *\/\r\n#stage {\r\n\tposition: relative;\r\n\twidth: 200px;\r\n\theight:200px;\r\n\tpadding:10px;\r\n}\r\n\/* \u8868\u793a\u67a0 *\/\r\n#frame {\r\n\twidth: 200px;\r\n\theight: 200px;\r\n\tposition: absolute;\r\n\ttop:0;\r\n\tleft:0;\r\n\toverflow: hidden;\r\n}\r\n\/*\u5168\u3066\u306e\u5199\u771f\u3092\u6c34\u5e73\u4e00\u5217\u306b\u683c\u7d0d\u3057\u305fdiv\u3001#photos\u306b,\r\n\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u57fa\u672c\u306e animation \u3092\u8a2d\u5b9a*\/\r\n#photos {\r\n\tposition:absolute;\r\n\ttop:0;\r\n    width:1200px;\r\n\tanimation: imgPassToLeft 30s infinite;\r\n}\r\n\/*\u5404\u5199\u771f\u306e\u4e26\u3073\u3092\u6c34\u5e73\u306b\u8a2d\u5b9a*\/\r\n.pic {\r\n\tposition:relative;\r\n\tfloat:left;\r\n}\r\n.pic img {\r\n\tborder-radius:50%;\r\n}\r\n.memo {\r\n\tdisplay:block;\r\n\tposition:absolute;\r\n\tleft:53px;\r\n\tbottom:20px;\r\n\tcolor:#fff;\r\n\tfont-weight:bold;\r\n\tbackground:rgba(0,0,0,0.4);\r\n}\r\n\/* \u30b9\u30e9\u30a4\u30c9\u306e\u4e0a\u5c64\u3067\u958b\u9589\u3059\u308b\u30b7\u30e3\u30c3\u30bf\u30fc *\/\r\n#shutter {\r\n\tpointer-events: none;\r\n}\r\n\/* \u5de6\u53f3\u306e\u534a\u5186 *\/\r\n.part1,.part2 {\r\n\tposition:absolute;\r\n\twidth:100px;height:200px;\r\n\toverflow:hidden;\r\n\tbackground:transparent;\r\n}\r\n.part1 {\r\n\ttop:0;left:100px;\r\n}\r\n.part2 {\r\n\ttop:0;left:0px;\r\n}\r\n.arc1,.arc2 { \r\n\ttop:0;left:0;\r\n\twidth:0;height:0;\r\n\tborder-radius: 50%;\r\n\tborder:100px solid transparent;\r\n}\r\n.arc1 {\r\n\tmargin-left:-101px;\r\n    border-top:100px solid #000;\r\n    border-right:100px solid #000;\r\n\ttransform:rotate(45deg);\r\n\tanimation:rot1 6s linear infinite;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.arc2 {\r\n\tmargin-left:1px;\r\n    border-bottom:100px solid #000;\r\n    border-left:100px solid #000;\r\n\ttransform:rotate(45deg);\r\n\tanimation:rot2 6s linear infinite;\r\n\tanimation-fill-mode: forwards;\t\r\n}\r\n\/* \u30b9\u30e9\u30a4\u30c9\u5207\u66ffanimation\u8a2d\u5b9a *\/\r\n@keyframes imgPassToLeft {\r\n\t0%  {   left:   0%;}\r\n\t19.99%{ left:   0%;}\r\n\t20% {   left:-100%;}\r\n\t39.99%{ left:-100%;}\r\n\t40% {   left:-200%;}\r\n\t59.99%{ left:-200%;}\r\n\t60% {   left:-300%;} \r\n\t79.99%{ left:-300%;}\r\n\t80% {   left:-400%;}\r\n\t99.99%{ left:-400%;}\r\n\t100% {  left:   0%;}\r\n}\r\n\/* \u5186\u5f27\u306eanimation *\/\r\n@keyframes rot1 {\r\n\t0% { transform:rotate(45deg); }\r\n\t10% { transform:rotate(225deg); }\r\n\t95% { transform:rotate(225deg); }\r\n\t100% { transform:rotate(45deg); }\r\n}\r\n@keyframes rot2 {\r\n\t0% { transform:rotate(45deg); }\r\n\t10% { transform:rotate(45deg); }\r\n\t20% { transform:rotate(225deg); }\r\n\t90% { transform:rotate(225deg); }\r\n\t95% { transform:rotate(45deg); }\r\n\t100% { transform:rotate(45deg); }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u3000\u5148\u7a3f\u3067\u5186\u5f62\u30ef\u30a4\u30d7\u578b\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u7d39\u4ecb\u3057\u305f\u304c\u3001\u4eca\u56de\u306f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u7d39\u4ecb\u3067\u3042\u308b\u3002\u4e0b\u306b\u793a\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u306f\u3001\u5186\u5f62\u30b9\u30e9\u30a4\u30c9\u3092\u5186\u5f62\u30ef\u30a4\u30d7\u3067\u5207\u308a\u66ff\u3048\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3067\u3042\u308b\u3002 \u3000\u5225\u30da\u30fc\u30b8\u306b\u306f\u3001\u4e0b\u306e\u30b5\u30f3\u30d7\u30eb\u306e\u30b9\u30e9\u30a4\u30c9\u3092\u30af\u30ea\u30c3\u30af &hellip; <a class=\"more-link\" href=\"https:\/\/css.programming.jp\/?p=1001\">\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":[1],"tags":[],"class_list":["post-1001","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1001","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=1001"}],"version-history":[{"count":13,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1001\/revisions"}],"predecessor-version":[{"id":1014,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1001\/revisions\/1014"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}