使用CSS实现一个简单的幻灯片效果

方法一: 简单的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>

    <!--兼容性: IE8以及IE8以下的浏览器不兼容,只显示文字,不显示图片-->

    <!--以上代码实现使用到的技术:
        除了设置相应的CSS样式,有两点值得注意:
            1.设置按钮的位置(绝对定位) ,left:-9999px用来隐藏按钮;
            2.<label>标签中的for属性与input标签中的id关联,然后根据input的checked的状态显示或隐藏图片,来达到显示幻灯片效果的目的。
    -->
</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>
时间: 2024-12-09 21:30:55

使用CSS实现一个简单的幻灯片效果的相关文章

用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [用CSS写一个简单的幻灯片效果页面] 1.背景介绍CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. transform属性向元素应用2D或3D转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transition是令一个或多个可以用数值表示的css属性值

用CSS实现一个简单的幻灯片效果页面

用CSS实现一个简单的幻灯片效果页面,第一反应是利用CSS3的animation.不过为了兼容浏览器,记得加各浏览器前缀("chrome和safira:-webkit-"."firefox:-moz-"."opera:-o-"),我最开始写的时候忘记加浏览器前缀,在chrome中一直没有任何显示.下面说说用到的animation各属性.animation-name(动画名字,需用引号包裹)animation-duration(动画持续时间,如:2

第一次来博客园先用jquery写一个简单菜单收缩效果

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <script src="jquery-1.7.2.min.js"></script&g

(转)Cocos2d-js中使用Shader方法--以一个简单的波纹效果为例:

以一个简单的波纹效果为例: 一.引入shader脚本文件. 1.vertex shader attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; varying vec4 v_fragmentColor; varying vec2 v_texCoord; void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor =

简单说 用CSS做一个魔方旋转的效果

说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用好CSS的transform,这是非常重要的,好的,我们先拼出一个魔方的样子. 效果图 代码(代码比较长,朋友们可以直接粘贴复制到电脑看效果) <!DOCTYPE html> <html> <head> <meta charset="utf-8"

【Css】一个简单的选项卡

这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4

IOS中一个简单的粒子效果实现

1.效果图展示 2.实现思路 1> 首先要实现上面的效果,第一步要处理的就是一个简单的画板,在View上面用鼠标滑动的时候画出线条,这个功能可使用UIBezierPath实现 2> 关于粒子效果的实现,可以创建一个CALayer,然后用CAReplicatorLayer进行复制layer,从而达到粒子效果 3.代码实现 DrawView类的封装与编写 // // DrawView.m // 06-粒子效果 // // Created by xiaomage on 15/6/24. // Cop

【CSS】 一个简单的导航条

今天来做一个导航条! 首先写一个坯子: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;cha

还在为小三角形切图?使用纯CSS写一个简单的三角形

同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加会