{"id":100,"date":"2022-04-18T19:06:00","date_gmt":"2022-04-18T10:06:00","guid":{"rendered":"http:\/\/hustlemouse.com\/wp1602\/?p=100"},"modified":"2022-05-06T19:24:27","modified_gmt":"2022-05-06T10:24:27","slug":"css3%e3%82%b3%e3%83%b3%e3%83%88%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%9d%e3%81%ae%ef%bc%92%e3%80%82%ef%bc%88%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3","status":"publish","type":"post","link":"https:\/\/hustlemouse.com\/wp160211\/css3%e3%82%b3%e3%83%b3%e3%83%88%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%9d%e3%81%ae%ef%bc%92%e3%80%82%ef%bc%88%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3\/","title":{"rendered":"HTML\u3068CSS3\uff08\u305d\u306e\uff12\uff1a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u30a8\u30ec\u30e1\u30f3\u30c8\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u9069\u7528\u3059\u308b\u3002<\/h2>\n\n\n\n<div id=\"animationEX\">\n<div class=\"parent\">\n<div class=\"child\">\n<p>DIV\u30bf\u30b0\uff08division\uff09\u306f\u30d6\u30c3\u30ed\u30af\uff08block\uff09\u5c5e\u6027\u306e\u4ee3\u8868\u683c\u3067\u3059\u3002<\/p>\n<\/div>\n<\/div>\n<\/div>\n<style>\n#animationEX {}\n#animationEX .parent {\n\tposition:relative;\n\twidth: 400px;\n\theight:320px;\n\t\/*\u80cc\u666f\u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u6307\u5b9a*\/\n\tbackground: rgb(35,40,178); \/* Old browsers *\/\n\tbackground: -moz-linear-gradient(top,  rgba(35,40,178,1) 0%, rgba(41,137,216,1) 60%, rgba(179,204,229,1) 61%, rgba(11,135,229,1) 100%); \/* FF3.6+ *\/\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,40,178,1)), color-stop(60%,rgba(41,137,216,1)), color-stop(61%,rgba(179,204,229,1)), color-stop(100%,rgba(11,135,229,1))); \/* Chrome,Safari4+ *\/\n\tbackground: -webkit-linear-gradient(top,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* Chrome10+,Safari5.1+ *\/\n\tbackground: -o-linear-gradient(top,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* Opera 11.10+ *\/\n\tbackground: -ms-linear-gradient(top,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* IE10+ *\/\n\tbackground: linear-gradient(to bottom,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* W3C *\/\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2328b2', endColorstr='#0b87e5',GradientType=0 ); \/* IE6-9 *\/\n\t\/*\u30d1\u30fc\u30b9\u30c6\u30af\u30c6\u30a3\u30d6\u306e\u6307\u5b9a*\/\n\t-webkit-perspective: 333px;\n\t-moz-perspective: 333px;\n\t-ms-perspective: 333px;\n\t-o-perspective: 333px;\n\t-webkit-perspective-origin:50% 50%;\n\t-mos-perspective-origin:50% 50%;\n\t-ms-perspective-origin:50% 50%;\n\t-o-perspective-origin:50% 50%;\n}\n#animationEX .child {\n\tposition : absolute;\n\tleft : 100px;\n\ttop: 100px;\n\twidth: 220px;\n\theight:90px;\n\tbackground-color:#D89;\n\tfont-size : 12pt;\n\tfont-family : verdana;\n\tfont-weight: bold;\n\tcolor : white;\n\ttext-align: center;\n\t\/*text-shadow: 2px 2px 7px #50b010;*\/\n\t\/*\u62e1\u5927\u7e2e\u5c0f\u3055\u305b\u308b\u6307\u5b9a*\/\n\t\/*-webkit-animation: scale 4s linear 0s infinite alternate;\n\t-moz-animation: scale 4s linear 0s infinite alternate;\n\t-o-animation: scale 4s linear 0s infinite alternate;\n\t-ms-animation: scale 4s linear 0s infinite alternate;*\/\n\t\/*\u56de\u8ee2\u3055\u305b\u308b\u6307\u5b9a*\/\n\t-webkit-animation: rot3d 4s linear 0s infinite normal;\n\t-moz-animation: rot3d 4s linear 0s infinite normal;\n\t-o-animation: rot3d 4s linear 0s infinite normal;\n\t-ms-animation: rot3d 4s linear 0s infinite normal;\n\t\/*SHADOW*\/\n\tbox-shadow: 0px 0px 20px rgba(255,161,208,0.80);\n\t-moz-box-shadow: 0px 0px 20px rgba(255,161,208,0.80);\n\t-webkit-box-shadow: 0px 0px 20px rgba(255,161,208,0.80);\n}\n#animationEX .child p {\n\tmargin:10px;\n}\n\/*\u62e1\u5927\u7e2e\u5c0f\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3*\/\n@-webkit-keyframes scale {\n\t0% {-webkit-transform: scale(0.85);}\n\t100% {-webkit-transform: scale(1.05);}\n}\n@-moz-keyframes scale {\n\t0% {-moz-transform: scale(0.85);}\n\t100% {-moz-transform: scale(1.05);}\n}\n@-o-keyframes scale {\n\t0% {-moz-transform: scale(0.85);}\n\t100% {-moz-transform: scale(1.05);}\n}\n@-ms-keyframes scale {\n\t0% {-moz-transform: scale(0.85);}\n\t100% {-moz-transform: scale(1.05);}\n}\n\/*3D\u56de\u8ee2\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3*\/\n@-webkit-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-webkit-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-webkit-transform: rotateY(360deg);\n\t}\n}\n@-moz-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(360deg);\n\t}\n}\n@-o-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(360deg);\n\t}\n}\n@-ms-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(360deg);\n\t}\n}\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">\u3064\u304e\u304c\u3001\u4e0a\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u3067\u3059\u3002<\/h2>\n\n\n\n<p class='code'>&lt;div id=&#8221;animationEX&#8221;&gt;\n&lt;div class=&#8221;parent&#8221;&gt;\n&lt;div class=&#8221;child&#8221;&gt;\n&lt;p&gt;DIV\u30bf\u30b0\uff08division\uff09\u306f\u30d6\u30c3\u30ed\u30af\uff08block\uff09\u5c5e\u6027\u306e\u4ee3\u8868\u683c\u3067\u3059\u3002&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;style&gt;\n#animationEX {}\n#animationEX .parent {\n\tposition:relative;\n\twidth: 400px;\n\theight:320px;\n\t\/*\u80cc\u666f\u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u6307\u5b9a*\/\n\tbackground: rgb(35,40,178); \/* Old browsers *\/\n\tbackground: -moz-linear-gradient(top,  rgba(35,40,178,1) 0%, rgba(41,137,216,1) 60%, rgba(179,204,229,1) 61%, rgba(11,135,229,1) 100%); \/* FF3.6+ *\/\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,40,178,1)), color-stop(60%,rgba(41,137,216,1)), color-stop(61%,rgba(179,204,229,1)), color-stop(100%,rgba(11,135,229,1))); \/* Chrome,Safari4+ *\/\n\tbackground: -webkit-linear-gradient(top,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* Chrome10+,Safari5.1+ *\/\n\tbackground: -o-linear-gradient(top,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* Opera 11.10+ *\/\n\tbackground: -ms-linear-gradient(top,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* IE10+ *\/\n\tbackground: linear-gradient(to bottom,  rgba(35,40,178,1) 0%,rgba(41,137,216,1) 60%,rgba(179,204,229,1) 61%,rgba(11,135,229,1) 100%); \/* W3C *\/\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#8217;#2328b2&#8242;, endColorstr=&#8217;#0b87e5&#8242;,GradientType=0 ); \/* IE6-9 *\/\n\t\/*\u30d1\u30fc\u30b9\u30c6\u30af\u30c6\u30a3\u30d6\u306e\u6307\u5b9a*\/\n\t-webkit-perspective: 333px;\n\t-moz-perspective: 333px;\n\t-ms-perspective: 333px;\n\t-o-perspective: 333px;\n\t-webkit-perspective-origin:50% 50%;\n\t-mos-perspective-origin:50% 50%;\n\t-ms-perspective-origin:50% 50%;\n\t-o-perspective-origin:50% 50%;\n}\n#animationEX .child {\n\tposition : absolute;\n\tleft : 100px;\n\ttop: 100px;\n\twidth: 220px;\n\theight:90px;\n\tbackground-color:#D89;\n\tfont-size : 12pt;\n\tfont-family : verdana;\n\tfont-weight: bold;\n\tcolor : white;\n\ttext-align: center;\n\t\/*text-shadow: 2px 2px 7px #50b010;*\/\n\t\/*\u62e1\u5927\u7e2e\u5c0f\u3055\u305b\u308b\u6307\u5b9a*\/\n\t\/*-webkit-animation: scale 4s linear 0s infinite alternate;\n\t-moz-animation: scale 4s linear 0s infinite alternate;\n\t-o-animation: scale 4s linear 0s infinite alternate;\n\t-ms-animation: scale 4s linear 0s infinite alternate;*\/\n\t\/*\u56de\u8ee2\u3055\u305b\u308b\u6307\u5b9a*\/\n\t-webkit-animation: rot3d 4s linear 0s infinite normal;\n\t-moz-animation: rot3d 4s linear 0s infinite normal;\n\t-o-animation: rot3d 4s linear 0s infinite normal;\n\t-ms-animation: rot3d 4s linear 0s infinite normal;\n\t\/*SHADOW*\/\n\tbox-shadow: 0px 0px 20px rgba(255,161,208,0.80);\n\t-moz-box-shadow: 0px 0px 20px rgba(255,161,208,0.80);\n\t-webkit-box-shadow: 0px 0px 20px rgba(255,161,208,0.80);\n}\n#animationEX .child p {\n\tmargin:10px;\n}\n\/*\u62e1\u5927\u7e2e\u5c0f\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3*\/\n@-webkit-keyframes scale {\n\t0% {-webkit-transform: scale(0.85);}\n\t100% {-webkit-transform: scale(1.05);}\n}\n@-moz-keyframes scale {\n\t0% {-moz-transform: scale(0.85);}\n\t100% {-moz-transform: scale(1.05);}\n}\n@-o-keyframes scale {\n\t0% {-moz-transform: scale(0.85);}\n\t100% {-moz-transform: scale(1.05);}\n}\n@-ms-keyframes scale {\n\t0% {-moz-transform: scale(0.85);}\n\t100% {-moz-transform: scale(1.05);}\n}\n\/*3D\u56de\u8ee2\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3*\/\n@-webkit-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-webkit-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-webkit-transform: rotateY(360deg);\n\t}\n}\n@-moz-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(360deg);\n\t}\n}\n@-o-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(360deg);\n\t}\n}\n@-ms-keyframes rot3d {\n\t0% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(0deg);\n\t}\n\t50% {background-color: #000a6c;}\n\t100% {\n\t\tbackground-color: #F13F84;\n\t\t-moz-transform: rotateY(360deg);\n\t}\n}\n&lt;\/style&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30a8\u30ec\u30e1\u30f3\u30c8\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u9069\u7528\u3059\u308b\u3002 DIV\u30bf\u30b0\uff08division\uff09\u306f\u30d6\u30c3\u30ed\u30af\uff08block\uff09\u5c5e\u6027\u306e\u4ee3\u8868\u683c\u3067\u3059\u3002 \u3064\u304e\u304c\u3001\u4e0a\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u3067\u3059\u3002 &lt;div id=&#8221;animationEX&#038;# [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[112,113],"tags":[60,140,59,31,139,136],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet","category-hyper-text-markup-language","tag-css","tag-css3","tag-html","tag-31","tag-139","tag-136"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":10,"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":1427,"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/posts\/100\/revisions\/1427"}],"wp:attachment":[{"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hustlemouse.com\/wp160211\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}