[web前端] css3 transition属性实现3d动画效果


 cp from : https://www.cnblogs.com/chrxc/p/5123375.html

transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少,现在我给大家介绍并实际实现下该属性。

    transition字面意思是变迁、变换、过度的意思,所以transition属性也离不开这个大致意思,其中该属性中的重要属性是:  

    transition-property:指定过度的元素; 如:transition-property:background,就是指background属性参与这个过度。

    transition-duration:指定这个过度持续时间;

    transition-delsy:延迟过度时间;

    transition-timing-function:指定时间过度类型; 如:ease\linear\ease-in\ease-out\ease-in-out\    

           其中:ease是越来越慢,linear是匀速运动,ease-in是先慢后快,ease-out是先快后慢,ease-in-out是先慢后快再慢

    transition:all 0.3 ease;  其中all是指全部属性参与,0.3是过度时间,ease是过度类型;

    现在应该对这个属性有了个基本的了解,其实知道了上述属性,我们就可以动手做一些页面上的动画效果

.divt{
    text-align: center;
    padding-top: 150px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.divimg{
    text-align: center;
}
.imgts{
    width: 175px;
    height:175px;
    background-color: white;
    border: 2px solid blue;
    margin-top: 50px;
    margin-left: 50px;
    text-align: center;
    display: block;
    transform:rotate(10deg);
    transition:all 0.5s ease-in;
    box-shadow: 2px 2px 4px #9932CC;
    padding: 5px;
    margin: auto;
}
.imgts:hover{
    transform:rotate(0deg) scale(1.05);
    box-shadow: 15px 15px 21px blue;
}
.divimg1{
    width: 200px;
    height: 40px;
    background-color: pink;
    transition-property: background-color;
    transition-duration: 0.01s;
    transition-timing-function: ease;
}
.divimg1:hover{
    background-color: yellowgreen;
}

 上述代码实现了鼠标悬停图片旋转和鼠标悬停改变颜色的功能,这个是不是很好用。

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM