Flat iOS 7 Safari Icon

Just for fun making experiments with iOS 7 flat design icons.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flat iOS 7 Safari Icon</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
	background-color: #fafafa;
	min-width: 400px;
	min-height: 300px;
}
.safari {
	margin: 20px auto;
	position: relative;
	width: 256px;
	height: 256px;
	border-radius: 62px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,197,252,1)), color-stop(100%,rgba(52,183,235,1)));
	background: -webkit-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: -moz-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: -o-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: -ms-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
}
.safari:before {
	content: "";
	display: block;
	height: 192px;
	width: 192px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -104px 0 0 -104px; /* 96+8 */
border-radius: 100%;
	border: 8px solid #fff;
}
.needle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	height: 0;
	width: 0;
	display: block;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	cursor: pointer;
}
.needle:before,.needle:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: -11.25px;
}
.needle:before {
	right: 0;
	border-width: 11.25px 90px 11.25px 0;
	border-color: transparent #f75a49 transparent transparent;
}
.needle:after {
	left: 0;
	border-width: 11.25px 0 11.25px 90px;
	border-color: transparent transparent transparent #fff;
}
.safari .needle {
	-webkit-animation: rotateAnimation 5s infinite;
	-moz-animation: rotateAnimation 5s infinite;
	-ms-animation: rotateAnimation 5s infinite;
	-o-animation: rotateAnimation 5s infinite;
	animation: rotateAnimation 5s infinite;
}
@keyframes "rotateAnimation" {
 0% {
    -webkit-transform: rotate(-45deg);
   	-moz-transform: rotate(-45deg);
   	-o-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   	transform: rotate(-45deg);
 }
 33% {
    -webkit-transform: rotate(-30deg);
   	-moz-transform: rotate(-30deg);
   	-o-transform: rotate(-30deg);
   	-ms-transform: rotate(-30deg);
   	transform: rotate(-30deg);
 }
 66% {
    -webkit-transform: rotate(-60deg);
   	-moz-transform: rotate(-60deg);
   	-o-transform: rotate(-60deg);
   	-ms-transform: rotate(-60deg);
   	transform: rotate(-60deg);
 }
 100% {
    -webkit-transform: rotate(-45deg);
   	-moz-transform: rotate(-45deg);
   	-o-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   	transform: rotate(-45deg);
 }
}
@-moz-keyframes rotateAnimation {
 0% {
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 33% {
   -moz-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 66% {
   -moz-transform: rotate(-60deg);
   transform: rotate(-60deg);
 }
 100% {
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
}
@-webkit-keyframes "rotateAnimation" {
 0% {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 33% {
   -webkit-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 66% {
   -webkit-transform: rotate(-60deg);
   transform: rotate(-60deg);
 }
 100% {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
}
@-ms-keyframes "rotateAnimation" {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
 33% {
   -ms-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 66% {
   -ms-transform: rotate(-60deg);
   transform: rotate(-60deg);
 }
 100% {
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
}
 @-o-keyframes "rotateAnimation" {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
 33% {
    -webkit-transform: rotate(-30deg);
   	-moz-transform: rotate(-30deg);
   	-o-transform: rotate(-30deg);
   	-ms-transform: rotate(-30deg);
   	transform: rotate(-30deg);
 }
 66% {
    -webkit-transform: rotate(-60deg);
   	-moz-transform: rotate(-60deg);
   	-o-transform: rotate(-60deg);
   	-ms-transform: rotate(-60deg);
   	transform: rotate(-60deg);
 }
 100% {
    -webkit-transform: rotate(-45deg);
   	-moz-transform: rotate(-45deg);
   	-o-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   	transform: rotate(-45deg);
 }

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="safari">
	<div class="needle"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
	background-color: #fafafa;
	min-width: 400px;
	min-height: 300px;
}
.safari {
	margin: 20px auto;
	position: relative;
	width: 256px;
	height: 256px;
	border-radius: 62px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,197,252,1)), color-stop(100%,rgba(52,183,235,1)));
	background: -webkit-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: -moz-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: -o-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: -ms-linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
	background: linear-gradient(top, rgba(56,197,252,1) 0%,rgba(52,183,235,1) 100%);
}
.safari:before {
	content: "";
	display: block;
	height: 192px;
	width: 192px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -104px 0 0 -104px; /* 96+8 */
border-radius: 100%;
	border: 8px solid #fff;
}
.needle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	height: 0;
	width: 0;
	display: block;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	cursor: pointer;
}
.needle:before,.needle:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: -11.25px;
}
.needle:before {
	right: 0;
	border-width: 11.25px 90px 11.25px 0;
	border-color: transparent #f75a49 transparent transparent;
}
.needle:after {
	left: 0;
	border-width: 11.25px 0 11.25px 90px;
	border-color: transparent transparent transparent #fff;
}
.safari .needle {
	-webkit-animation: rotateAnimation 5s infinite;
	-moz-animation: rotateAnimation 5s infinite;
	-ms-animation: rotateAnimation 5s infinite;
	-o-animation: rotateAnimation 5s infinite;
	animation: rotateAnimation 5s infinite;
}
@keyframes "rotateAnimation" {
 0% {
    -webkit-transform: rotate(-45deg);
   	-moz-transform: rotate(-45deg);
   	-o-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   	transform: rotate(-45deg);
 }
 33% {
    -webkit-transform: rotate(-30deg);
   	-moz-transform: rotate(-30deg);
   	-o-transform: rotate(-30deg);
   	-ms-transform: rotate(-30deg);
   	transform: rotate(-30deg);
 }
 66% {
    -webkit-transform: rotate(-60deg);
   	-moz-transform: rotate(-60deg);
   	-o-transform: rotate(-60deg);
   	-ms-transform: rotate(-60deg);
   	transform: rotate(-60deg);
 }
 100% {
    -webkit-transform: rotate(-45deg);
   	-moz-transform: rotate(-45deg);
   	-o-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   	transform: rotate(-45deg);
 }
}
@-moz-keyframes rotateAnimation {
 0% {
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 33% {
   -moz-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 66% {
   -moz-transform: rotate(-60deg);
   transform: rotate(-60deg);
 }
 100% {
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
}
@-webkit-keyframes "rotateAnimation" {
 0% {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 33% {
   -webkit-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 66% {
   -webkit-transform: rotate(-60deg);
   transform: rotate(-60deg);
 }
 100% {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
}
@-ms-keyframes "rotateAnimation" {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
 33% {
   -ms-transform: rotate(-30deg);
   transform: rotate(-30deg);
 }
 66% {
   -ms-transform: rotate(-60deg);
   transform: rotate(-60deg);
 }
 100% {
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
}
 @-o-keyframes "rotateAnimation" {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
 33% {
    -webkit-transform: rotate(-30deg);
   	-moz-transform: rotate(-30deg);
   	-o-transform: rotate(-30deg);
   	-ms-transform: rotate(-30deg);
   	transform: rotate(-30deg);
 }
 66% {
    -webkit-transform: rotate(-60deg);
   	-moz-transform: rotate(-60deg);
   	-o-transform: rotate(-60deg);
   	-ms-transform: rotate(-60deg);
   	transform: rotate(-60deg);
 }
 100% {
    -webkit-transform: rotate(-45deg);
   	-moz-transform: rotate(-45deg);
   	-o-transform: rotate(-45deg);
   	-ms-transform: rotate(-45deg);
   	transform: rotate(-45deg);
 }
/* Downloaded from https://www.codeseek.co/ */
/***
This is a CSS3 Flat iOS 7 Safari Icon.

Design: 
  Vladimir Carrer
  http://drbl.in/hUDR

Front-End: 
  Rıza Selçuk Saydam
  http:/rss-ems.com

***/

This awesome code ( Flat iOS 7 Safari Icon ) is write by Rıza Selçuk Saydam, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Rıza Selçuk Saydam