Template:Bielefeld-CeBiTec/css/animated-arc-popup

<style type="text/css"> body {

 font: .75em/1.2;
 background: #f2f2f2;
 background: linear-gradient(left, #f2f2f2, #dddddd);
 background: -moz-linear-gradient(left, #f2f2f2, #dddddd);
 background: -webkit-linear-gradient(left, #f2f2f2, #dddddd);
 background: -o-linear-gradient(left, #f2f2f2, #dddddd);

}

a:focus { outline: none; }

h3 { text-shadow: 0 2px #ccc; }

.tc { text-align: center; }

1. navs {

 position: fixed;
 left: 150px;
 bottom: 150px;
 width: 40px;
 height: 40px;
 line-height: 40px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 text-align: center;
 color: #fff;
 cursor: pointer;

}

1. navs>li,
2. navs:after {

 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background-color: #e74c3c;

}

1. navs>li {

 transition: all .6s;
 -webkit-transition: all .6s;
 -moz-transition: .6s;

}

1. navs:after {

 content: attr(data-close);
 z-index: 1;
 border-radius: 50%;
 -webkit-border-radius: 50%;

}

1. navs.active:after { content: attr(data-open); }

1. navs a {

 width: 40px;
 height: 40px;
 display: inline-block;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 text-decoration: none;
 color: #fff;
 font-size: 0.8em;

} </style>