图片文字遮罩
例如：（相应基本结构省略）
<!DOCTYPE html>
图片文字遮罩
.box{
width:200px; height:300px; margin:0 px auto 0； border:1pxsolid#000; position:relative;
}
.box img{
width:200px height:300px;
}
.box.pic_info{
width:200px; height:200px; background-color:#000; color:#fff; position:absolute; left:200px; top:0px;
transition:all500mscubic-bezier(0.470,-0.600,0.475,1.605); background-color:rgba(0,0,0,0.5);
display:none;
}
.box:hover.pic_info{
display:block;
}
.box.pic_infop{
margin:20px;
line-height:30px;
}
<div class="box">
<img src="img/location_bg.jpg" alt="花朵">
<div class="pic_info">
<p>图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花</p>
</div>
</div>
以上内容 通过盒子套盒子 display设为none 而 hover 中display设为block 最终达成隐藏第二菜单
变形
transiform:translate(水平，垂直)
浏览器进行了一个虚拟的层
transiform:rotate(30deg)旋转
transiform:scals()缩小
transiform:skew()斜切
元素旋转
也就是三维旋转
perspective（800px）设置透视的距离
transiform-style:preserve-3d 三维空间显示
变形中心点
transiform-origin：
设置数值 在坐标点进行旋转
背面可见
transiform:rotateY(180deg)
背面不可见
backface-visibility:hidden
animation动画
animation：move 1s ease 1s 6 alternate 次数infinite无限次
keyframes moving{ from{ width:100px}to{width:500px}}
animation-play-state:paused 停止
animation-play-state:running 运动
both 起始和结束都要
人物走路动画
animation:walking 1s steps(6) infinite
例子如下（CSS主要设置内容）
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
多帧动画
loading动画效果展示
内容如下
.box{
width:300px;
height:125px;
border:1px solid #000;
margin:200px auto 0;
}
.boxp{
text-align:center;
width:100%;
}
.boxdiv{
width:30px;
height:70px;
float:left;
background-color:gold;
margin:15px;
border-radius:10px;
}
.boxdiv:nth-child(1){
background-color:red;
animation: loading 500ms ease 0s infinite alternate;
}
.boxdiv:nth-child(2){
background-color:green;
animation: loading 500ms ease 100ms infinite alternate;
}
.boxdiv:nth-child(3){
background-color:pink;
animation: loading 500ms ease 200ms infinite alternate;
}
.boxdiv:nth-child(4){
background-color:greenyellow;
animation: loading 500ms ease 300ms infinite alternate;
}
.boxdiv:nth-child(5){
background-color:cyan;
animation: loading 500ms ease 400ms infinite alternate;
}
@keyframesloading{
from{
transform:scaleY(1);
}
to{
transform:scaleY(0.5);
}
}
网友评论