IF语句淡入文本css

时间：2018-03-24 13:16:07

标签： html css animation

我正在尝试在CSS中创建等效的IF语句。我有一个围绕一个较大圆圈旋转的小圆圈。当较小的圆圈到达我希望淡入中心文本的每个点时。

不确定是否可以使用CSS来说明，当小圆圈到达x / y点然后激活文本动画中的淡入淡出。

enter image description here 

@keyframes clockwiseRotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes counterClockwiseRotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

i {
    animation: counterClockwiseRotate 25s linear infinite
}


body {
    background-color: #022052;
}

.circle1{
    border: 1px solid #0462FF;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 24.3%;
    top: 30px;
    border-radius: 50%;
}

.link{
    color:#fff;
    width:20px;
    height: 20px;
    border-radius:50%;
    border:1px solid #444;
    position: absolute;
    text-align: center;
    line-height:33px;
}

.fb{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(40px,40px);
}

.cp{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(285px,40px);
}

.li{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(300px,270px);
}

.tw{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(25px,270px);
}

.an{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(25px,270px);
}

.circle2{
    border: 1px solid #0462FF;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 24.3%;
    top: 30px;
    border-radius: 50%;
    animation: clockwiseRotate 25s linear infinite;
}

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Rotating circle</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet">

<link rel='stylesheet prefetch' 

href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/
materialize.min.css'>

<link rel="stylesheet" href="css/style.css">


</head>

<body>

<ul class="circle2">

<li class="link an"><i class="an an-new"></i></li>


</ul>

<ul class="circle1">



<li class="link fb"><i class="fa fa-facebook"></i></li>
        <li class="link tw"><i class="fa fa-twitter"></i></li>
        <li class="link li"><i class="fa fa-linkedin"></i></li>
        <li class="link cp"><i class="fa fa-codepen"></i></li>


    </ul>



</body>

</html>

2 个答案:

答案 0 :(得分：0)

以下是如何根据参数完成淡化文本的工作示例。鉴于您只有四个点，它很容易计算。在我的例子中，我使用了百分比和不透明度。

＆＃13;
＆＃13; 
@keyframes clockwiseRotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes counterClockwiseRotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

i {
    animation: counterClockwiseRotate 25s linear infinite
}


body {
    background-color: #022052;
}

.circle1{
    border: 1px solid #0462FF;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 24.3%;
    top: 30px;
    border-radius: 50%;
}

.link{
    color:#fff;
    width:20px;
    height: 20px;
    border-radius:50%;
    border:1px solid #444;
    position: absolute;
    text-align: center;
    line-height:33px;
}

.fb{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(40px,40px);
}

.cp{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(285px,40px);
}

.li{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(300px,270px);
}

.tw{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(25px,270px);
}

.an{
    background:#0462FF;
    border-color:#0462FF;
    transform:translate(25px,270px);
}

.circle2{
    border: 1px solid #0462FF;
    width: 350px;
    height: 350px;
    position: absolute;
    left: 24.3%;
    top: 30px;
    border-radius: 50%;
    animation: clockwiseRotate 25s linear infinite;
}
.circle3 {
    width: 350px;
    height: 350px;
    position: absolute;
    left: 24.3%;
    top: 30px;
    border-radius: 50%;
}
.circle3 > li {
    width: 350px;
    height: 350px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #FFF;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
}
.circle3 > li.facebook {
  animation: fadeFacebook 25s linear infinite;
}
.circle3 > li.twitter {
  animation: fadeTwitter 25s linear infinite;
}
.circle3 > li.linkedin {
  animation: fadeLinkedin 25s linear infinite;
}
.circle3 > li.codepen {
  animation: fadeCodepen 25s linear infinite;
}
@keyframes fadeTwitter {
  0%, 20% {
    opacity: 1;
  }
  25%, 95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeFacebook {
  0%, 20% {
    opacity: 0;
  }
  25%, 45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes fadeCodepen {
  0%, 45% {
    opacity: 0;
  }
  50%, 70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
}
@keyframes fadeLinkedin {
  0%, 70% {
    opacity: 0;
  }
  75%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
＆＃13; 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css'>

<ul class="circle2">
  <li class="link an"><i class="an an-new"></i></li>
</ul>

<ul class="circle1">
  <li class="link fb"><i class="fa fa-facebook"></i></li>
  <li class="link tw"><i class="fa fa-twitter"></i></li>
  <li class="link li"><i class="fa fa-linkedin"></i></li>
  <li class="link cp"><i class="fa fa-codepen"></i></li>
</ul>

<ul class="circle3">
  <li class="text facebook">Facebook</li>
  <li class="text twitter">Twitter</li>
  <li class="text linkedin">Linkedin</li>
  <li class="text codepen">Codepen</li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我已根据transition时间为您创建了一个示例...您只需要制作两个animation，一个用于旋转圆rotate，第二个用于文字淡出fade ...您还需要使用一些animation-delay ... 

* {
  box-sizing: border-box;
}

.circle {
  font: 13px Verdana;
  width: 150px;
  height: 150px;
  background: #022052;
  border-radius: 50%;
  margin: 30px auto 0;
  position: relative;
  box-shadow: 0 0 0 10px #022052;
}

.circle i {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #0e61fb;
  border-radius: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.circle i.fa-facebook {
  left: calc(90%);
  top: calc(10%);
}

.circle i.fa-twitter {
  left: calc(90%);
  top: calc(90%);
}

.circle i.fa-linkedin {
  left: calc(10%);
  top: calc(90%);
}

.circle i.fa-codepen {
  left: calc(10%);
  top: calc(10%);
}

.pin,
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
}

.pin {
  animation: rotate 8s linear infinite;
}

.pin:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #0e61fb;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade {
  0%,
  12.5% {
    opacity: 0;
  }
  12.6%,
  37.5% {
    opacity: 1;
  }
  37.6%,
  100% {
    opacity: 0;
  }
}

.text p {
  position: absolute;
  margin: 0;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fade 8s linear infinite;
  color: #fff;
}

.text p:nth-child(1) {
  animation-delay: 0s;
}

.text p:nth-child(2) {
  animation-delay: 2s;
}

.text p:nth-child(3) {
  animation-delay: 4s;
}

.text p:nth-child(4) {
  animation-delay: 6s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="circle">
  <div class="pin"></div>
  <div class="text">
    <p>Facebook</p>
    <p>Twitter</p>
    <p>Linkedin</p>
    <p>Codepen</p>
  </div>
  <i class="fa fa-facebook"></i>
  <i class="fa fa-twitter"></i>
  <i class="fa fa-linkedin"></i>
  <i class="fa fa-codepen"></i>
</div>

相关问题
最新问题