Question

我在另一个网站上看到了一个同心环动画，并开始自己构建它。我被困在两个问题上：

1）如何反转转换，以便当您将环形标度悬停并向后淡出时？

2）关于如何使动画更流畅的任何想法？如果这是有道理的话，感觉它过于严格。

<div class="container group">
    <div class="rings">
        <div id="main-circle">
            <div id="inner-circle"></div>
        </div>
        <div id="ring1"></div>
        <div id="ring2"></div>
        <div id="ring3"></div>
        <div id="ring4"></div>
        <div id="ring5"></div>
    </div>
</div>

这是CSS：

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    background-color: #fff;
    font-size: 100%;
    line-height: 1.5;
    padding: 2.5em 0;
}
.container {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    padding: 3em 0;
}
.group:after {
    content: "";
    display: table;
    clear: both;
}

.rings {    
    margin: 0 auto;
    position: relative;
    width: 200px;
    height: 200px;
}
.rings:hover #ring1, .rings:hover #ring2, .rings:hover #ring3, .rings:hover #ring4, .rings:hover #ring5 {
    transform: scale(1);
    opacity: 1;
}
.rings:hover #ring1 {
    transition-delay: 0.2s;
}
.rings:hover #ring2 {
    transition-delay: 0.4s;
}
.rings:hover #ring3 {
    transition-delay: 0.6s;
}
.rings:hover #ring4 {
    transition-delay: 0.8s;
}
.rings:hover #ring5 {
    transition-delay: 1s;
}
#main-circle {
    background-color: #75a347;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5%;
    margin-top: -12.5%;
    width: 25%;
    height: 25%; 
}
#inner-circle{
    background-color: #ededed;
    border-radius: 50%; 
    margin: 25% 0 0 25%;
    position: absolute;
    width: 50%;
    height: 50%;
}

#ring1, #ring2, #ring3, #ring4, #ring5 {
    border: 1px solid #ededed;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
}
@mixin ring-size-position($top, $left, $width, $height) {
    margin-top: $top;
    margin-left: $left;
    width: $width;
    height: $height;
}
#ring1 {
    @include ring-size-position(-20%, -20%, 40%, 40%);
}
#ring2 {
    @include ring-size-position(-27.5%, -27.5%, 55%, 55%);
}
#ring3 {
    @include ring-size-position(-35%, -35%, 70%, 70%);
}
#ring4 {
    @include ring-size-position(-42.5%, -42.5%, 85%, 85%);
}
#ring5 {
    @include ring-size-position(-50%, -50%, 100%, 100%);
}

Answer 1

用cubic-bezier得到它：

HTML：

<div class="container group">
    <div class="ring-wrapper">
        <div id="main-circle">
            <div id="inner-circle"></div>
        </div>
        <div id="ring1"></div>
        <div id="ring2"></div>
        <div id="ring3"></div>
        <div id="ring4"></div>
        <div id="ring5"></div>
    </div>
</div>

SCSS：

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    background-color: #fff;
    font-size: 100%;
    line-height: 1.5;
    padding: 2.5em 0;
}
.container {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    padding: 3em 0;
}
.group:after {
    content: "";
    display: table;
    clear: both;
}
.ring-wrapper { 
    margin: 0 auto;
    position: relative;
    width: 200px;
    height: 200px;
}
.ring-wrapper:hover #main-circle {
  border: 1px solid #fff;
}

// Initial main green circle with inner white circle
#main-circle {
    background-color: #54bc99;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5%;
    margin-top: -12.5%;
    width: 25%;
    height: 25%;
  z-index: 6;
}
#inner-circle{
    background-color: #ededed;
    border-radius: 50%; 
    margin: 25% 0 0 25%;
    position: absolute;
    width: 50%;
    height: 50%;
}

// Iterate through and add properties and handle delay
@for $i from 1 through 5 {
    #ring#{$i} {
        border: 1px solid #ededed;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
    transform: scale(0);
    transition: all 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000); 
    /* cubic-bezier above = easeInOutExpo from http://matthewlein.com/ceaser/ */
    transition-delay: (#{$i * 0.2s}); 
  }
}

// Create mixin for repeated ring properties
@mixin ring-size-position($top, $left, $width, $height, $z) {
    margin-top: $top;
    margin-left: $left;
    width: $width;
    height: $height;
  z-index: $z;
}
#ring1 {
  background-color: #54bc99;
    @include ring-size-position(-20%, -20%, 40%, 40%, 5);
}
#ring2 {
    @include ring-size-position(-27.5%, -27.5%, 55%, 55%, 4);
}
#ring3 {
    @include ring-size-position(-35%, -35%, 70%, 70%, 3);
}
#ring4 {
    @include ring-size-position(-42.5%, -42.5%, 85%, 85%, 2);
}
#ring5 {
    @include ring-size-position(-50%, -50%, 100%, 100%, 1);
}

// Create list of delays and iterate with @each loop
$delays-list: 0.2s 0.4s 0.6s 0.8s 1s;

@each $current-delay in $delays-list {
    $i: index($delays-list, $current-delay);
    .ring-wrapper:hover #ring#{$i} {
    opacity: 1;
    transform: scale(1);
        transition-delay: $current-delay;
    }
}

CSS同心环动画

1 个答案: