css实现简单的抽奖动画效果和旋转效果,还有春联效果

使用css的animation和transform和transition可以实现简单的图片放大缩小,旋转,位移的效果,由此可以延伸的动画效果还是挺多的,比如图片慢慢放大,图片慢慢旋转并放大,图片慢慢变化位置等等,

抽奖动画效果图

实现的原理也很简单,就是通过使用动画animation和关键动画帧来实现的,可以使用缩放来进行平滑的过渡效果,下面是源码:



    
        
        
        Document
    
    
        
抽奖效果

图片慢慢旋转动画

图片慢慢旋转是通过rotate来实现的,并且鼠标放上去之后,会有暂停的效果:下面的动图有卡顿的效果,实际情况非常丝滑

旋转图片的源代码:



    
        
        
        Document
    
    
        

春联效果

春节快要到了,所以春联也整起来吧,使用了变换中的旋转,还有变化中心位置的修改,效果图如下:

源代码:



    
        
        
        Document
    
    
        

 

你可能感兴趣的:(HTML前端,css,前端)