css 一支笔由seth kontny。

Posted 2021-05-13

Pearl / Pin Icon - One Element
------------------------------
Inspired by -
http://dribbble.com/shots/1222185-Pearl-Pin-Icon

On the First shot i like the design and thought to convert it into real live object. 

I have added small animation to show open/close wings effect ;-) 

I hope you people like it. 

And YES its a single element experiment.

Thanks in Advance.

A [Pen](http://codepen.io/sethkontny/pen/HqmtE) by [seth kontny](http://codepen.io/sethkontny) on [CodePen](http://codepen.io/).

[License](http://codepen.io/sethkontny/pen/HqmtE/license).

<div id="pearl"></div>

body {
  padding:0px;
  background:#fff;
}

#pearl
{
position:absolute;
width:15em;
height:15em;
border-radius:50%;
background:#1FB0FF;
margin:1em 40% 0em;
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
-webkit-animation:bigwing 2s infinite;
-moz-animation:bigwing 2s infinite;
-o-animation:bigwing 2s infinite;
-ms-animation:bigwing 2s infinite;
animation:bigwing 2s infinite;
}

#pearl:before
{
content:"";
width:14em;
height:7em;
background: #A2DFFF;
left: 13.1em;
top: 10em;
border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
position:absolute;
z-index:-1;
box-shadow:-26.3em 0em 0em 0em #0074B2;
-webkit-animation:smallwing 2s infinite;
-o-animation:smallwing 2s infinite;
-moz-animation:smallwing 2s infinite;
-ms-animation:smallwing 2s infinite;
animation:smallwing 2s infinite;
}
#pearl:after
{ 
content:"";
width:10em;
height:10em;
background:radial-gradient(circle, white 35%, #F1765E 10%) 0px 0px no-repeat;
left: 2.5em;
top: 10em;
border-radius:100% 80% 100% 0% / 100% 80% 100% 0%;
position:absolute;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
box-shadow:0em 0em 0em 2.5em #fff,0em 0em 1em 2.5em #ccc,0em 0em 0em 2.6em #f2f2f2;
}

@-webkit-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-webkit-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@-moz-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-moz-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@-o-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-o-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@-ms-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-ms-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}