整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用css3寫了個滾動特效，可以向左滾動、向右滾動，方向自由控制，沒用JavaScript或者jQuery純css3寫的，鼠標懸停在上面時可以終止動畫，純css3滾動特效和JavaScript或者jQuery寫的效果一樣。熟悉css3的animation動畫屬性一下就很好理解原理，具體的請看效果和代碼吧！點擊我看演示（地址：http://tangjiusheng.com/e/demo/css3-rolled）
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="baidu-site-verification" content="ZP6BgXCtjB" />
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta name="applicable-device" content="pc">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>純css3滾動特效代碼</title>
<style type="text/css">
.rolled{
position:fixed;bottom:20%;z-index:9999999;
-webkit-animation:rolled 50s .2s ease both infinite;
-moz-animation:rolled 50s .2s ease both infinite;
-o-animation:rolled 50s .2s ease both infinite;
-ms-animation:rolled 50s .2s ease both infinite;
}
.rolled:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
-ms-animation-play-state:paused;
}
/*滾動動畫*/
@-webkit-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-moz-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-o-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-ms-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
</style>
</head>
<body>
<!--向左重復滾動動畫-->
<div class="rolled">
<a href="#"><img src="images/rolled.png"></a>
</div>
</body>
</html>
除注明外的文章,均為來源:湯久生博客,轉載請保留本文地址！
原文地址：http://tangjiusheng.com/css3/101.html
實現鼠標懸停時圖片放大的效果，可以使用 HTML、CSS 和 JavaScript 來實現。以下是一個簡單的示例代碼：
HTML:
<img src="image.jpg" id="myImage" />
CSS (僅供示例，可根據實際需求調整樣式):
#myImage {
transition: transform 0.3s;
}
#myImage:hover {
transform: scale(1.2);
}
JavaScript (用于添加鼠標懸停事件監聽器):
document.getElementById("myImage").addEventListener("mouseover", function () {
// 這里可以添加其他鼠標懸停時的操作
});
document.getElementById("myImage").addEventListener("mouseout", function () {
// 這里可以添加鼠標移出時的操作
});
在上述代碼中，當鼠標懸停在圖片上時，通過 CSS 的 transform:scale(1.2) 實現了圖片放大的效果。同時，使用 JavaScript 添加了鼠標懸停和移出事件的監聽器，以便在這些事件發生時執行其他操作。
家好，今天跟大家分享的是純CSS實現鼠標滑過圖片3D翻轉效果的方法，下面看下效果圖：
效果圖
效果分析：從效果圖中可以看到當鼠標滑過圖片時，圖片延Y軸-90°旋轉逐漸消失，而與圖片相關的文字部分延Y軸旋轉-90°逐漸顯現，當鼠標移開時又逐漸恢復到初始位置。初始位置時圖片和文字部分的位置關系如下圖所示：
初始位置
HTML結構：全部內容置于一個div（.main)盒子內，里面有三個主體div(.box)，每個.box中有兩個div(.back和.front)，.front用于放置圖片，本例中以背景的形式添加，.back用于放置文本信息，里面包含一個標題，一段文字，兩條白色橫線（由<span></span>標簽生成），下圖為HTML代碼：
CSS設置：
主體div（.box）樣式設置：“transform-style:perspective-3d”讓元素在3D空間內呈現，延X軸旋轉-10°調整可視面，這兩步是為了讓元素看上去更立體，在日記翻頁效果教程中有提到過；“display-inline-block"讓三幅圖片在同行顯示。"position:relative"因為后面子元素需要絕對定位。
文本部分（.black)樣式設置：與父元素.box同高同寬，位置覆蓋，給一個背景顏色和適當的透明度（opacity：0.8），延Y軸順時針旋轉90°，垂直電腦平面，必須在此處添加過渡效果，如果在hover中添加會導致鼠標移開時動畫過渡生硬，直接恢復到初始位置。
圖片部分（.front）樣式設置：動畫過渡效果同上，依舊在此處添加，不要添加到hover中，分別以背景的形式添加圖片。
文本信息具體樣式設置：都是一些基本樣式，根據個人喜好隨便搞，文中的兩條白色橫線由<span> 標簽生成，220像素的寬即長度，1個像素的高則是粗細程度，顏色由背景顏色生成。
hover樣式設置：當鼠標滑過.box區域時，正常顯示的圖片部分延Y軸逆時針旋轉90°與電腦平面垂直逐漸在視線中消失，而文本信息部分延Y軸逆時針旋恢復到原始位置逐漸顯示，鼠標移開時各自又慢慢回復到初始位置。上面提到的過渡效果如果添加到這里的hover中，鼠標移開時兩者會直接生硬地恢復到初始位置。
好了大功告成，刷新頁面查看效果吧！
如果發現問題請及時@窗外樓，不勝感激！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
