一、transition过渡小案例
| 应用到的样式 |
|
| position：relative、absolute； |
:first-child；选中第一个元素 |
| transition：all 0.5; |
:last-child;选中最后一个元素 |
| display：none、block； |
:nth-child(n);选中某个元素 |
| transform-origin: top right;允许您更改转换元素的位置。 |
transform: rotate(ndeg);旋转角度 |
1、点击导航栏跳出子导航
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.subnav {
margin: 100px auto;
width: 50px;
}
.subnav ul li {
width: 50px;
height: 30px;
line-height: 30px;
margin-top: 10px;
position: relative;
text-align: center;
background-color: rgb(245, 188, 188);
}
.subnav ul li div {
position: absolute;
right: 50px;
top: 0;
width: 180px;
height: 30px;
z-index: -999;
transition: all 0.5;
display: none;
background-color: rgb(212, 252, 174);
}
.subnav ul li:hover div {
display: block;
}
<div class="subnav">
<ul>
<li>首页
<div>点击进入</div>
</li>
<li>京东
<div>点击进入</div>
</li>
<li>淘宝
<div>点击进入</div>
</li>
<li>唯品会
<div>点击进入</div>
</li>
<li>拼多多
<div>点击进入</div>
</li>
</ul>
</div>
2、点击过渡旋转图片
div {
width: 250px;
height: 170px;
margin: 350px auto;
position: relative;
}
div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
div:hover img:first-child {
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:last-child {
transform: rotate(360deg);
}
<div>
<img src="../05transition点击旋转的楚乔/images/1.jpg" alt="">
<img src="../05transition点击旋转的楚乔/images/2.jpg" alt="">
<img src="../05transition点击旋转的楚乔/images/3.jpg" alt="">
<img src="../05transition点击旋转的楚乔/images/4.jpg" alt="">
<img src="../05transition点击旋转的楚乔/images/5.jpg" alt="">
<img src="../05transition点击旋转的楚乔/images/6.jpg" alt="">
</div>
3、鼠标移动到图片缩进效果
div{
width: 600px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
div img{
width: 650px;
height: 400px;
transition: all 0.6;
}
div:hover img{
margin-left: -20px;
}
<div>
<img src="../common/images/2.jpg">
</div>
4、鼠标经过显示阴影
div {
width: 400px;
height: 250px;
margin: 100px auto;
}
div img{
width: 400px;
height: 250px;
transition: all 0.6;
}
div:hover img{
box-shadow: 0px 10px 20px rgba(228, 46, 46, 0.5);
transform: translateY(-20px);
/* 20px正数为向下缩影，负数为向上缩影 */
}
<div>
<img src="../common/images/2.jpg" alt="">
</div>
5、css3音乐盒翻转案例
body{
background: pink;
}
.box{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
.top,.bottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.6s ease 0s;
transform-origin: bottom;
/* 在绝对定位中，盒子里border-radius和overflow一起用才有效果 */
border-radius: 50%;
overflow: hidden;
}
.box:hover .bottom{
transform: rotateX(180deg)
}
<div class="box">
<div class="top">
<img src="../07音乐盒css3应用/resoues/musicb.jpg" alt="">
</div>
<div class="bottom">
<img src="../07音乐盒css3应用/resoues/musict.jpg" alt="">
</div>
</div>
6、动画过渡总结
| 样式参数 |
样式解释 |
| background: -webkit-linear-gradient(#292929, #252525); |
背景颜色线性渐变 |
| display：-webkit-box； |
使用盒子伸缩模型 |
| -webkit-box-orient：horizontal、vertical、其中默认值是inline-axis，即横向排列 |
设置子元素排列方向 |
| -webkit-box-flex：1； |
子元素之间比例，仅作一个系数 |
| -webkit-box-direction：normal、reverse、inherit |
其中默认值是normal |
| -webkit-perspective：400px； |
将平面图形转换为具有透视的3D图形(元素距离视图的距离，以像素计) |
| -webkit-transition-delay: 250ms; |
动画延迟250毫秒 |
本文来源于：爱情需要问候，网站美化需要css修饰-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。
评论