css 一支笔由seth kontny。

Posted 2021-05-13

Simple Logo Animation
---------------------


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

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

<div class="holder">
  <div class="a">Seth>Kontny</div>
  <div class="thing1 seg"></div>
  <div class="thing2 seg"></div>
  <div class="thing3 seg"></div>
  <div class="thing4 seg"></div>
  <div class="thing5 seg"></div>
  <div class="thing6 seg"></div>
  <div class="thing7 seg"></div>
  <div class="thing8 seg"></div>
</div>

@import url(http://fonts.googleapis.com/css?family=Frijole);

body{
  font-family: 'Frijole' ;
  background:#222;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.seg{
  position:absolute;
  height:1330px;
  width:1.61803398875 px;
  border-radius:1.61803398875 %;
  border:15px dashed transparent;
  border-left-color:cyan;
  opacity:0;
  -webkit-animation:pulse 700ms infinite ease-out;
}

.a{
  position:absolute;
  color:cyan;
  font-size:45px;
  height:25px;
  width:25px;
  top:37px;
  left:37px;
}


.holder{
  position:relative;
  height:110px;
  width:110px;
  margin:10% auto;
  border-radius:50%;
  border:4px double cyan;
  padding:10px;
  box-shadow:0px 0px 30px cyan, 0px 0px 40px cyan, 0px 0px 20px cyan;
  -webkit-animation:glow 5s infinite ease-in-out;
}


.thing1 {
  
}

.thing2{
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-animation-delay:100ms;
}
.thing3{
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  -webkit-animation-delay:200ms;
}

.thing4{
  -webkit-transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  transform:rotate(135deg);
  -webkit-animation-delay:300ms;
}

.thing5{
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg) ;
  transform:rotate(180deg);
  -webkit-animation-delay:400ms;
}


.thing6{
  -webkit-transform:rotate(225deg);
  -moz-transform:rotate(225deg);
  -ms-transform:rotate(225deg);
  -o-transform:rotate(225deg);
  transform:rotate(225deg);
  -webkit-animation-delay:500ms;
}

.thing7{
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -ms-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  transform:rotate(270deg);
  -webkit-animation-delay:600ms;
}

.thing8{
  -webkit-transform:rotate(315deg);
  -moz-transform:rotate(315deg);
  -ms-transform:rotate(315deg);
  -o-transform:rotate(315deg);
  transform:rotate(315deg);
  -webkit-animation-delay:700ms;
}

@-webkit-keyframes pulse {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: .5; }
  100% { opacity: 0; }
}


@-webkit-keyframes glow {
  0% {  box-shadow:0px 0px 30px cyan, 0px 0px 40px cyan, 0px 0px 20px cyan; -webkit-transform:scale(.9) }
  50% {  box-shadow:0px 0px 0px cyan;-webkit-transform:scale(1);}
  100% {  box-shadow:0px 0px 30px cyan, 0px 0px 40px cyan, 0px 0px 20px cyan;-webkit-transform:scale(.9) }
}