<!DOCTYPE html>
<html>
<head>
<title>APNG Anime Maker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contain"><a href="https://sites.google.com/site/cphktool/apng-anime-maker" target="_blank">
<div class="contain-logo">
<div class="drop-big"></div>
<div class="drop-small"></div>
</div>
</a>
<div><a href="https://www.facebook.com/codesamplehtmlcssjs/" target="_blank">
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="72" width="670" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 670.00001 72.000002"
id="svg1">
<g transform="matrix(1.005 0 0 1.0003 -219.42 -.018735)">
<path style="fill:#e9c6af" d="m218.33 35.34 37.926-22.196q0.91893-0.5264 1.3784-0.5264 0.71007 0 1.2113 0.57027 0.54298 0.52641 0.54298 1.2721 0 1.0967-1.4201 1.9301l-32.496 18.95 32.454 18.95q1.4202 0.8335 1.4202 1.9301 0 0.7458-0.54299 1.316-0.50123 0.5264-1.2113 0.5264-0.45945 0-1.3784-0.5264l-37.884-22.196z"/>
<g style="fill:#e6e6e6" transform="matrix(1.0015,0,0,1.0109,125.52,-870.45)">
<path style="fill:#e6e6e6" d="m184.05 882.73v-1.215q0-1.3452 0.50047-1.9093 0.50046-0.56408 1.2512-0.56408 0.79239 0 1.2929 0.56408 0.50045 0.56411 0.50045 1.9093v8.2445q-0.0416 1.3452-0.54217 1.9092-0.45875 0.56411-1.2511 0.56411-0.70899 0-1.2095-0.47733-0.45875-0.52069-0.54218-1.6923-0.25021-3.0808-3.9203-5.8579-3.6284-2.7771-9.8007-2.7771-7.7989 0-11.844 5.0769-4.0454 5.0769-4.0454 11.629 0 7.0729 4.4625 11.672 4.4624 4.5996 11.552 4.5996 4.0871 0 8.2993-1.5621 4.2539-1.5621 7.6738-5.0335 0.8758-0.86785 1.5431-0.86785 0.70899 0 1.1678 0.52071 0.50045 0.47731 0.50045 1.215 0 1.8659-4.2122 4.7298-6.798 4.643-15.139 4.643-8.4662 0-13.93-5.5976-5.4217-5.641-5.4217-14.276 0-8.8086 5.5468-14.623 5.5885-5.8146 14.055-5.8146 8.0491 0 13.512 4.9901z"/>
<path style="fill:#e6e6e6" d="m240.22 897.92q0 8.3313-5.7553 14.233-5.7136 5.9013-13.804 5.9013-8.1742 0-13.888-5.9013-5.7136-5.9447-5.7136-14.233 0-8.3313 5.7136-14.233 5.7136-5.9447 13.888-5.9447 8.0908 0 13.804 5.9013 5.7553 5.9013 5.7553 14.276zm-3.545 0q0-6.856-4.7127-11.672-4.671-4.8165-11.344-4.8165-6.6728 0-11.386 4.8599-4.671 4.8165-4.671 11.629 0 6.7692 4.671 11.629 4.7127 4.8599 11.386 4.8599 6.6728 0 11.344-4.8165 4.7127-4.8599 4.7127-11.672z"/>
<path style="fill:#e6e6e6" d="m289.02 862.17v50.812h4.671q1.2929 0 1.835 0.5207 0.54215 0.4773 0.54215 1.3018 0 0.78105-0.54215 1.3018-0.54218 0.52069-1.835 0.52069h-8.216v-7.2465q-6.089 8.6784-15.473 8.6784-4.7544 0-9.1334-2.6035-4.3374-2.6469-6.8814-7.5068-2.5023-4.8599-2.5023-10.024 0-5.2071 2.5023-10.024 2.544-4.8599 6.8814-7.5068 4.379-2.6469 9.1751-2.6469 9.1752 0 15.431 8.6784v-20.568h-4.671q-1.2928 0-1.835-0.52072-0.54218-0.5207-0.54218-1.3452 0-0.78105 0.54218-1.3018 0.54217-0.52071 1.835-0.52071h8.2159zm-3.545 35.755q0-6.9427-4.5042-11.716-4.5042-4.7731-10.718-4.7731-6.2558 0-10.76 4.7731t-4.5042 11.716q0 6.8994 4.5042 11.716 4.5042 4.7731 10.76 4.7731 6.2141 0 10.718-4.7731 4.5042-4.8165 4.5042-11.716z"/>
<path style="fill:#e6e6e6" d="m342.03 898.7h-35.7q0.91752 7.0729 5.6719 11.412 4.7961 4.2958 11.844 4.2958 3.9203 0 8.2159-1.3452t7.0065-3.5582q0.79239-0.65088 1.3763-0.65088 0.66729 0 1.1678 0.56408 0.50045 0.52072 0.50045 1.2584 0 0.73767-0.66728 1.4319-2.0018 2.1696-7.1316 4.0789-5.088 1.8659-10.468 1.8659-9.0083 0-15.056-6.1183-6.0056-6.1617-6.0056-14.883 0-7.9408 5.6302-13.625 5.6719-5.6844 14.013-5.6844 8.5913 0 14.138 5.8579 5.5468 5.8145 5.4634 15.1zm-3.545-3.6883q-1.0426-6.0315-5.5051-9.8066-4.4208-3.7751-10.551-3.7751-6.1307 0-10.551 3.7317-4.4208 3.7317-5.5051 9.85h32.113z"/>
</g>
<path style="fill:#e9c6af" d="m516.14 3.2-28.23 63.54q-0.71008 1.623-1.8378 1.623-0.71007 0-1.2531-0.5702-0.50122-0.5264-0.50122-1.1844 0-0.5264 0.41768-1.4476l28.194-63.519q0.45947-1.0089 0.87716-1.316 0.41769-0.30707 1.0025-0.30707 0.71006 0 1.2113 0.57027 0.54299 0.52641 0.54299 1.1844 0 0.48255-0.41768 1.4476z"/>
<path style="fill:#c8ab37" d="m561.25 19.49q0-1.2721 0.50122-1.8424 0.50124-0.57025 1.2531-0.57025 0.7936 0 1.2948 0.57025 0.50122 0.57027 0.50122 1.9301v6.3168q0 1.316-0.50122 1.8862-0.50123 0.5703-1.2948 0.5703-0.71007 0-1.2113-0.4825-0.45945-0.4826-0.54299-1.5792-0.25062-2.632-2.5897-4.3428-3.425-2.4565-9.0639-2.4565-5.8894 0-9.1474 2.5004-2.4644 1.8862-2.4644 4.2111 0 2.632 2.9238 4.3867 2.0049 1.2282 7.602 1.8862 7.3096 0.8335 10.15 1.8863 4.0516 1.5353 6.0147 4.255 2.0049 2.7197 2.0049 5.8781 0 4.6937-4.3022 8.3785-4.3022 3.6409-12.614 3.6409-8.312 0-13.617-4.4305 0 1.4915-0.16703 1.9301-0.16701 0.4387-0.62653 0.7458-0.41768 0.307-0.96069 0.307-0.75183 0-1.253-0.5702-0.50124-0.5703-0.50124-1.8863v-7.5889q0-1.316 0.45948-1.8862 0.50121-0.5703 1.2948-0.5703 0.75186 0 1.2531 0.5703 0.543 0.5264 0.543 1.4475 0 2.0179 0.96069 3.3778 1.4619 2.1056 4.6364 3.5093 3.2162 1.3599 7.8526 1.3599 6.8501 0 10.192-2.6759 3.3415-2.6759 3.3415-5.6588 0-3.4216-3.3833-5.4833-3.425-2.0617-9.9828-2.7636-6.516-0.7018-9.3562-1.8424-2.8403-1.1405-4.4275-3.4216-1.5872-2.281-1.5872-4.913 0-4.7375 4.4275-7.5011 4.4275-2.8074 10.568-2.8074 7.2678 0 11.821 3.7287z"/>
<path style="fill:#c8ab37" d="m613.05 55.04v-5.3078q-7.6437 6.7554-16.332 6.7554-6.3071 0-9.8575-3.3338-3.5504-3.3777-3.5504-8.2469 0-5.3517 4.6781-9.3435 4.6781-3.9919 13.658-3.9919 2.4226 0 5.2629 0.3509 2.8403 0.3071 6.14 1.009v-5.9659q0-3.0268-2.6732-5.2639-2.6732-2.2372-8.0196-2.2372-4.0934 0-11.486 2.5004-1.3366 0.4386-1.7125 0.4386-0.6683 0-1.1695-0.5264-0.45947-0.5264-0.45947-1.316 0-0.7457 0.4177-1.1844 0.58476-0.65798 4.7199-1.7985 6.516-1.8424 9.8575-1.8424 6.6413 0 10.359 3.4654 3.7174 3.4216 3.7174 7.7643v24.39h4.6781q1.2948 0 1.8378 0.5264 0.54301 0.4825 0.54301 1.316 0 0.7895-0.54301 1.316-0.543 0.5263-1.8378 0.5263h-8.2285zm0-18.336q-2.4644-0.7457-5.2211-1.0967-2.7567-0.3509-5.8059-0.3509-7.6437 0-11.946 3.4654-3.258 2.5881-3.258 6.1852 0 3.3338 2.4644 5.6149 2.5061 2.2811 7.2678 2.2811 4.5528 0 8.4373-1.8863 3.9263-1.9301 8.0614-6.0974v-8.1153z"/>
<path style="fill:#c8ab37" d="m644.28 17.08v3.7286q4.4693-5.0446 8.9803-5.0446 2.715 0 4.7616 1.5353 2.0467 1.4915 3.4251 4.5621 2.3391-3.0706 4.7199-4.5621 2.4226-1.5353 4.8452-1.5353 3.801 0 6.0565 2.5881 2.9656 3.3339 2.9656 7.2819v25.75h2.9656q1.2531 0 1.7961 0.5264 0.54299 0.4825 0.54299 1.316 0 0.7895-0.54299 1.316-0.54301 0.5263-1.7961 0.5263h-6.4742v-29.083q0-2.8075-1.629-4.6498-1.629-1.8424-3.7592-1.8424-1.9214 0-4.0516 1.5353-2.1302 1.4914-4.8452 5.922v24.434h2.9238q1.2531 0 1.7961 0.5264 0.54299 0.4825 0.54299 1.316 0 0.7895-0.54299 1.316-0.54299 0.5263-1.7961 0.5263h-6.4742v-28.82q0-2.939-1.6708-4.8253-1.629-1.9301-3.6757-1.9301-1.8796 0-3.7174 1.2721-2.5479 1.7985-5.3464 6.1852v24.434h2.9656q1.2531 0 1.7961 0.5264 0.54299 0.4825 0.54299 1.316 0 0.7895-0.54299 1.316-0.543 0.5263-1.7961 0.5263h-9.4398q-1.2531 0-1.796-0.5263-0.54301-0.5265-0.54301-1.316 0-0.8335 0.54301-1.316 0.54298-0.5264 1.796-0.5264h2.9656v-30.575h-2.9656q-1.2531 0-1.796-0.5263-0.54301-0.5265-0.54301-1.3599 0-0.78959 0.54301-1.316 0.54298-0.52638 1.796-0.52638h6.4742z"/>
<path style="fill:#c8ab37" d="m706.34 17.08v6.7116q3.1327-3.9919 6.7248-6.0097 3.5921-2.0179 8.4791-2.0179 5.1793 0 9.5651 2.5442 4.3857 2.5442 6.7666 7.1063 2.4226 4.5183 2.4226 9.519 0 7.9399-5.43 13.599-5.3882 5.6149-13.283 5.6149-9.398 0-15.246-8.0275v22.196h8.5209q1.253 0 1.7961 0.4825 0.54299 0.5264 0.54299 1.3599 0 0.7896-0.54299 1.316-0.54301 0.5264-1.7961 0.5264h-16.749q-1.2531 0-1.7961-0.5264-0.54301-0.4826-0.54301-1.316 0-0.8335 0.54301-1.3599 0.543-0.4825 1.7961-0.4825h4.7199v-47.507h-4.7199q-1.2531 0-1.7961-0.5263-0.54301-0.5265-0.54301-1.3599 0-0.78959 0.54301-1.316 0.543-0.52638 1.7961-0.52638h8.2285zm30.408 17.854q0-6.3606-4.4275-10.879-4.3857-4.5621-10.735-4.5621-6.3906 0-10.818 4.5621-4.4275 4.5621-4.4275 10.879 0 6.3607 4.4275 10.923 4.4275 4.5621 10.818 4.5621 6.3071 0 10.735-4.5182 4.4275-4.5622 4.4275-10.967z"/>
<path style="fill:#c8ab37" d="m764.62 0.02v51.368h13.784q1.2948 0 1.8378 0.5264 0.54301 0.4825 0.54301 1.316 0 0.7895-0.54301 1.316-0.54298 0.5263-1.8378 0.5263h-31.076q-1.2531 0-1.7961-0.5263-0.54297-0.5265-0.54297-1.316 0-0.8335 0.54297-1.316 0.54301-0.5264 1.7961-0.5264h13.784v-47.639h-10.108q-1.2531 0-1.8378-0.52641-0.54299-0.52639-0.54299-1.3599 0-0.78959 0.54299-1.316 0.543-0.52641 1.8378-0.52641h13.617z"/>
<path style="fill:#c8ab37" d="m827.11 36.94h-35.754q0.91892 7.1502 5.6806 11.537 4.8034 4.3428 11.862 4.3428 3.9263 0 8.2285-1.3599t7.0172-3.5971q0.7936-0.6579 1.3784-0.6579 0.6683 0 1.1695 0.5702 0.50124 0.5264 0.50124 1.2721 0 0.7458-0.6683 1.4476-2.0049 2.1933-7.1425 4.1235-5.0958 1.8862-10.484 1.8862-9.0221 0-15.079-6.1851-6.0147-6.2291-6.0147-15.046 0-8.0276 5.6388-13.774 5.6806-5.7465 14.034-5.7465 8.6044 0 14.16 5.922 5.5553 5.8781 5.4717 15.266zm-3.5504-3.7287q-1.0442-6.0974-5.5135-9.9138-4.4275-3.8163-10.568-3.8163-6.14 0-10.568 3.7725-4.4275 3.7725-5.5135 9.9576h32.162z"/>
<path style="fill:#e9c6af" d="m885 35.34-37.926 22.196q-0.91892 0.5264-1.3784 0.5264-0.71007 0-1.2531-0.5264-0.50122-0.5702-0.50122-1.316 0-1.0966 1.4201-1.9301l32.496-18.95-32.454-18.95q-1.4201-0.83345-1.4201-1.9301 0-0.74572 0.50122-1.2721 0.54301-0.57027 1.2531-0.57027 0.45948 0 1.3784 0.5264l37.89 22.15z"/>
</g>
</svg>
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="256" width="256" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 256 256">
<g id="layer1" transform="translate(0 -796.36)">
<g id="g4815">
<path id="path4763" d="m10.897 804.64h140.55l-35.083 34.507h-70.202v70.767l-35.446 32.862z" style="fill-rule:evenodd;stroke:#fff;stroke-width:1.0096px;fill:#fff"/>
<path id="path4765" style="fill-rule:evenodd;stroke:#fff;stroke-width:1.0096px;fill:#fff" d="m236.9 1027.7h-140.55l35.083-34.507h70.202v-70.767l35.446-32.862z"/>
<path id="path4767" d="m195.4 822.63h51.157l-223.71 220.75v-51.335z" style="fill-rule:evenodd;stroke:#fff;stroke-width:1.0096px;fill:#fff"/>
</g>
</g>
</svg>
</a></div>
</div>
</body>
</html>
body {
margin: 0 auto;background:#252525;
}
.contain {
position:absolute ;
left: 50%;
top: 50%;
-webkit-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
margin: 0 auto;
width: 300px;
height: 300px;
}
.contain-logo {
position:absolute ;
left: 25px;
top: 25px;
margin: 0 auto;
width: 250px;
height: 250px;
}
.drop-big {
position:absolute ;
left: 0;
top: 0;
margin: 0 auto;
width: 220px;
height: 220px;
border:15px solid black;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
background: #f16f5c; /* Old browsers */
background: -moz-linear-gradient(top, #f16f5c 0%, #f6290c 0%, #f85032 0%, #f02f17 24%, #f02f17 32%, #a01b1b 56%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f16f5c), color-stop(0%,#f6290c), color-stop(0%,#f85032), color-stop(24%,#f02f17), color-stop(32%,#f02f17), color-stop(56%,#a01b1b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f16f5c 0%,#f6290c 0%,#f85032 0%,#f02f17 24%,#f02f17 32%,#a01b1b 56%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f16f5c 0%,#f6290c 0%,#f85032 0%,#f02f17 24%,#f02f17 32%,#a01b1b 56%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f16f5c 0%,#f6290c 0%,#f85032 0%,#f02f17 24%,#f02f17 32%,#a01b1b 56%); /* IE10+ */
background: linear-gradient(to bottom, #f16f5c 0%,#f6290c 0%,#f85032 0%,#f02f17 24%,#f02f17 32%,#a01b1b 56%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16f5c', endColorstr='#a01b1b',GradientType=0 ); /* IE6-9 */
}
.drop-small {
position:absolute ;
left: 50px;
top: 50px;
margin: 0 auto;
width: 120px;
height: 120px;
border:15px solid black;
background: #252525;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
#svg1 {
position:absolute;
left: 50%;
top: 275px;
-webkit-transform:translate(-50%) scale(0.35);
-o-transform:translate(-50%) scale(0.35);
-ms-transform:translate(-50%) scale(0.35);
-moz-transform:translate(-50%) scale(0.35);
transform:translate(-50%) scale(0.35);
margin: 0 auto;
}
#svg2 {
position:absolute;
left: 50%;
top: 220px;
-webkit-transform:translate(-50%) scale(0.15);
-o-transform:translate(-50%) scale(0.15);
-ms-transform:translate(-50%) scale(0.15);
-moz-transform:translate(-50%) scale(0.15);
transform:translate(-50%) scale(0.15);
margin: 0 auto;
}
APNG Anime Maker logo adaption in pure CSS3 by CodeSample. More at https://www.facebook.com/codesamplehtmlcssjs/
Copyright (c) 2015 by CodeSample
You are free to:
Share — copy and redistribute the material in any medium or format,
Adapt — remix, transform, and build upon the material ("the code") for any purpose, even commercially.
Logo itself can not be used commercially and any remixed or transformed version that refers to it, too.
You can give appropriate credit if you want, like providing a link of the author.
If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.