纯css3打造定时滚动效果banner及产品列表页

最新推荐文章于 2023-11-02 13:59:10 发布
最新推荐文章于 2023-11-02 13:59:10 发布
阅读量3.1k 收藏
点赞数
分类专栏： web前端
纯css3打造定时滚动效果banner及产品列表页
 <!doctype html>
<html lang="en">
 <head>
 <!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)-->
 <meta charset="UTF-8">
 <!--声明当前页面的三要素-->
 <title>标题</title>
 <meta name="Keywords" content="关键字">
 <meta name="Description" content="描述">
  <!--样式 css 变漂亮 衣柜-->
  <style type="text/css">
  *{margin:0px; padding:0px;}
  /*花花{身高：160cm; 体重：43kg;IQ:400;}*/
  #top{width:100%; height:77px;background:#3e2b24; padding:17px 0px; text-align:center;/*内容水平居中*/}
  .nav{width:100%;height:50px;background:url("img/bg.jpg");}
  .nav ul{width:980px; margin:0px auto;/*设置盒子水平居中*/}
  .nav ul li{list-style:none;/*去除无序列表的标签小黑点*/ width:136px;height:50px; float:left;/*浮动 并排展示*/color:#FFFFFF;/*文字颜色*/ line-height:50px;/*文本行高*/text-align:center; font-family:"微软雅黑";}
  .nav ul li a{color:#FFFFFF; text-decoration:none;/*去除下划线*/ width:136px;height:50px;display:block;}
  .nav ul li a:hover{background:url("img/hover.jpg");}/*鼠标经过的时候*/
  /*.cont{width:100%;  height:360px;background:#f8c698 url("img/4.png") no-repeat center;}*/
  /*css3banner切换效果*/
  li{ list-style:none;/*去除小黑点*/ float:left;/*浮动*/}
  .cont{ width:100%;/*宽度*/height:450px;/*高度*/ /*background:#006600; 背景颜色*/ /*圆角*/ box-shadow:2px 2px 5px #666666; /*阴影*/overflow:hidden; /*  溢出元素隐藏*/position:relative;/*定位*/} 
  .banner{width:100%;animation:myfirs/*绑定 规则名称*/  15s /*规则运行的时间*/ infinite /*规则运行的次数*/;position:absolute;left:0px; top:0px; z-index:9; cursor:pointer;}
  .banner li{ width:100%; height:450px;}
  .banner li:nth-child(1){ background:url(img/1.jpg) center;}
  .banner li:nth-child(2){ background:url(img/2.jpg) center;}
  .banner li:nth-child(3){ background:url(img/3.jpg) center;}
  .banner li:nth-child(4){ background:url(img/4.jpg) center;}
  .banner li:nth-child(5){ background:url(img/5.jpg) center;}
  .bg{ width:300px; height:10px; position:absolute;/*定位*/ right:15px; bottom:15px;}
  .in{width:300px; height:10px; position:relative;}
  .in li{ width:50px; height:10px; background:rgba(0,0,0,0.3); text-align:center; /*文字居中*/ margin-right:10px;border-radius:10px; font-size:12px;/*文字大小*/ color:#ffffff;/*文字颜色*/ line-height:22px; /*中间垂直*/ z-index:999;position:relative;}
  .in #lp{position:absolute; left:0px; top:0px;  z-index:998; animation:myarr/*绑定 规则名称*/  15s /*规则运行的时间*/ infinite /*规则运行的次数*/;}
  .cont:hover .nav{animation-play-state:paused;}
  .cont:hover .in #lp{animation-play-state:paused;}
  /*创建规则*/
  @keyframes myfirs
  {
  0%{ top:0px;}
  19%{top:0px;}
  20%{top:-450px;}
  39%{top:-450px;}
  40%{top:-900px;}
  59%{top:-900px;}
  60%{top:-1350px;}
  79%{top:-1350px;}
  80%{top:-1800px;}
  99%{top:-1800px;}
  100%{top:0px;}
  }
  /*创建规则*/
  @keyframes myarr
  {
  0%{ left:0px; background:#fec425;}
  19%{left:0px;background:#fec425;}
  20%{left:60px;background:#c40002;}
  39%{left:60px;background:#c40002;}
  40%{left:120px;background:#f06a23;}
  59%{left:120px;background:#f06a23;}
  60%{left:180px;background:#ffffff;}
  79%{left:180px;background:#ffffff;}
  80%{left:240px;background:#1363a0;}
  99%{left:240px;background:#1363a0;}
  100%{left:0px;background:#0d4494;}
  }
  .main{width:1000px;/*宽度 px像素*/ /*height:600px;高度*/ /*background:#ccccff;背景颜色*/ margin:120px auto;}
  .main .box{width:230px; height:350px; background:#00ff66; border-radius:3px;/*css3圆角*/border:2px solid #FFFFFF;/*边框*/box-shadow:1px 1px 6px #000033;/*阴影*/overflow:hidden;/*溢出元素强制隐藏*/display:inline-block;/*行内块元素*/ margin:6px; position:relative;/*定位*/}
  .main .box:hover img{transform:scale(1.9);/*css3放大缩小图片*/ transition:transform 800ms ease-out;/*css3慢动作*/}/*鼠标经过的时候*/
  .main .box .scale{width:230px; height:350px;background:rgba(0,0,0,0.4);/*背景颜色透明*/ position:absolute;/*定位*/ top:0px; color:#FFFFFF;/*设置文字颜色*/ transform:translateX(-230px);}
  .main .box .scale h3{text-align:center;/*文本内容居中*/ line-height:60px;/*文本行高距离*/ }
  .main .box .scale p{ font-size:14px;/*文字字体大小*/ margin:0px 15px; line-height:24px; text-indent:2em;/* 2em;缩进2个字符*/}
  .main .box:hover .scale{transform:translateX(230px); transition:transform 2s ease-out;/*css3慢动作*/}
  </style>
 </head>
 <body>
   <div id="top">
  <img src="img/logo.png"/>
   </div>
   <div class="nav"> 
  <!--导航列表开始 -->
  <ul>
   <li><a href="http://www.baidu.com">首页</a></li>
   <li><a href="#">关于我们</a></li>
   <li><a href="#">在线预展</a></li>
   <li><a href="#">精品欣赏</a></li>
   <li><a href="#">鉴定专家</a></li>
   <li><a href="#">在线征集</a></li>
   <li><a href="#">联系我们</a></li>
  </ul>
  <!--导航列表结束-->
   </div>
   <!--banner-->
   <div class="cont">
  <div class="banner">
  <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  </div>
  <div class="bg">
   <ul class="in">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li id="lp"></li>
   </ul>
  </div>
 </div>
<!--盒子模型 div 有宽度有高度 取名 class=""类 id="" 唯一-->
 <div class="main">
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/1.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/2.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/3.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/4.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/5.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/6.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/7.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
  <div class="box">
   <!-- 插入图片 src=""/图片地址 湖南/长沙-->
   <img src="image/8.jpg" width="230px" height="350px"/>
   <div class="scale">
    <h3>萌图，手机壁纸</h3>
    <p>课程一，两个月，学完可以找一份工作，Web前端开发，<br/>
课程二，一个月半，是最新建站技术，学了可以做手机站<br/>
课程三，是一个加强训练班，主要是讲大公司的技术，百度，腾讯，阿里的建站技术，并会带你开发这个网站<br/>
br标签强制换行
</p>
   </div>
  </div>
 </div>
 </body>
</html>

图片

图片

图片

图片

 
想旅游咯
关注
专栏目录
jquery+css3实现下拉选择列表上下滚动效果
06-12
下拉菜单，高度固定住，js代码会根据鼠标所在的位置上下移动下拉内容，蛮有创意的一个小玩意儿。虽然是CSS3实现的效果，但是在IE 等低版本浏览器下亦可使用
css和jquery实现定时滚动
feifantiantang的博客
08-01 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>About Me Scroll Effect w/ jQuery</title> <style> ...
css3 实现列表滚动展示
weixin_30472035的博客
06-27 2878
农行业务有个需求是展示获取的数据滚动展示，我用css3动画将数据进行展示，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
css3实现动态滚动播放列表
xxx_holic123的博客
08-09 1323
需要自动滚动循环播放的列表，使用纯CSS实现基础循环功能。
移动端banner css3(@keyframes )实现
weixin_33968104的博客
03-14 403
2019独角兽企业重金招聘Python工程师标准>>> ...
淘宝banner图无缝滚动效果
11-13
淘宝Banner图无缝滚动效果是一种常见的电商网站设计技巧，旨在提升用户体验，吸引用户注意力，并有效展示商品或活动信息。这种效果通常在网站顶部的横幅区域实现，通过动态地切换图片来形成平滑、不间断的视觉体验。...
CSS3全屏banner幻灯片自动轮播动画切换代码.zip
07-11
"js特效-CSS3全屏banner幻灯片自动轮播动画切换代码"标签明确了这个代码的主要特点，即JavaScript特效，特别是使用CSS3技术来完成全屏幻灯片的动画切换效果。这里的“js特效”可能包括动态加载、事件监听、时间函数...
banner滚动效果
08-24
标题中的“banner滚动效果”指的是在网页设计中常见的Banner（横幅）区域，采用一种动态的展示方式，即图片或内容会按照设定的方向（如左右）进行滚动播放，以吸引用户的注意力并展示更多信息。这种效果通常被应用于...
Banner展示及自动滚动
04-21
其次，“定时滚动”是实现Banner自动切换的关键。在Web开发中，可以使用JavaScript的`setInterval`函数来定时改变Banner内容，例如每几秒钟更换一次。在移动应用开发中，我们可以使用类似于Android的`Handler`和`...
全屏banner轮播切换CSS3动画.zip
07-04
全屏Banner轮播切换CSS3动画是现代网页设计中常用的一种元素，用于展示多张全尺寸的背景图像或重要信息，提升网站的视觉效果。这种技术结合了jQuery库的便捷性和CSS3的强大动画功能，为用户提供流畅且富有动态感的...
CSS3遮罩banner动画.zip
07-04
CSS3遮罩banner动画
css3炫酷网站banner广告动画特效
12-13
这是一款使用纯css3制作的网站banner或广告动画特效。该banner动画特效利用CSS3 animations来完成，效果可以媲美flash动画或gif动画效果。
html5+css3响应式banner
09-30
html5+css3响应式banner 响应式宽屏BANNER
纯CSS代码实现的图片列表滚动
01-19
纯CSS代码实现的图片列表滚动，就像有些网站的图片友情链接的功能一样，有拖动条哦，采用CSS实现类似框架的效果，好处是对搜索引擎友好，并非使用了框架，实现方法推敲一下，部分图片实现了透明效果。
CSS3多重背景结合动画打造会飘动的热气球banner
m0_71814235的博客
07-26 282
CSS3多重背景结合动画打造会飘动的热气球banner
banner 图轮播 CSS+JS特效
最新发布
学习博客 记录技术文档及心得体会
11-02 324
【代码】banner 图轮播 CSS+JS特效。
css 实现滚动效果
qq50347110的博客
04-29 4211
在做中奖列表的时候, 需要做一个名单上下滚动的效果, 纯css 效果就可以实现 <div class="marquee"> <div class="row"> <span class="col">20190710</span> <span class="col">北京市昌平区建材城西路金燕龙写字</span> <span class="col">1000010&l
html广告条效果,css3炫酷网站banner广告动画特效
weixin_34283265的博客
06-04 369
这是一款可以用来遮罩网站banner或广告的动画特效插件。该特效使用的是 CSS3 animations。注意不是所有的浏览器都支持 CSS3 animations。如果你对 CSS3 animations还不了解，建议你先阅读W3C CSS Animations。HTMLhtml结构如下：Lost at sea?Relax - we've got your rudder.为了让你明白上面的Htm...
fullPage.js和CSS3实现全屏滚动效果的实现步骤
fullPage.js和CSS3实现全屏滚动效果 fullPage.js是一个jQuery插件，主要用于实现鼠标向上向下滑动时自动切换到上一屏或者下一屏的效果，对于需要实现一些高大上的效果非常有用。 在使用fullPage.js之前，需要先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值