HTML5+css实现一个超好看的web照片墙源码
标签搜索

HTML5+css实现一个超好看的web照片墙源码

十五
2021-07-30 / 0 评论 / 150 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月30日,已超过86天没有更新,若内容或图片失效,请留言反馈。

HTML5+css实现一个超好看的动态web照片墙

一、简介

一个纯css制作的动态照片墙

html5+css照片墙

二、使用

  1. 可以根据自己的需要,修改style.css;如添加图片,修改图片位置等
  2. 参数如下
  • -moz代表firefox浏览器私有属性;
  • -ms代表IE浏览器私有属性;
  • -webkit代表chrome、safari私有属性;
  • -o代表Opera私有属性。
div>img:nth-of-type(1){
    -webkit-transform: rotate(-20deg);    //-webkit代表chrome、safari私有属性; **旋转 div 角度** 
    -moz-transform: rotate(-20deg);       //-moz代表firefox浏览器
    -ms-transform: rotate(-20deg);        //-ms代表IE浏览器
    -o-transform: rotate(-20deg);         //-o代表Opera私有属性 
    transform: rotate(-20deg);            //旋转 rotate 正数为顺时针旋转,负数为逆时针旋转;
    position:absolute;                    // 绝对定位,指定left
    left:-80px;                     //指定该div的绝对位置
    top:150px;                    
    z-index:5;                      //z-index 属性设置元素的堆叠顺序。
    border-radius:40px;             //设置圆角边框
    opacity:0.8;                    //设置 div 元素的不透明级别:
    filter:alpha(opacity=80);       //IE6 不透明度
}

鼠标指针浮动在上面的元素

div>img:nth-of-type(1):hover{
    -webkit-transform:rotate(0) scale(1.1) translate(80px); //rotate(旋转)、scale(缩放)、translate(平移)
    -moz-transform:rotate(0) scale(1.1) translate(80px);
    -ms-transform:rotate(0) scale(1.1) translate(80px);
    -o-transform:rotate(0) scale(1.1) translate(80px);
    transform:rotate(0) scale(1.1) translate(80px);
    z-index:10;

    -webkit-transition: all 0.5s ease-in-out;     //css3动画执行的快慢
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity:1;
    filter:alpha(opacity=1);
}

二、下载地址

img文件较大,这里只提供css,部分图片请自行添加,图片格式0-15.jpg、bg.jpg也可自行更改;

0

评论 (0)

取消