幽灵资源网 Design By www.bzswh.com
先给大家一张效果图,看似简单,其实实现起来....那也是非常简单的~简单又实用
黑框里面的字体会自动滚动,形成滚动条,可以用于展示和提示,首先我们先要在body里面写上自己想要的文字,比如我想写:感觉好的请点击推荐
- <body>
- <div id="div">
- <ul id="ul">
- <li>感</li>
- <li>觉</li>
- <li>好</li>
- <li>的</li>
- <li>请</li>
- <li>点</li>
- <li>击</li>
- <li>推</li>
- <li>荐</li>
- </ul>
- </div>
- </body>
接下来我们在在style样式里面调整样式,实现他的滚动
CSS Code复制内容到剪贴板- <style> /*先给个整体去除下划线*/
- ul,li,ol{
- list-style: none;
- } /*这里也就是重点喽,时间分段,到还没滚动的时候时间经过了0%所以left也就为0,当开始滚动时间停止的时候那么就等于全部完成也就是100%,这句话写不对效果就不出哦*/
- @-webkit-keyframes move {
- 0% {
- left: 0;
- }
- 100% {
- left: -400px;
- }
- }
- /*以下是布局样式*/
- #div{
- width: 500px;
- height: 100px;
- margin: 100px auto;
- border: 5px solid green;
- position: relative;
- overflow: hidden;
- }
- #ul{
- position: absolute;
- padding: 0;
- margin-top: 0px;
- width: 185%;
- display: block;/*这句话也是至关重要的,少了这句话也不会滚动,我给他四个值,3s代表三秒之内完成滚动,move这个名字对应着上面时间分段的名字,infinite代表循环滚动,linear表示匀速滚动*/
- -webkit-animation: 3s move infinite linear;
- }
- #ul li{
- float: left;
- background: black;
- color: white;
- margin-left: 1px;
- width: 100px;
- height: 100px;
- text-align: center;
- line-height: 100px;
- }
- /*这句话代表鼠标移动上去滚动会停止,类似于轮播*/
- #div:hover #ul {
- -webkit-animation-play-state: paused;
- }
- </style>
以上所述是小编给大家介绍的CSS3实现动画滚动条代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
css3,滚动条动画
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?