CSS3绚丽照片墙_技术问答

SuperMan_GYD

这里的白框可以用border把。。。不一定要padding吧: 2019-08-08 1回答·1010浏览

sw缪斯3847824

这些可以下载吗？: 可以的; 2018-05-18 1回答·617浏览

qq_qwertyuiop_24185030

为什么设置的z-index不能用？

要想给元素设置z-index样式，必须先让它变成定位元素，再通俗一点说，就是要给元素设置一个postion：relative

不要给想控制“上、下”的元素设置z-index，而是对他们的父容器设置z-index样式。

2017-09-09 1回答·2647浏览

慕婉清0333718

这个应用的多吗: 已采纳田心枫的回答; 还行吧写前端可以应用到自己项目里面; 2017-04-14 1回答·1276浏览

加油咯

求大神，解答: background-img：url；; 2017-03-22 1回答·696浏览

不可以为空

img:hover选中不了图片但是改成#image-1就可以，求教大神这是为啥: 自己解决了，问题在于。。。#image-1下的transform覆盖了了所有的类选择器; 2017-01-13 2回答·2894浏览

逸风4241167

.pic ul li.second:hover{ -webkit-transform:rotate(1000deg); -moz-transform:rotate(1000deg); -ms-transform:rotate(1000deg); transform:rotate(1000deg); -webkit-transform:scale(2); -moz-transform:scale(2); -ms-transform:scale(2);}: 360deg为一圈,1000%360=280deg, 1000deg=280deg,最高度数为360deg; 2016-12-13 2回答·1511浏览

柒秒菂记忆

放大效果没出来咋整: 最好把代码也一起粘出来，你的放大效果和旋转效果是一起不好用的还是只有放大不好用，如果只是放大不好用有可能是单词拼错了吧; 2016-12-01 2回答·1447浏览

柒秒菂记忆

transform功能实现不了怎么办: 要写在hover里面，当鼠标滑过时显示。多个属性值用空格隔开; 2016-12-01 1回答·1334浏览

qq_啊啦嘞_0

为什么鼠标hover的动画结束后，变黑的“您好”会变细，有什么办法能让它不变细？

可以设置下font-weight，代码：.mainDiv:hover{font-weight:bolder;} 。
然后字体想跟图片上的一样就设置一下font-famliy，body{font-family: 'Microsoft YaHei', Verdana, Geneva, sans-serif;}
transition 的all关键字就是让transition作用于这个class或者id的所有属性
transition是过渡效果，写在hover里面是为了当鼠标划过div时，hover中属性的变化有过渡的效果，而不会直接就变化了，写在.mainDiv是为了鼠标划出div时，div的属性值变回原来的样子，过渡效果还存在。

2016-11-29 1回答·1459浏览

Blizzard_lihe

照片没有hover效果？？？: 2016-11-17 0回答·1534浏览

流光微凉

怎么给这个照片墙加上响应式呢: 已采纳江洋大盗4240981 的回答; ：hover; 2016-11-15 1回答·1406浏览

慕斯卡3531659

上一节照片墙个人认为如果每张照片设置角度和位置未免太繁琐: 已采纳 qq_Jabo 的回答; 思路：获取container的高宽，根据这个控制Math.random()的值作用与每张图片的top、left值，再随机设置个rotate的值; 2016-11-12 5回答·1856浏览

泡面大减价

