欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS代码实现文字鼠标放上去滚动效果
这篇文章主要为大家详细介绍了CSS代码实现文字鼠标放上去滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

在浏览游戏网站页面的适合,偶尔发现的这个效果,鼠标放在文章上面文字滚动效果

效果代码查看


CSS代码实现文字鼠标放上去滚动效果

实现代码如下

CSS代码如下:

* { margin:0; padding:0; }
body,td,th { font-size: 14px; }
body { font-size: 14px; font:"微软雅黑"; color:#FFF; background:#000000; margin:0px;}
a { font-size: 14px; color: #FFF; }
a:link { text-decoration: none;}
a:visited { text-decoration: none; color:#FFF; }
a:hover { text-decoration: none; color:#900; text-decoration:none;}
a:active { text-decoration: none; color: #900;}
ul {  margin:0 0 0 0; padding: 0; list-style: none; }
.head_10 { width:720px; overflow:hidden; position:absolute; top:150px; right:72px; z-index:5;}
.head_11 li { display:block; width:718px; overflow:hidden; line-height:26px; text-align:left; border:double 1px #b7b090; margin-bottom:5px; transition:0.5s; background:#a5323f; border-radius:1em;}
.head_11 li:hover { background:#370000; transition:0.5s; border-radius:2em;}
.head_11 li a { display:block; padding:0 0 0 40px; font-family:"微软雅黑"; font-weight:200; color:#FFC; font-size:16px;}
.head_11 li a:hover { color:#0F0; animation-name:bmyani; animation-duration:1s;}
.head_11 li span { display:block; background:url(hot.jpg) 10px center no-repeat;}
@keyframes bmyani {0%{ margin-left:50px;}}

HTML代码如下:

<div class="head_10">
  <ul class="head_11">
        <li><span><a>·充值比例·充值1元 = 2500000元宝 + 10000封神币+ 100充值点 !充值35满礼包,无隐藏礼包</a></span></li>
        <li><span><a>·版本介绍·用心制作版本,特色玩法,打破常规。市场仅此一家!耐玩、长久!</a></span></li>
        <li><span><a>·版本介绍·开服时间:2017年08月中旬起,每天分6个时段开服!</a></span></li>
        <li><span><a>·版本介绍·一切靠打,纯元宝服,无任何元宝以外的货币消费,新服开放爆率提升3倍!</a></span></li>
        <li><span><a>·版本介绍·一个服是不是公平公正长久稳定,我们的一路同行会让您明白!</a></span></li>
        <li><span><a>·版本介绍·礼包丰富、行会争霸、人品比拼、新区怪物三倍活动等!</a></span></li>
        <li><span><a>·版本介绍·怪物防御调低、怪物攻击调低、爆率调高、真正适合散人,长期方可终极!</a></span></li>
        <li><span><a>·版本介绍·新加多种地图 装备 靓装怪物 24小时不间断活动 只有你想不到的 没有游戏打不到的</a></span></li>
        <li><span><a>·版本介绍·本服最高礼包35元,15元即可玩转,无任何隐藏消费,带上你们的兄弟来抢红包吧!</a></span></li>
        <li><span><a>·版本介绍·免费满级-自动回收-自动吃元宝-长久稳定-拿沙奖励RMB</a></span></li>
        </ul>
  </div>

收藏起来,以备后用

以上就是CSS代码实现文字鼠标放上去滚动效果的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css 文字效果

上一篇JS实现计算页面执行时间

下一篇PHP7.0环境下织梦DedeCMS文章页空白的解决方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在