0% {
font-size: 16px
-webkit-transform: rotate(0deg)
}
100% {
font-size: 16px
-webkit-transform: rotate(-180deg)
}
}
动画过程中保持字体大小就可以了
你这种情况比较复杂!都是滤镜做的字体动感模糊窗口--图层,右击字体图层,删格式化文件,滤镜--模糊--动感模糊,选择角度和距离,角度表示你动感模糊的方向,距离越大动感模糊效果越厉害
图片雾化在你原有图层上新建图层保证前景色和背景色为黑白,滤镜--渲染--云彩,将图层模式正常改为滤色即可。。如果觉得雾化太重可以适当降低不透明度
<style>.father{
width: 200px height: 200px
border: 1px solid #000
margin: 100px auto
perspective: 800px
}
.son{
width: 100% height: 100%
background: lime
transition: all 3s
transform: translateZ(-200px)
}
.son:hover{
transform: translateZ(200px)
}
</style>
<div class="father">
<div class="son">鼠标移</div>
</div>
其浏览器没效自行添加前缀再试注意:IE10+、FireFox、Chrome、Safari才支持3D转换效