属性的简单应用——双开门动画效果"/>
CSS transform属性的简单应用——双开门动画效果
1.效果演示
CSS transform属性有许多效果，平移、旋转、缩放等。
这里简单应用平移效果，实现双开门动画，以下为效果图。
2.设计思路
- 设置一张居中的需要隐藏的底图。
- 设置封面图，平分成左右两部分。
- 鼠标悬浮在封面图上，触发“开门”效果。
3.代码详解
3.1 设置居中底图
<!--写一个div标签，以容纳背景图-->
<body><div class="box"> </div>
</body>/*清除以下默认属性，不清楚也没关系*/
* { margin: 0;padding: 0;
}
.box {margin: 50px auto; /*设置标签居中*/height: 600px; width: 1000px;background-size: 1000px; /*背景图宽度缩放与标签宽度一样，以铺满标签*/ background-image: url(images/pik_lightning.jpg); /*设置隐藏的底图*/overflow: hidden; /*当封面图溢出标签时隐藏*/
}3.2 设置左右“门”
使用伪元素 before, after 创建两扇“门”
.box::before,
.box::after {content: ''; float: left; /*让两扇“门”脱标，左浮动成一排*/width: 50%; /*每扇“门”占父容器的50%*/height: 600px;background-size: 1000px; /*“门”的高度与底图高度一致*/background-image: url(images/pik_poster.jpg);transition: all 1s; /*设置“门”的平移动画*/
}.box::after {background-position: right 0; /*使右扇门定位到父容器的右边*/
}
3.3. 设置鼠标触发
/*利用伪类:hover 鼠标悬停时，触发两扇“门”的平移*/
.box:hover::before {transform: translateX(-100%); /*左扇门向左移*/
}.box:hover::after {transform: translateX(100%); /*右扇门向右移*/
}4.源码展示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双开门效果</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {margin: 50px auto;height: 600px;width: 1000px;background-size: 1000px;background-image: url(images/pik_lightning.jpg);overflow: hidden;}.box::before,.box::after {content: '';float: left;width: 50%;height: 600px;background-size: 1000px;background-image: url(images/pik_poster.jpg);transition: all 1s;}.box::after {background-position: right 0;}.box:hover::before {transform: translateX(-100%);}.box:hover::after {transform: translateX(100%);}</style>
</head><body><div class="box"></div>
</body></html>更多推荐
CSS transform属性的简单应用——双开门动画效果
发布评论