1.属性:transition
需要规定内容:
(1)指定要添加效果的CSS属性
(2)指定效果的持续时间。
注意:如果未指定的期限,transition将没有任何效果,因为默认值是0。
属性解释:
transition-delay 动画的延迟
transition-delay:1s;
transition-duration 动画的执行时间
transition-duration: 1s;
transition-timing-function动画的执行方式 linear 匀速 ease-in 慢开 ease-in-out 慢开慢关
transition-timing-function: linear;
transition-property 过渡什么属性 margin-left 如果要过渡多个属性 分开 all 过渡所有属性
transition-property:margin-left;
下面我们来做两个实例:
- 菜单阴影动态效果
(1)做一个菜单
<body>
<ul>
<li>首页</li>
<li>公司文化</li>
<li>公司招聘</li>
<li>公司简介</li>
<li>练习我们</li>
</ul>
</body>
<style>
ul{
margin: 0;
padding: 0;
height: 50px;
background: black;
}
li{
list-style: none;
float: left;
width: 100px;
line-height: 50px;
text-align: center;
color: white;
}
</style>
效果展示;
(2)加上文字阴影,做出动画效果
扫描二维码关注公众号,回复:
6180266 查看本文章
li{
text-shadow: 30px -15px 1px black;
transform: rotatex(0deg);
transition: text-shadow .5s ease-in,transform 0.5s ease-in-out;
}
li:hover{
text-shadow: 0px 0px 1px white;
}
/*鼠标悬停出现阴影*/
上述两步之后效果就可以出现啦!!
- 图片放大效果
(1)在盒子里放入图片
<div class="b">
<img src="./img/car.jpg" alt=""/>
</div>
<style>
.b{
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.b>img{
width: 300px;
height: 200px;
}
</style>
效果展示:
(2)加入过渡和鼠标悬停效果
<style>
.b>img{
transition: all .5s linear;
}
.b:hover img{
transform: scale(1.5);
}
</style>
效果展示: