想用纯css做一张照片墙,照片像是被钉子钉在墙上,斜挂起,当鼠标移上去...

发布网友发布时间：2022-04-26 02:00

共3个回答

热心网友时间：2022-04-06 12:16

纯CSS实现这样的动画必须得用CSS3，我写了个DEMO：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {position: relative; width: 800px; padding: 10px 0 0 10px; margin: 0 auto;}
.wrap img {position: absolute; max-width: 300px; margin: 0 10px 10px 0; cursor: pointer; transition: ease-in-out .2s;}
.wrap img:hover {margin-top: 15px;}
</style>
</head>
<body>
<div class="wrap">
<img src="../img/cpu.png" alt="" style="top:10px; left:10px">
<img src="../img/cartoon.jpg" alt="" style="top:50px; right:10px">
</div>
</body>
</html>

主要用到CSS3中的transition这个声明来实现简单动画，如果需要实现更复杂的动画，就需要使用CSS3中的@keyframe了

热心网友时间：2022-04-06 13:34

不能吧，鼠标移动点击是事件，css只是界面布局，还得同时用脚本才能实现追问鼠标移动可以是hover，点击可以用a标签或者是taget呀

热心网友时间：2022-04-06 15:09

css3 Animation 可以做动画
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 10s;
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
-o-animation:myfirst 10s; /* Opera */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px; transform: rotateZ(0deg);}
25% {background:yellow; left:0; top:20px; transform: rotateZ(10deg);}
50% {background:blue; left:0; top:40px; transform: rotateZ(0deg);}
75% {background:green; left:0px; top:60px; transform: rotateZ(-10deg);}
100% {background:red; left:0px; top:80px; transform: rotateZ(0deg);}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px; transform: rotateZ(0deg);}
25% {background:yellow; left:0; top:20px; transform: rotateZ(10deg);}
50% {background:blue; left:0; top:40px; transform: rotateZ(0deg);}
75% {background:green; left:0px; top:60px; transform: rotateZ(-10deg);}
100% {background:red; left:0px; top:80px; transform: rotateZ(0deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px; transform: rotateZ(0deg);}
25% {background:yellow; left:0; top:20px; transform: rotateZ(10deg);}
50% {background:blue; left:0; top:40px; transform: rotateZ(0deg);}
75% {background:green; left:0px; top:60px; transform: rotateZ(-10deg);}
100% {background:red; left:0px; top:80px; transform: rotateZ(0deg);}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px; transform: rotateZ(0deg);}
25% {background:yellow; left:0; top:20px; transform: rotateZ(10deg);}
50% {background:blue; left:0; top:40px; transform: rotateZ(0deg);}
75% {background:green; left:0px; top:60px; transform: rotateZ(-10deg);}
100% {background:red; left:0px; top:80px; transform: rotateZ(0deg);}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>追问额，这个还没学，2D的怎么做？

追答这个就是2D的，我给了你一个例子，你可以在随意修改成你想要的动画。

想用纯css做一张照片墙,照片像是被钉子钉在墙上,斜挂起,当鼠标移上去...

纯CSS实现这样的动画必须得用CSS3，我写了个DEMO：<!DOCTYPE html>Document.wrap {position: relative; width: 800px; padding: 10px 0 0 10px; margin: 0 auto;}.wrap img {position: absolute; max-width: 300px; margin: 0 10px 10px 0; cursor: pointer; transition: ease-in-out ....

像砖一样的墙面是怎么做的远看像墙不是墙怎样用纯css实现下拉菜单纯css图片轮播代码像墙一样的砖像墙一样的门她像一面墙像一堵墙纯css