課程
/前端開發
/CSS3
/CSS3圖片動態提示效果
當鼠標放上去的時候，有平移效果，可是圖片的背景也露了出來，不是老師視頻里展現的哪種平移效果，求各位大神幫幫忙
2017-07-22
源自：CSS3圖片動態提示效果 2-3
正在回答
我把p標簽下的內容設置delay沒有問題 加了個h2后p標簽的delay都失效了光會回來 沒有動畫了 是為什么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{
? ? ? padding: 0;
? ? ? margin: 0;
? ? }
? ? #d1{
? ? ? width: 400px;
? ? ? height: 400px;
? ? ? margin: auto;
? ? ? border: 1px solid red;
? ? ? transition: all 2s;
? ? ?background: url(infi/2.jpg);
? ? ??
? ?#d1:hover {
? ? ?transform: translate(100px,100px) ;
? ?}
? </style>
</head>
<body >
<div id="d1">
? ?</div>
? ? ? ? ? ??
</body>
</html>
舉報
實用的CSS3圖片動態提示效果，熟練掌握CSS動畫的制作技法
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
<label id="9md1w"></label>
2018-04-04
我把p標簽下的內容設置delay沒有問題
加了個h2后p標簽的delay都失效了
光會回來 沒有動畫了 是為什么
2017-07-23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{
? ? ? padding: 0;
? ? ? margin: 0;
? ? }
? ? #d1{
? ? ? width: 400px;
? ? ? height: 400px;
? ? ? margin: auto;
? ? ? border: 1px solid red;
? ? ? transition: all 2s;
? ? ?background: url(infi/2.jpg);
? ? ??
? ? }
? ?#d1:hover {
? ? ?transform: translate(100px,100px) ;
? ?}
? </style>
</head>
<body >
<div id="d1">
? ?</div>
? ? ? ? ? ??
</body>
</html>