                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /CSS3
                        
                        /CSS3圖片動(dòng)態(tài)提示效果

animation問(wèn)題

很奇怪，我做的P標(biāo)簽進(jìn)來(lái)的時(shí)候是一個(gè)一個(gè)進(jìn)來(lái)的，但是隱藏的時(shí)候都是同時(shí)消失的，是不是什么屬性沒(méi)加上？

Darcy2015

2015-09-19

源自：CSS3圖片動(dòng)態(tài)提示效果 3-1

關(guān)注問(wèn)題我要回答

811

操作

收起

2 回答

Darcy2015 提問(wèn)者
2015-09-19

用sass寫(xiě)的

@charset "UTF-8";
@import "reset.css";

*{
??? margin: 0;
??? padding: 0;
}

.animation{

??? background: #ffffff;
??? font-size: 62.5%;

??? figure{
??????? float: left;
??????? width: 33.33%;
??????? overflow: hidden;
??????? position: relative;
??????? transition: all 0.35s;

??????? img{
??????????? display: block;
??????????? width: 100%;
??????????? opacity: 0.8;
??????????? transition: all 0.35s;
??????????? transform: translate(0, 0);
??????? }
??? }

??? figcaption{
??????? position: absolute;
??????? top: 20px;
??????? left: 20px;

??????? p{
??????????? background: #f1f1f1;
??????????? color: #FF7256;
??????????? text-align: center;
??????????? font-size: 16px;
??????????? line-height: 30px;
??????????? margin: 10px 0;
??????????? transition: all 0.35s;
??????????? transform: translate(-180px, 0);
??????? }

??? }

??? .test:hover{
??????? img{
??????????? opacity: 0.2;
??????????? transform: translate(-50px, 0);
??????? }

??????? figcaption{
??????????? p{
?????????????? transform: translate(0, 0);
??????????? }
??????????? p:nth-of-type(1){transition-delay: 0.05s;}
??????????? p:nth-of-type(2){transition-delay: 0.1s;}
??????????? p:nth-of-type(3){transition-delay: 0.15s;}
??????? }

??? }

}

@media screen and (max-width: 600px) {
??? .animation figure{
??????? width: 100%;
??? }
}

@media screen and (min-width:601px) and (max-width:1000px) {
??? .animation figure{
??????? width: 50%;
??? }
}

@media screen and (min-width: 1001px) {
??? .animation figure{
??????? width: 33.33%;
??? }
}