全栈(一)

运动曲线、图片文字遮罩、二级菜单、变形

2019-12-19  本文已影响0人  Agony_锐

运动曲线:

animation-timing-function 动画曲线 :

            linear :匀速 

            ease :开始和结束慢速 

            ease-in: 开始是慢速 

            ease-out :结束时慢速 

            ease-in-out: 开始和结束时慢速

以上都可以用贝赛尔曲线(缓冲回弹)

nth-child():括号里写几,就是第几个"孩子"

图片文字遮罩:

隐藏不占位,不可用overflow

hover    一定要给"父亲"

二级菜单:

每个图片一级菜单,鼠标移入时,所提示的文字是二级菜单

鼠标移入图片显示,为是么离开了还显示?

因为给box设的hover,而图片都在box内

变形:

CSS3 transform变换 :

             1、translate(x,y) 设置盒子位移 

             2、scale(x,y) 设置盒子缩放 

             3、rotate(deg) 设置盒子旋转 

             4、skew(x-angle,y-angle) 设置盒子斜切

当鼠标移入时,图片放大用:.xxx:hover{transform:scale(xx,xx)}

上一篇下一篇

猜你喜欢

热点阅读