精华内容
下载资源
问答
  • 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效
  • HTML5 CSS3专题 纯CSS打造相册效果

    万次阅读 多人点赞 2014-06-15 16:15:50
    今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。 效果图: 效果是不是还是很不错的,最主要的是没有... 纯CSS3相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277

    今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。

    效果图:


    效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点。

    先看html文件:

    <body>
    
    <div id="gallery">
        <h1>纯CSS3相册效果</h1>
        <ul>
    
            <li>
                <span class="touch"><img src="images/pic1.jpg"/></span>
    
                <div style="display: block;">
                    <img src="images/pic1.jpg"/>
                </div>
            </li>
    
            <li>
                <span><img src="images/pic2.jpg"/></span>
    
                <div>
                    <img src="images/pic2.jpg"/>
                </div>
            </li>
            <li>
                <span><img src="images/pic3.jpg"/></span>
    
                <div>
                    <img src="images/pic3.jpg"/>
                </div>
            </li>
    
            <li>
                <span><img src="images/pic4.jpg"/></span>
    
                <div>
                    <img src="images/pic4.jpg"/>
                </div>
            </li>
    
            <li>
                <span><img src="images/pic5.jpg"/></span>
    
                <div>
                    <img src="images/pic5.jpg"/>
                </div>
            </li>
    
    
        </ul>
    
        <div class="clearfix"></div>
    </div>
    
    
    </body>

    简单描述一下:

    1、ul 中 li决定了照片的个数

    2、ul使用样式float:right,width:140px;使得显示在相册的右侧区域

    3、li的float:left,使得li可以左浮动;li中存放大图的div,position为absolute会根据div#gallary进行定位,默认只有第一个显示

    4、当鼠标移动到li上时,改变li span img的透明度和li div的display将大图显示


    接下来就是css文件:

    <style type="text/css">
    
            body
            {
                font-family: "微软雅黑";
            }
    
            #gallery
            {
                width: 700px;
                position: relative;
                margin: 20px auto 0;
                background-color: #000;
                min-height: 400px;
                padding: 20px;
            }
    
                /*标题*/
            #gallery h1
            {
                color: #fff;
                font-size: 2em;
                font-weight: bold;
            }
    
            #gallery ul
            {
                width: 140px;
                float: right;
                margin: 10px 0 20px;
            }
    
            #gallery ul li
            {
                float: left;
                margin: 20px 8px 0 0;
            }
    
            #gallery ul li span
            {
                display: block;
                position: relative;
                width: 60px;
                height: 80px;
                border: 1px solid #fff;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                -ms-border-radius: 4px;
                -o-border-radius: 4px;
                border-radius: 4px;
                overflow: hidden;
            }
    
            #gallery  ul li span img
            {
                position: relative;
                top: -200px;
                left: -100px;
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
    
            #gallery ul li span.touch img, #gallery ul li:hover span img
            {
                opacity: 1;
                filter: alpha(opacity=100);
            }
    
            #gallery ul li:hover div
            {
                display: block;
            }
    
            #gallery ul li div  img
            {
                width: 460px;
                height: 288px;
            }
    
            #gallery ul li div
            {
                display: none;
                position: absolute;
                top: 100px;
                left: 30px;
                border: 5px solid #fff;
            }
    
            .clearfix
            {
                clear: both;
            }
    
    
        </style>

    css中没有什么复杂的样式,就不做描述了。此外html中我引入了一个重置样式的css , reset.css ,大家也可以使用自己习惯的重置样式:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{
    	margin: 0;
    	padding: 0;
    	font-size: 100%;
    	border: 0;
    	outline: 0;
    	background: transparent;
    	}
    	
    ol, ul {
    	list-style: none;
    	}
    
    blockquote, q {
    	quotes: none;
    	}
    
    :focus {
    	outline: 0;
    	}
    
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    	}


    源码点击下载



    展开全文
  • 纯CSS打造相册效果项目完整源码

    万次下载 热门讨论 2014-06-15 19:05:52
    代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/30993277 有问题请博客留言
  • 纯CSS打造相册效果项目完整源码,只需要5积分,如有需要,请大家下载!!
  • CSS纯相册效果

    2012-07-23 14:33:31
    转载于http://www.w3cfuns.com/thread-5593864-1-1.html点击打开链接 很喜欢这种效果,看着清爽,(*^__^*) 。

    转载于http://www.w3cfuns.com/thread-5593864-1-1.html点击打开链接

    很喜欢这种效果,看着清爽,(*^__^*) 。



    展开全文
  • <!doctype html> <html> <head> <meta charset="utf-8"> ...3D立方体相册</title> <style> * { padding: 0; margin: 0; } body { width: 100%; .
    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>3D立方体相册</title>
    
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            body {
                width: 100%;
                height: 100%;
                background: linear-gradient(yellow 0%, black 100%);
            }
    
            #react {
                width: 200px;
                height: 200px;
                margin: 200px auto;
                transform-style: preserve-3d;
                animation: rotate 20s infinite;
                animation-timing-function: linear;
            }
    
            #react div {
                position: absolute;
                transition: all .4s;
            }
    
            div .out_pic {
                width: 200px;
                height: 200px;
                opacity: 0.9;
            }
    
            div .in_pic {
                width: 100px;
                height: 100px;
            }
    
            #react span {
                display: block;
                position: absolute;
                width: 100px;
                height: 100px;
                top: 50px;
                left: 50px;
            }
    
            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
    
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
    
            .out_frount {
                transform: translateZ(100px);
            }
    
            .out_back {
                transform: translateZ(-100px);
            }
    
            .out_left {
                transform: rotateY(90deg) translateZ(100px);
            }
    
            .out_right {
                transform: rotateY(-90deg) translateZ(100px);
            }
    
            .out_top {
                transform: rotateX(90deg) translateZ(100px);
            }
    
            .out_bottom {
                transform: rotateX(-90deg) translateZ(100px);
            }
    
            .in_frount {
                transform: translateZ(50px);
            }
    
            .in_back {
                transform: translateZ(-50px);
            }
    
            .in_left {
                transform: rotateY(90deg) translateZ(50px);
            }
    
            .in_right {
                transform: rotateY(-90deg) translateZ(50px);
            }
    
            .in_top {
                transform: rotateX(90deg) translateZ(50px);
            }
    
            .in_bottom {
                transform: rotateX(-90deg) translateZ(50px);
            }
    
            #react:hover .out_frount {
                transform: translateZ(200px);
            }
    
            #react:hover .out_back {
                transform: translateZ(-200px);
            }
    
            #react:hover .out_left {
                transform: rotateY(90deg) translateZ(200px);
            }
    
            #react:hover .out_right {
                transform: rotateY(-90deg) translateZ(200px);
            }
    
            #react:hover .out_top {
                transform: rotateX(90deg) translateZ(200px);
            }
    
            #react:hover .out_bottom {
                transform: rotateX(-90deg) translateZ(200px);
            }
        </style>
    
    </head>
    
    <body>
        <div id="react">
            <div class="out_frount">
                <img src="./img/yoga.png" class="out_pic">
            </div>
            <div class="out_back">
                <img src="./img/yoga.png" class="out_pic">
            </div>
            <div class="out_left">
                <img src="./img/yoga.png" class="out_pic">
            </div>
            <div class="out_right">
                <img src="./img/yoga.png" class="out_pic">
            </div>
            <div class="out_top">
                <img src="./img/yoga.png" class="out_pic">
            </div>
            <div class="out_bottom">
                <img src="./img/yoga.png" class="out_pic">
            </div>
            <span class="in_frount">
                <img src="./img/yoga.png" class="in_pic">
            </span>
            <span class="in_back">
                <img src="./img/yoga.png" class="in_pic">
            </span>
            <span class="in_left">
                <img src="./img/yoga.png" class="in_pic">
            </span>
            <span class="in_right">
                <img src="./img/yoga.png" class="in_pic">
            </span>
            <span class="in_top">
                <img src="./img/yoga.png" class="in_pic">
            </span>
            <span class="in_bottom">
                <img src="./img/yoga.png" class="in_pic">
            </span>
        </div>
    </body>
    
    </html>

    转自:https://www.cnblogs.com/xmoomoo/p/5749160.html

    展开全文
  • CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果。 如此一来,CSS3便可以代替许多jQuery的功能。 先来介绍一下CSS中的转换。 CSS3中转换有2D转换和3D转换之分。 2D转换(简单来说就是让...

     

    本文包含

    1.CSS3中2D转换和3D转换的介绍。

    2.在相册中的应用实例。

     

    CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果。

    如此一来,CSS3便可以代替许多jQuery的功能。

     

    先来介绍一下CSS中的转换。

     

    CSS3中转换有2D转换和3D转换之分。

    2D转换(简单来说就是让某个元素改变大小和位置):

    1.translate()方法

    该方法包含两个参数,分别是对应的x轴,y轴偏移的距离(相对于控件的原位置进行移动)。

    也可以根据translateX()方法单独设置x轴偏移量,translateY()方法设置Y轴偏移量。

    2.rotate()方法

    此方法包含一个参数,表示该空间以中心为圆心,顺时针转过的角度。可以为负值,表示逆时针转过的角度。

    3.scale()方法

    此方法包含两个参数,代表沿X轴和沿Y轴扩大的倍数。

    4.skew()方法

    skew()方法,该元素会根据X轴和Y轴线参数旋转给定的角度

    5.matrix()方法

    matrix方法将2D转换的方法合并为一个

    matrix 方法有六个参数,包含旋转,缩放,移动和倾斜功能。

     

    3D转换:

    3D转换主要有一个方法。

    rotateX(),rotateY(),rotateZ()。参数为一个角度值,分别围绕着X,Y,Z轴转相应的角度。

     

    下面多介绍一个过渡属性transition:

    transition:CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    transition 简写属性,用于在一个属性中设置四个过渡属性。

    transition-property 规定应用过渡的 CSS 属性的名称。

    transition-duration 定义过渡效果花费的时间。默认是 0。

    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

    transition-delay 规定过渡效果何时开始。默认是 0。

     

    接下来是一个纯CSS3转换效果做的相册例子

    用到多种转换方法

    HTML:

    <body>
            <div class="d_photo">
                <div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div>
                <div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div>
                <div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div>
                <div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div>
                <div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div>
            <div class="d_photo">
                <div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div>
                <div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div>
                <div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div>
                <div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div>
                <div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div>
            </div>
        </body>


    CSS:

                  body{
    				width: 100%;
    				background-image: url("img/bg.jpg") ;
    			}
    			.d_photo{
    				width: 900px;
    				height: 180px;
    				margin-top: 10px;
    				margin-left: auto;
    				margin-right: auto;	
    			}
    			.sig_photo{
    				float: left;
    				width: 150px;
    				height: 150px;
    				margin-top: 20px;
    				margin-left: 20px;
    			}
    			img{
    				width: 150px;
    				height: 150px;
    				-moz-transition: width 1s,height 1s,transform 1s;
    				-webkit-transition: width 1s,height 1s,transform 1s;
    			}		
    			#pic1{
    				-moz-transform: rotate(5deg);
    				-webkit-transform: rotate(5deg);					
    			}
    			#pic2{
    				-moz-transform: rotate(-6deg);
    				-webkit-transform: rotate(-6deg);
    			}
    			#pic3{
    				-moz-transform: rotate(4deg);
    				-webkit-transform: rotate(4deg);
    			}
    			#pic4{
    				-moz-transform: rotate(-3deg);
    				-webkit-transform: rotate(-3deg);
    			}
    			#pic5{
    				-moz-transform: rotate(6deg);
    				-webkit-transform: rotate(-6deg);
    			}
    			#pic6{
    				-moz-transform: rotate(-5deg);
    				-webkit-transform: rotate(-5deg);
    			}
    			#pic7{
    				-moz-transform: rotate(7deg);
    				-webkit-transform: rotate(7deg);
    			}
    			#pic8{
    				-moz-transform: rotate(4deg);
    				-webkit-transform: rotate(4deg);
    			}
    			#pic9{
    				-moz-transform: rotate(-4deg);
    				-webkit-transform: rotate(-4deg);
    			}
    			#pic10{
    				-moz-transform: rotate(5deg);
    				-webkit-transform: rotate(5deg);
    			}
    			#pic1:hover{
    				width: 300px;
    				height: 350px;
    				z-index: 10;
    				-moz-transform: rotate(360deg);
    				-webkit-transform:rotate(360deg);
    			}
    			#pic2:hover{
    				z-index: 10;
    				-moz-transform: scale(1.15);
    				-webkit-transform:scale(1.15);
    			}
    			#pic3:hover{
    				width: 300px;
    				height: 350px;
    				z-index: 10;
    				-moz-transform: rotate(0deg);
    				-webkit-transform: rotate(0deg);
    			}
    			#pic4:hover{
    				-moz-transform: rotateY(180deg);
    				-webkit-transform: rotateY(180deg);
    				z-index: 10;
    			}
    			#pic5:hover{
    				-moz-transform: rotateZ(180deg);
    				-webkit-transform: rotateZ(180deg);
    				z-index: 10;
    			}
    			#pic6:hover{
    				-moz-transform: rotateX(180deg);
    				-webkit-transform: rotateX(180deg);
    				z-index: 10;
    			}
    			#pic7:hover{
    				width: 300px;
    				height: 350px;
    				-moz-transform: translate(100px,-170px);
    				-webkit-transform: translate(100px,-170px);
    				z-index: 10;
    			}
    			#pic8:hover{
    				width: 300px;
    				height: 350px;
    				z-index: 10;
    				-moz-transform: translate(0px,-170px);
    				-webkit-transform: translate(0px,170px);
    			}
    

     

    以上1-8每张图片,每张都是一种常用的转换方法,在此就不截图说明了,有兴趣可以试试。

    转载于:https://www.cnblogs.com/yfsmooth/p/4855682.html

    展开全文
  • 纯CSS3打造相册效果,感觉还不错,这里与大家分享下,最主要的是没有使用一行js,这才是亮点
  • 纯css实现3d相册

    2021-01-12 20:59:32
    3d相册案例 效果图: css样式如下: @charset "utf—8"; * { margin: 0; padding: 0; } /* 设置html背景色 */ html { background: linear-gradient(#032861 0%, #000 80%); background: url(../img/preview....
  • 纯CSS实现带上下滚动和缩略图的图片相册效果
  • 纯CSS3制作炫酷的3D相册 整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • 纯CSS3 实现 3D旋转相册 思路: 首先要有一个可以转动的父级元素 要有若干个子元素 通过父级元素给子元素开启三维立体空间 将子元素围父元素摆放:三维空间y轴排列,就是钢管舞运动,y轴旋转的度数=360 / 图片的...
  • 纯CSS相册3

    2009-09-21 19:49:00
    我们可以用《纯CSS相册2》的最后一个运行框改一下就行。思路,我们把中间4个LI元素的图片挖去,并把包含块设到UL元素上,hover时就让图片放大并绝对定位到中间。结构层很简单,就不贴出来了,直接看表现层: ul#...
  • 纯CSS实现带缩略图的图片相册幻灯片效果
  • 摘要:脚本资源,CSS特效,CSS3,滑动相册 纯CSS3实现的带缩略图的滑动相册,带有缩略图显示,带有动态切换效果,简单实用。测试请注意,IE8不支持CSS3的部分属性,因此若使用IE可能会看不到滑动效果,而且网页出错,请...
  • 之前我们分享过一些HTML5图片3D效果,这篇文章分享10款效果惊艳的HTML5图片特效中...今天我们再来分享一款利用纯CSS3实现的3D图片翻转展示特效,点击图片或者下方的翻页按钮即可选中相应的图片,并实现翻转展示效果
  • 纯css旋转相册(源码)

    2020-09-28 16:39:24
    效果图: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ animation:play 20s linear 0s ...
  • 纯CSS相册

    2009-09-18 10:49:00
    最近都在研究javascript,CSS有点生疏了。是时候拿个东西练练手。 654321 请原谅我的吝惜,自从谷歌相册被墙了后,博客园相册的那点空间真是捉襟见肘。上面的这个结构非常固定,大家死记硬背就好了。以后理想了便会...
  • 纯CSS3实现真实翻书效果

    千次阅读 2016-12-02 13:36:29
    研读以下代码及其注释,让你轻松掌握如何用 纯CSS3实现真实翻书效果。 可以参考代码下的参考内容
  • 纯css实现的旋转木马效果(旋转相册) 值此双节之际,祝各位双节快乐,每天开心,财源广进。啊哈哈~~ 话不多说,先看效果: 完整代码: <!doctype html> <html lang="en"> <head> <meta ...
  • 纯css实现3D立体旋转相册 3d立体相册还是非常有趣的,分享一下实现过程。 第一次创作,写的不好不要见怪啊 首先是html搭起立方体 这里 功能快捷键 撤销:Ctrl/Command + Z 重做:Ctrl/Command + Y 加粗:Ctrl/...
  • 别开生面:纯CSS实现相册滑动浏览这是一个很简单的纯CSS相册滑动浏览效果,仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法,但是相比之下个人更喜欢横向滑动的那个。两者在缩略图...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,038
精华内容 815
关键字:

纯css3相册效果