{"id":3745,"date":"2023-01-24T20:47:45","date_gmt":"2023-01-24T20:47:45","guid":{"rendered":"https:\/\/corbinrose.com\/blog\/?p=3745"},"modified":"2023-01-24T20:47:45","modified_gmt":"2023-01-24T20:47:45","slug":"fun-with-css3","status":"publish","type":"post","link":"https:\/\/corbinrose.com\/blog\/technology\/fun-with-css3\/","title":{"rendered":"Fun with CSS3"},"content":{"rendered":"\n<p>CSS3 is powerful and fun!&nbsp; Using SVG and CSS animations, you can do so many wonderful things! Using CSS animations is more efficient than using Javascript giving smoother transitions and less processing power for the browser. The animation is rather simple for this glorious effect:<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.text-copy {\n  fill: none;\n  stroke: white;\n  stroke-dasharray: 7% 28%;\n  stroke-width: 3px;\n  -webkit-animation: stroke-offset 9s infinite linear;\n          animation: stroke-offset 9s infinite linear;\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"preview\">\n<style data-elementquery-processed=\"\">\n.preview {\n  background: #082330;\n  background-size: .12em 100%;\n  font: 16em\/1 Arial;\nheight: 500px;\n}\n\n.text--line {\n  font-size: .5em;\n}\n\nsvg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\ntop: 0\n}\n\n.text-copy {\n  fill: none;\n  stroke: white;\n  stroke-dasharray: 7% 28%;\n  stroke-width: 3px;\n  -webkit-animation: stroke-offset 9s infinite linear;\n          animation: stroke-offset 9s infinite linear;\n}\n.text-copy:nth-child(1) {\n  stroke: #360745;\n  stroke-dashoffset: 7%;\n}\n.text-copy:nth-child(2) {\n  stroke: #D61C59;\n  stroke-dashoffset: 14%;\n}\n.text-copy:nth-child(3) {\n  stroke: #E7D84B;\n  stroke-dashoffset: 21%;\n}\n.text-copy:nth-child(4) {\n  stroke: #EFEAC5;\n  stroke-dashoffset: 28%;\n}\n.text-copy:nth-child(5) {\n  stroke: #1B8798;\n  stroke-dashoffset: 35%;\n}\n\n@-webkit-keyframes stroke-offset {\n  50% {\n    stroke-dashoffset: 35%;\n    stroke-dasharray: 0 87.5%;\n  }\n}\n\n@keyframes stroke-offset {\n  50% {\n    stroke-dashoffset: 35%;\n    stroke-dasharray: 0 87.5%;\n  }\n}\n\n\n<\/style>\n<svg viewBox=\"0 200 800 600\">\n  <symbol id=\"s-text\">\n    <text text-anchor=\"middle\" x=\"50%\" y=\"35%\" class=\"text--line\">\n      Corbin\n    <\/text>\n    <text text-anchor=\"middle\" x=\"50%\" y=\"68%\" class=\"text--line2\">\n      Rose\n    <\/text>\n    \n  <\/symbol>\n  \n  <g class=\"g-ants\">\n    <use xlink:href=\"#s-text\" class=\"text-copy\"><\/use>     \n    <use xlink:href=\"#s-text\" class=\"text-copy\"><\/use>     \n    <use xlink:href=\"#s-text\" class=\"text-copy\"><\/use>     \n    <use xlink:href=\"#s-text\" class=\"text-copy\"><\/use>     \n    <use xlink:href=\"#s-text\" class=\"text-copy\"><\/use>     \n  <\/g>\n  \n  \n<\/svg>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS3 is powerful and fun!\u00a0 Using SVG and CSS animations, you can do so many wonderful things! Using CSS animations is more efficient than using Javascript giving smoother transitions and less processing power for the browser. The animation is rather simple for this glorious effect<\/p>\n","protected":false},"author":2,"featured_media":5539,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[28,17],"tags":[],"class_list":["post-3745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-technology","clearfix","post-index"],"acf":[],"jetpack_featured_media_url":"https:\/\/corbinrose.com\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2019-12-31-at-2.49.25-PM-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/comments?post=3745"}],"version-history":[{"count":0,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/posts\/3745\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media\/5539"}],"wp:attachment":[{"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/media?parent=3745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/categories?post=3745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corbinrose.com\/blog\/wp-json\/wp\/v2\/tags?post=3745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}