悬停时图像闪烁-CSS动画

时间：2018-07-13 06:50:36

标签： css css3

悬停主图标时，图标的旋转错开，无法顺利完成旋转。通常在将鼠标悬停在图标中心时发生。我已经尝试针对另一个div，但没有任何阻止。我猜是因为它旋转时的透明度。

有什么想法吗？

提琴：https://jsfiddle.net/oxe6jg1L/26/ 

.social-icons {
    margin: 0 auto;
    width: 640px;
    height: 128px;
    position: relative;
}


.social-icons .social-icons-image {
    display: inline-block;
    position: absolute;
    width: 33%;
    height: auto;
    z-index: 2;
    opacity: 1;
    transition: all .5s;
    padding: 2%;
    box-sizing: border-box;
}

.social-icons .social-icons-image a {
    display: inline-block;
    width: 100%;
    height: 100%;
}


.social-icons img {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.social-icons a:hover img {
    width: 110%;
    height: auto;
    margin: -5%;
}

.social-icons .social-icons-image:nth-child(1) {
    left: 33.755%;   /*(nth-child(2).left - (50% * 20%)/4)*/
    top: 25%; /*((100%-50%)/2)*/
    z-index: 0;
    width: 10%; /*(50% * 20%)*/
    height: auto;
    opacity: .5;
}


.social-icons .social-icons-image:nth-child(2) {
    left: 36.25%;   /*(40% - (75% * 20%)/4)*/
    top: 12.5%; /*((100%-75%)/2)*/
    z-index: 1;
    width: 15%; /*(75% * 20%)*/
    height: auto;
    opacity: .75;
}

.social-icons .social-icons-image:nth-child(3) {
    left: 40%;
    z-index: 2;
    width: 20%;
    height: auto;
}

.social-icons .social-icons-image:nth-child(4) {
    left: 48.75%; /*(60% - 3*(75% * 20%)/4*/
    top: 12.5%; /*((100%-75%)/2)*/
    z-index: 1;
    width: 15%; /*(75% * 20%)*/
    height: auto;
    opacity: .75;
}

.social-icons .social-icons-image:nth-child(5) {
    left: 56.25%;   /*(nth-child(4).left + (nth-child(4).width- 3*(50% * 20%)/4)*/
    top: 25%; /*((100%-50%)/2)*/
    z-index: 0;
    width: 10%; /*(50% * 20%)*/
    height: auto;
    opacity: .5;
}

.social-icons-inner:hover .social-icons-image:nth-child(1) {
    top: 0px;
    left: 0%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(2) {
    top: 0px;
    left: 20%;
    width: 20%;
    opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(3) {
  top:0;

 
	-webkit-transform: rotateY(360deg);
			transform: rotateY(360deg);
	transform-style: preserve-3d;
	opacity:1;
	-webkit-transition: opacity 1s ease-in-out,
						-webkit-transform 1s ;
			transition: opacity 1s ease-in-out,
						-webkit-transform 1s ;
			transition: transform 1s,
						opacity 1s ease-in-out;
			transition: transform 1s,
						opacity 1s ease-in-out,
						-webkit-transform 1s;

}

.social-icons-inner:hover .social-icons-image:nth-child(3).active {
	-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
	opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(4) {
    top: 0px;
    left: 60%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(5) {
    top: 0px;
    left: 80%;
    width: 20%;
    opacity: 1;
}
<div class="social-icons">
<div class="social-icons-inner">
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="https://plus.google.com">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Linkedin Icon">
                </a>
            </div>
        </div>
</div>

2 个答案:

答案 0 :(得分：2)

问题是触发over事件的元素没有高度。 因此，此元素不是捕获事件，而是将其委托给内部元素（旋转的元素）。

.social-icons-inner上没有高度属性

您需要为此元素添加height:100% 

.social-icons {
    margin: 0 auto;
    width: 640px;
    height: 128px;
    position: relative;
}


.social-icons .social-icons-image {
    display: inline-block;
    position: absolute;
    width: 33%;
    height: auto;
    z-index: 2;
    opacity: 1;
    transition: all .5s;
    padding: 2%;
    box-sizing: border-box;
}

.social-icons .social-icons-image a {
    display: inline-block;
    width: 100%;
    height: 100%;
}


.social-icons img {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.social-icons a:hover img {
    width: 110%;
    height: auto;
    margin: -5%;
}

.social-icons .social-icons-image:nth-child(1) {
    left: 33.755%;   /*(nth-child(2).left - (50% * 20%)/4)*/
    top: 25%; /*((100%-50%)/2)*/
    z-index: 0;
    width: 10%; /*(50% * 20%)*/
    height: auto;
    opacity: .5;
}


.social-icons .social-icons-image:nth-child(2) {
    left: 36.25%;   /*(40% - (75% * 20%)/4)*/
    top: 12.5%; /*((100%-75%)/2)*/
    z-index: 1;
    width: 15%; /*(75% * 20%)*/
    height: auto;
    opacity: .75;
}

.social-icons .social-icons-image:nth-child(3) {
    left: 40%;
    z-index: 2;
    width: 20%;
    height: auto;
}

.social-icons .social-icons-image:nth-child(4) {
    left: 48.75%; /*(60% - 3*(75% * 20%)/4*/
    top: 12.5%; /*((100%-75%)/2)*/
    z-index: 1;
    width: 15%; /*(75% * 20%)*/
    height: auto;
    opacity: .75;
}

.social-icons .social-icons-image:nth-child(5) {
    left: 56.25%;   /*(nth-child(4).left + (nth-child(4).width- 3*(50% * 20%)/4)*/
    top: 25%; /*((100%-50%)/2)*/
    z-index: 0;
    width: 10%; /*(50% * 20%)*/
    height: auto;
    opacity: .5;
}

.social-icons-inner{
    height: 100%;
}
.social-icons-inner:hover .social-icons-image:nth-child(1) {
    top: 0px;
    left: 0%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(2) {
    top: 0px;
    left: 20%;
    width: 20%;
    opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(3) {
  top:0;

 
	-webkit-transform: rotateY(360deg);
			transform: rotateY(360deg);
	transform-style: preserve-3d;
	opacity:1;
	-webkit-transition: opacity 1s ease-in-out,
						-webkit-transform 1s ;
			transition: opacity 1s ease-in-out,
						-webkit-transform 1s ;
			transition: transform 1s,
						opacity 1s ease-in-out;
			transition: transform 1s,
						opacity 1s ease-in-out,
						-webkit-transform 1s;

}

.social-icons-inner:hover .social-icons-image:nth-child(3).active {
	-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
	opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(4) {
    top: 0px;
    left: 60%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(5) {
    top: 0px;
    left: 80%;
    width: 20%;
    opacity: 1;
}
    <div class="social-icons">
<div class="social-icons-inner">
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="https://plus.google.com">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Linkedin Icon">
                </a>
            </div>
        </div>
</div>

答案 1 :(得分：1)

问题是当旋转元素时，:hover状态失败，因为它正在旋转并且处于悬停状态。

旋转其中的a元素，而不是实际的元素：

.social-icons-inner:hover .social-icons-image:nth-child(3) a {...}

https://jsfiddle.net/oxe6jg1L/27/ 

.social-icons {
    margin: 0 auto;
    width: 640px;
    height: 128px;
    position: relative;
}


.social-icons .social-icons-image {
    display: inline-block;
    position: absolute;
    width: 33%;
    height: auto;
    z-index: 2;
    opacity: 1;
    transition: all .5s;
    padding: 2%;
    box-sizing: border-box;
}

.social-icons .social-icons-image a {
    display: inline-block;
    width: 100%;
    height: 100%;
}


.social-icons img {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.social-icons a:hover img {
    width: 110%;
    height: auto;
    margin: -5%;
}

.social-icons .social-icons-image:nth-child(1) {
    left: 33.755%;   /*(nth-child(2).left - (50% * 20%)/4)*/
    top: 25%; /*((100%-50%)/2)*/
    z-index: 0;
    width: 10%; /*(50% * 20%)*/
    height: auto;
    opacity: .5;
}


.social-icons .social-icons-image:nth-child(2) {
    left: 36.25%;   /*(40% - (75% * 20%)/4)*/
    top: 12.5%; /*((100%-75%)/2)*/
    z-index: 1;
    width: 15%; /*(75% * 20%)*/
    height: auto;
    opacity: .75;
}

.social-icons .social-icons-image:nth-child(3) {
    left: 40%;
    z-index: 2;
    width: 20%;
    height: auto;
}

.social-icons .social-icons-image:nth-child(4) {
    left: 48.75%; /*(60% - 3*(75% * 20%)/4*/
    top: 12.5%; /*((100%-75%)/2)*/
    z-index: 1;
    width: 15%; /*(75% * 20%)*/
    height: auto;
    opacity: .75;
}

.social-icons .social-icons-image:nth-child(5) {
    left: 56.25%;   /*(nth-child(4).left + (nth-child(4).width- 3*(50% * 20%)/4)*/
    top: 25%; /*((100%-50%)/2)*/
    z-index: 0;
    width: 10%; /*(50% * 20%)*/
    height: auto;
    opacity: .5;
}

.social-icons-inner:hover .social-icons-image:nth-child(1) {
    top: 0px;
    left: 0%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(2) {
    top: 0px;
    left: 20%;
    width: 20%;
    opacity: 1;
}
.social-icons-inner:hover .social-icons-image:nth-child(3) a{
  top:0;

 
	-webkit-transform: rotateY(360deg);
			transform: rotateY(360deg);
	transform-style: preserve-3d;
	opacity:1;
	-webkit-transition: opacity 1s ease-in-out,
						-webkit-transform 1s ;
			transition: opacity 1s ease-in-out,
						-webkit-transform 1s ;
			transition: transform 1s,
						opacity 1s ease-in-out;
			transition: transform 1s,
						opacity 1s ease-in-out,
						-webkit-transform 1s;

}

.social-icons-inner:hover .social-icons-image:nth-child(3).active {
	-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
	opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(4) {
    top: 0px;
    left: 60%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(5) {
    top: 0px;
    left: 80%;
    width: 20%;
    opacity: 1;
}
<div class="social-icons">
<div class="social-icons-inner">
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="https://plus.google.com">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Linkedin Icon">
                </a>
            </div>
        </div>
</div>

相关问题
最新问题