整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用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小时内与您取得联系。