怎样让图片一直转: /* css3 让一个图片不断翻转示例代码 */
#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat;
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover;
/* 随便设置宽高值，测试 */
width:200px;
height:200px;
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
/* 设置动画，animation:动画名称动画播放时长单位秒或微秒动画播放的速度曲线linear为匀速动画播放次数infinite为循环播放; */
-webkit-animation:play 3s linear infinite;
-moz-animation:play 3s linear infinite;
animation:play 3s linear infinite;
}
@-webkit-keyframes play{
0%  {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg);
/*
垂直翻转
-webkit-transform:rotateX(0deg);
顺时针旋转
-webkit-transform:rotate(0deg);
逆时针旋转
-webkit-transform:rotate(0deg);
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg);
/* 垂直翻转
-webkit-transform:rotateX(360deg);
顺时针旋转
-webkit-transform:rotate(360deg);
逆时针旋转
-webkit-transform:rotate(-360deg);
*/
}
}
@-moz-keyframes play{
0%  {
-moz-transform:rotateY(0deg);
/*
-moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg);
*/
}
100% {
-moz-transform:rotateY(360deg);
/*
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg);
*/
}
}
@keyframes play{
0%  {
transform:rotateY(0deg);
/*
transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg);
*/
}
100% {
transform:rotateY(360deg);
/*
transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg);
*/
}
}

<div id="gavinPlay"></div>; 2016-10-28 1回答·2751浏览

慕粉3884565

为什么没有反应，旋转也没有: transition 放在img里; 2016-09-05 1回答·1741浏览

慕虎4364329

图片转动不了: 为啥啊？; 2016-08-26 1回答·1366浏览

慕虎4364329

图片转动不了: margin 第一个值和第二个值之间不用加分号; 2016-08-26 2回答·1404浏览

慕粉3656424

老师，有没有例子下载看看啊: 已采纳慕莱坞9220042 的回答; 视频右下角，有资料下载，可以自己下载看下; 2016-07-13 1回答·1337浏览

繁星鸢尾

字体大小的变化: 定义一下字体的属性，比如font-family:微软雅黑; 2016-07-12 1回答·1143浏览

LiSten_Tme

关于层次z-index: 2016-06-26 0回答·1075浏览

慕婉清0837092

这么多个图片的位置和角度是不是可以用js写会简单一点呢

……

img:hover{

-webkit-transform: rotate(0deg) !important;

-moz-transform: rotate(0deg) !important;

transform: rotate(0deg) !important;

-webkit-transform:scale(1.2)!important;

-moz-transform: scale(1.2)!important;

transform:scale(1.2)!important;

box-shadow: 10px 10px 15px #ccc !important;

z-index: 100 !important;

}

</style>

window.onload = function(){

var con = document.getElementById("container");

var imags=document.getElementsByTagName("img");

for (var i = 0; i < imags.length; i++) {

imags[i].style.transform= "rotate("+ Math.floor(Math.random()*45) + "deg)";

imags[i].style.top=Math.floor(Math.random()*con.clientHeight*0.8)+"px";

imags[i].style.left=Math.floor(Math.random()*con.clientWidth*0.8)+"px";

}

</script>

2016-06-20 2回答·1375浏览

朱泽伟

无法正常显示，希望能帮我看下代码哪里有问题

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{background-color: #eee;}
    h1{text-align: center;}
 
    .container{width: 900px; 
        height: 450px; 
        margin: 60px auto; 
        position: relative; }
 
    img{width: 200px; 
        height: 200px; 
        padding: 10px 10px 15px 10px; 
        background-color: white;
        border: 1px solid #ddd; 
        position: absolute; 
        transition: 1s; 
        -webkit-transition:1s;
        -moz-transition:1s;
        z-index: 1;
    }
 
    img:hover{-webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2); 
        box-shadow: 10px 10px 15px #ccc;
        z-index: 2;}
 
 
 
.pic1{top: 45px; left: 100px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic2{top: 70px; left: 220px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic3{top: 13px; left: 310px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic4{top: 23px; left: 400px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic5{top: 53px; left: 490px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic6{top: 32px; left: 580px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
</style>
<body>
    <div>
        <img src="images/test5.jpg" />
        <img src="images/t6.jpg" />
        <img src="images/t7.jpg" />
        <img src="images/t8.jpg" />
        <img src="images/t9.jpg" />
        <img src="images/t10.jpg" />
    </div>
</body>
</html>

我个人觉得是没什么问题的。这是从你这复制出来的。只不过是图片地址换了一下我本地的图片。

2016-06-07 3回答·1386浏览