有时候,css3的过渡动画效果比js的计时器控制要好用,因为你不用去设计计时器,利用css3的过渡可以让元素很流畅的播放,接下来,我简单介绍一下一些css3的过渡属性并且用他们做一些星空转换的demo。
第一,知识讲解》》》
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
css3的部分属性及描述
transition 》》》简写属性,用于在一个属性中设置四个过渡属性。
transition-property 》》》规定应用过渡的 CSS 属性的名称。
transition-duration 》》》定义过渡效果花费的时间。默认是 0。
transition-timing-function 》》》规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 》》》规定过渡效果何时开始。默认是 0。
第二,制作星空转换图
步骤一:准备素材》
1,我准备了2张图片做为星空装换的素材
步骤二:制作计划》
设想的情况是当用户的鼠标移上图片区域,地球就会缩小,缩小的同时,就会发生星空的装换,变成茫茫星海
步骤三:开始实践》
html部分》
<div class="container">
<img src="./earth.png" alt="">
</div>
css部分》
<style>
body {
background-image: url('airSpace.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0;
margin: 0;
}
img {
width: 100%;
height: 100%;
margin: 0 auto;
left: 50%;
/* 开始设置转换的属性名字 */
transition-property: opacity border-radius transform;
/* 开始设置转换的属性过渡时间 */
transition-duration: 7s;
/* 开始设置转换的属性过渡曲线 */
transition-timing-function: ease;
}
.container {
width: 100%;
height: 800px;
/* 设置png地球图片附近是黑色的背景 */
background-color: black;
/* 开始设置转换的属性名字 */
transition-property: opacity;
/* 开始设置转换的属性过渡时间 */
transition-duration: 8s;
/* 开始设置转换的属性过渡曲线 */
transition-timing-function: ease;
}
/* 鼠标移入图片后触发效果*/
img:hover {
border-radius: 50%;
opacity: 0;
transform: scale(0.1);
}
/* 鼠标移入整个页面后触发效果*/
.container:hover{
opacity: 0;
}
</style>
移入前
移入后,过渡中,星空逐渐转换
移入后
任务完成,Nice !
源自:用css3的过渡动画效果简单做星空转换的效果_qq_41136216的博客-CSDN博客