                        課程
                    
                        /前端開發
                        
                            /CSS3
                        
                        /CSS3圖片動態提示效果

想知道那個井子框怎么寫哦！??！太笨了沒反應過來

想知道那個井子框怎么寫哦?。。√苛?沒反應過來

00:30

Angelacc

2017-05-09

源自：CSS3圖片動態提示效果 4-1

關注問題我要回答

1340

操作

收起

3 回答

我的大清完了
2018-11-28

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

</body>

<style>

padding: 0;

margin: 0;

}

.root{

width: 300px;

height: 300px;

background: rgba(255,0,0,.3);

position: relative;

}

.line-h,.line-v{

position: absolute;

width: 200px;

height: 200px;

left: 50px;

top: 50px;

transition: all .4s linear;

opacity: 0;

}

.line-h{

transform: scaleX(0);

border-top: 1px solid #000;

border-bottom: 1px solid #000;

}

.line-v{

transform: scaleY(0);

border-left: 1px solid #000;

border-right: 1px solid #000;

}

.root:hover .line-h{

opacity: 1;

transform: scaleX(1.2);

}

.root:hover .line-v{

opacity: 1;

transform: scaleY(1.2);

}

</style>

</html>

1 回復有任何疑惑可以回復我~

收起回答

Angelacc 提問者
2017-05-10

.test7{
	background:?#008000;
}
.test7?figcaption{
	width:?100%;
	height:?100%;
	
}
.test7?figcaption?div.one{
	width:?70%;
	height:?90%;
	border-right:?2px?solid?#FFFFFF;
	border-left:?2px?solid?#FFFFFF;
	position:?absolute;
	top:?5%;
	left:?10%;
	opacity:?0;
	transform:?scale(0,1);
}

.test7?figcaption?div.two{
	width:?80%;
	height:?70%;
	border-top:?2px?solid?#FFFFFF;
	border-bottom:?2px?solid?#FFFFFF;
	position:?absolute;
	top:?15%;
	left:5%;
	opacity:?0;
	transform:?scale(0,1);
}
.test7?figcaption?h2{
	position:?absolute;
	top:?20%;
	left:15%;
	opacity:?0;
	transform:?scale(0.5,0.5);
}

.test7?figcaption?p{
	position:?absolute;
	top:?40%;
	left:?15%;
	opacity:?0;
	transform:?scale(0.5,0.5);
}
.test7?img{
	transform:?scale(1.1,1.1);
	opacity:?1;
}

.test7:hover?figcaption?div.one{
	transform:?scale(1,-1);
	opacity:?1;
	transition-delay:?0.1s;
	
}

.test7:hover?figcaption?div.two{
	transform:?scale(1,-1);
	opacity:?1;
	transition-delay:?0.15s;
}
.test7:hover?figcaption?h2{
	transform:?scale(1,1);
	opacity:?1;
	transition-delay:?0.2s;
}

.test7:hover?figcaption?p{
	transform:?scale(1,1);
	opacity:?1;
	transition-delay:?0.3s;
}

.test7:hover?img{
	transform:?scale(1,1);
	opacity:?0.5;
}

<figure?class="test7">
		<img?src="img/ti899.jpg">
		<figcaption>
??????????<h2>圖片標題</h2>
??????????<p>線性動畫</p>
??????????<div?class="one"></div>
??????????<div?class="two"></div>
????????</figcaption>
	
	</figure>

經過測試沒啥問題，分享下