使用CSS实现一个简单的幻灯片效果
程序员文章站
2022-04-07 08:55:12
...
方法一: 简单的CSS代码实现幻灯片效果
方法二: 使用CSS3 Animation来制作幻灯片
方法一: 简单的CSS代码实现幻灯片效果
话不多说,直接上代码
DOCTYPE html>
html lang="zh-CN">
head>
meta charset="UTF-8">
title>CSS实现简单的幻灯片效果title>
style type="text/css">
img {
display: none;
width: 600px;
height: 600px;
}
input:checked + img {
display: block;
}
input {
position: absolute;
left: -9999px;
}
label {
cursor: pointer;
}
style>
head>
body>
div id="cont">
input id="img1" type="radio" checked="checked" name="img" />
img src="img1.jpg" />
input id="img2" type="radio" name="img">
img src="img2.jpg" />
div>
div id="nav">
label for="img1">第一张label>
label for="img2">第二张label>
div>
body>
html>
大家看看,有不足的地方还请指正。
源地址:http://zhidao.baidu.com/question/808066722818527652.html
方法二: 使用CSS3 Animation来制作幻灯片
DOCTYPE html>
html lang="zh-CN">
head>
meta charset="UTF-8">
title>css3 实现幻灯片效果title>
style type="text/css">
.huanDengPic {
width: 600px;
height: 600px;
margin: 50px auto 0;
overflow: hidden;
box-shadow: 0 0 5px rgba(0,0,0,1); /*CSS3 box-shadow属性,里面的值的设置s可以去网上查*/
background-size: cover;
background-position: center;
-webkit-animation-name: "loops"; /*检索或设置对象所应用的动画名称*/
-webkit-animation-duration: 10s; /*检索或设置对象动画的持续时间*/
-webkit-animation-iteration-count: infinite; /*检索或设置对象动画的循环次数,此处的"infinite"为无限循环的意思*/
}
@-webkit-keyframes "loops" { /*动画名称和上面设置的动画名称一样*/
/*下面是动画过程*/
0% {
background: url(img1.jpg) no-repeat;
}
50% {
background: url(img2.jpg) no-repeat;
}
100% {
background: url(img3.jpg) no-repeat;
}
}
style>
head>
body>
div class="huanDengPic">div>
body>
html>
上一篇: Laravel
推荐阅读
-
CSS3 实现的一个简单的"动态主菜单" 示例[转]_html/css_WEB-ITnose
-
求教,有这么一个效果,当把鼠标放上去二维码慢慢的出来,鼠标离开二维码慢慢的下去,怎么去实现。_html/css_WEB-ITnose
-
还在为小三角形切图?使用纯CSS写一个简单的三角形_html/css_WEB-ITnose
-
Android中使用Kotlin实现一个简单的登录界面
-
Android中使用Kotlin实现一个简单的登录界面
-
使用纯 CSS 创作一个脉动 loader效果的源码
-
C4D怎么使用锥化效果器制作一个简单的屋顶?
-
使用CSS3制作一个简单的进度条(demo)
-
Javascript实现一个简单的输入关键字添加标签效果实例
-
css3加js做一个简单的3D行星运转效果实例代码