-
SuperMan_GYD
2019-08-08
- 这里的白框可以用border把。。。不一定要padding吧
- 1回答·925浏览
-
qq_qwertyuiop_24185030
2017-09-09
- 为什么设置的z-index不能用？
要想给元素设置z-index样式，必须先让它变成定位元素，再通俗一点说，就是要给元素设置一个postion：relative
不要给想控制“上、下”的元素设置z-index，而是对他们的父容器设置z-index样式。
- 1回答·2559浏览
-
慕婉清0333718
2017-04-14
- 这个应用的多吗
- 已采纳 田心枫 的回答
还行吧 写前端可以应用到自己项目里面
- 1回答·1219浏览
-
不可以为空
2017-01-13
- img:hover选中不了图片但是改成#image-1就可以，求教大神这是为啥
自己解决了，问题在于。。。#image-1下的transform覆盖了了所有的类选择器
- 2回答·2785浏览
-
逸风4241167
2016-12-13
- .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
- 2回答·1455浏览
-
柒秒菂记忆
2016-12-01
- 放大效果没出来咋整
最好把代码也一起粘出来，你的放大效果和旋转效果是一起不好用的还是只有放大不好用，如果只是放大不好用有可能是单词拼错了吧
- 2回答·1401浏览
-
柒秒菂记忆
2016-12-01
- transform功能实现不了怎么办
要写在hover里面，当鼠标滑过时显示。多个属性值用空格隔开
- 1回答·1272浏览
-
qq_啊啦嘞_0
2016-11-29
- 为什么鼠标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的属性值变回原来的样子，过渡效果还存在。
- 1回答·1389浏览
-
Blizzard_lihe
2016-11-17
- 照片没有hover效果？？？
- 0回答·1367浏览
-
流光微凉
2016-11-15
- 怎么给这个照片墙加上响应式呢
- 已采纳 江洋大盗4240981 的回答
：hover
- 1回答·1359浏览
-
慕斯卡3531659
2016-11-12
- 上一节照片墙 个人认为 如果每张照片设置 角度 和 位置 未免 太繁琐
- 已采纳 qq_Jabo 的回答
思路：获取container的高宽，根据这个控制Math.random()的值作用与每张图片的top、left值，再随机设置个rotate的值
- 5回答·1788浏览
-
泡面大减价
2016-10-28
- 怎样让图片一直转
/* 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);
*/
}
}
<!-- html 布局代码 -->
<div id="gavinPlay"></div>- 1回答·2696浏览
-
慕粉3884565
2016-09-05
- 为什么没有反应，旋转也没有
transition 放在img里
- 1回答·1610浏览
-
慕虎4364329
2016-08-26
- 图片转动不了
为啥啊？- 1回答·1323浏览
-
慕虎4364329
2016-08-26
- 图片转动不了
margin 第一个值 和 第二个值 之间不用加分号 - 2回答·1353浏览
-
慕粉3656424
2016-07-13
- 老师，有没有例子下载看看啊
- 已采纳 慕莱坞9220042 的回答
视频右下角，有资料下载，可以自己下载看下
- 1回答·1266浏览
-
繁星鸢尾
2016-07-12
- 字体大小的变化
定义一下字体的属性，比如font-family:微软雅黑
- 1回答·1097浏览
-
LiSten_Tme
2016-06-26
- 关于层次z-index
- 0回答·1029浏览
-
慕婉清0837092
2016-06-20
- 这么多个图片的位置和角度 是不是可以用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>
<script type="text/javascript">
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>
- 2回答·1315浏览
-
朱泽伟
2016-06-07
- 无法正常显示，希望能帮我看下代码哪里有问题
<!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>我个人觉得是没什么问题的。这是从你这复制出来的。只不过是图片地址换了一下我本地的图片。
- 3回答·1314浏览
-
Tiger_Y
2016-06-03
- 无法正常显示
- 已采纳 小耳朵图图 的回答
能把你的代码贴出来吗？
- 2回答·1313浏览
-
qq_小白_7
2016-03-09
-
尽吾志者
2016-01-30
- 关于字体的毛边问题
-webkit-font-smoothing: antialiased;
试试看？
- 1回答·1148浏览
-
夜第七章920
2015-12-23
- <img>标签不能用id吗？为什么我给图片设id来区分他们时，scale的过渡无效啊？
我也遇到这个问题了，正解。
- 2回答·4842浏览
-
sanye
2015-09-23
- 类选择期不起作用
- 3回答·721浏览
-
疯人院
2015-08-14
- 为什么换行分开写不会转？
因为分开写两个的话，后面的会把前面的属性覆盖的
- 2回答·962浏览
-
Frank112
2015-08-05
- 视频无法观看
- 2回答·926浏览
-
撇捺人生
2015-07-14
- IE浏览器怎么弄前缀
-ms-是ie
-moz- 火狐
-webkit- safari and chrome
-o- opera
transform 属性兼容ie9+ 低版本不兼容，希望可以帮到你～
- 1回答·5426浏览
-
龍戰
2015-06-23
- rotate 和 scale 属性不一次性设置没有旋转效果这是为什么我用的chrome浏览器
最好是一次性写上属性
- 4回答·2766浏览
-
龍戰
2015-06-18
- 如何让放大的照片在图片居中显示啊
- 3回答·2393浏览
