美文网首页
CSS 实现div侧面弹性滑出效果

CSS 实现div侧面弹性滑出效果

作者: 柯基爱蹦跶 | 来源:发表于2018-09-07 21:53 被阅读22次

                 今天做了个小功能,如下:


    hibenben.com1.GIF

    这就是一个侧滑效果,在css style里就能实现

              /* 首先用到了keyframes,想要深究可以自行进入w3school官网搜索学习,另外一个transform平移,而translate3d呢是一个比translate多两个参数的东西,可以实现更丰富的效果 */
             @keyframes bounceInLeft {
                    0% {
                        transform: translate3d(-3000px, 0, 0);
                    }
                    60% {
                        /*  opacity: 1;不透明*/
                        transform: translate3d(25px, 0, 0);
                    }
                    75% {
                        transform: translate3d(0px, 0, 0);
                    }
                    90% {
                        transform: translate3d(0px, 0, 0);
                    }
                    100% {
                        transform: none;
                    }
                }
    
                 <!-- 这里使用上面定义的动画效果,后面用到了贝塞尔曲线实现快慢效果 -->
                .floatImg{
                    animation: bounceInLeft 3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
                }
    

    另外学到了一个很好玩的东西position,我总把它记成location,类似于Android xml的布局定位属性
    http://www.w3school.com.cn/cssref/pr_class_position.asp

    style="position: fixed"
     /* 它有四个属性absolute、fixed、relative、static、inherit*/
    具体上面给了链接,我就不一一解释了,准备准备下班赶地铁了!
    
    so simple!

    相关文章

      网友评论

          本文标题:CSS 实现div侧面弹性滑出效果

          本文链接:https://www.haomeiwen.com/subject/djyhgftx.html