步入前段已经好几个月了，一直在打基础，不知道学的如何，今天按照自己的思路用css做了一个博客的简单动画，主要是transform属性的运用，虽然js对于实现动画来说更加到位一点，但css有它的强大之处
步入前段已经好几个月了，一直在打基础，不知道学的如何，今天按照自己的思路用css做了一个博客的简单动画，主要是transform属性的运用，虽然js对于实现动画来说更加到位一点，但css有它的强大之处，可以用transform属性简单的动画，例如旋转，斜切，缩放，平移。同样的功能用js实现的话会复杂许多。
transform-translate：
translate：指定对象的2Dtranslation（2D平移）
语法：transform：translate（x，y）；
第一个参数对应x轴；
第二个参数对应y轴；
transform-rotate：
rotate：指定对象的2Drotate（2D旋转）需先有transform-origin（设置旋转中心点）属性定义
语法：transform-rotate（0deg）
参数为旋转角度，正值顺时针旋转，负值逆时针旋转
transform-scale
scale：指定对象的2D缩放
语法：transform-scale（x，y）
第一个参数对应x轴，为数字，即放大的倍数。
第二个参数对应Y轴
如第二个参数未提供，则默认取第一个参数
transform-skew
skew：指定对象的斜切，扭曲程度
语法：transform-skew（x，y）
第一个参数对应的是X轴
第二个参数对应的是Y轴
如第二个未提供，默认为0
值为扭曲的角度，正值顺时针变化，负值逆时针变化
transition属性
property：检索或设置对象中的参与过渡属性
duration：过渡动画持续时间
timing-function：检索或设置对象过渡的动画类型（linear，ease，ease-in，ease-out，ease-in-out）
delay：检索或设置对象延迟过渡时间
<style>
body{
font-size:20px;
margin:0px 15%;
background:#999;
font-family:"微软雅黑"；
}
ul{
padding:5px;
line-height:30px;
}
li{ background:#333;
margin:5px;
border-radius:10px;
list-style:none;
float:left;
text-align:center;
transition:1s;}
li:hover{transform:scale(1.2);
transition:1s;
}
ul li a{
padding:5px;
color:#FFF;
text-decoration:none;
line-height:20px;
}
ul li a:hover{
color:#000;
background:#FFF;
border-radius:10px;
}
#text{
wodth:100%;}
img{
margin-top:50px;
width:400px;
height:300px;
border:5px solid #FFF;
float:left;
display:block;
transition:1s;}
p{
position:absolute;
top:250px;
width:30%;
left:625px;
line-height:50px;
transition:1s;}
#textname:hover{
transform:skew(-60deg);
transition:1s;}
img:hover{
transform:rotate(360deg);
}
</style>
</head>
<body>
<h1>因为有你，我很幸福</h1>
<ul>
<li><a class="pic1" href="img/照片墙/1.jpg" onclick="showPic(this);return false"title="努力是为了让情怀落地">最美贵阳</a></li>
<li><a class="pic2" href="img/照片墙/2.jpg"onclick="showPic(this);return false"title="相识十年，从年少到青春，与你相伴如此幸运">春风十里不如你</a></li>
<li><a class="pic3" href="img/照片墙/3.jpg"onclick="showPic(this);return false"title="一声得几知己，实在是幸哉">一路货色</a></li>
<li><a class="pic4" href="img/照片墙/4.jpg"onclick="showPic(this);return false"title="因为有你，我知道了努力的意义">因为有你</a></li>
<li><a class="pic5" href="img/照片墙/5.jpg"onclick="showPic(this);return false"title="余生我陪你走">心路历程</a></li>
<li><a class="pic6" href="img/照片墙/6.jpg"onclick="showPic(this);return false"title="孤独是人生常态，陪伴才显得难得可贵">一生相伴</a></li>
<li><a class="pic7" href="img/照片墙/7.jpg"onclick="showPic(this);return false"title="我在这里，不会走，有你的地方就有我">我在这里</a></li>
</ul>
<div id="text">
<img id="picname" src="img/照片墙/9.jpg" />
<p id="textname">人们都说故事与酒更配，却不知这样更容易让人落泪</p>
</div>
</body>
<script>
function showPic(whichpic){
var oldpic=document.getElementById("picname");
var newpic=whichpic.getAttribute("href");
oldpic.setAttribute("src",newpic);
var textchange=document.getElementById("textname");
var title=whichpic.getAttribute("title");
textchange.firstChild.nodeValue=title;
}
</script>
</html>
