实例:
/*全部图片动画效果*/ .donghua{ width: 180px; height: 110px; overflow: hidden; -webkit-filter: brightness(100%);/*兼容*/ filter: brightness(100%);/*初始大小*/ float:left; } .donghua img{ cursor: pointer; transition: all 0.8s;/*规定变化时间*/ -moz-transition: all 0.8s;/*兼容*/ -webkit-transition: all 0.8s; } .donghua img:hover{ transform: scale(1.05);/*明暗程度*/ } .donghua:hover{ -webkit-filter: brightness(110%); filter: brightness(110%);/*变化后大小*/ }
1、filter
filter滤镜:
常用:
1、blur(px)高斯模糊
2、brightness(%)设置亮度
0%(全黑)——100%(正常)——>100%(加亮)
3、contrast(%)设置对比度
0%(全黑)——100%(正常)——>100%(对比度降低)
4、drop-shadow(h-shadow v-shadow blur spread color)(设置阴影)
2、transition
transition(过渡)
1、transition-property(规定设置过渡效果的css属性的名称)
2、transition-duration(规定完成过渡的时间)
3、transition-timing-function(规定速度的效果)
4、transition-delay(定义过度何时开始)
3、transform
transform(2D 3D转化)
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
小实例:
360°旋转
/*旋转动画*/ .zhuanzhuanzhuan{ width: 66px; height: 66px; float: left; position: absolute; top: 0px; left: 35%; background:url(../../img/spr.png); background-size: 66px 66px; } .xuanzhuan{ position: absolute; animation-duration: 2s; animation-timing-function: linear; animation-delay: -2s; animation-direction: normal; animation-fill-mode: both; animation-iteration-count:infinite; animation-play-state: running; animation-name: xuanzhuan; } /*关键帧*/ @-webkit-keyframes xuanzhuan{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }