每日一点前端-9-H5视觉特效

使用h5的一些新特性,可以很简单的制作很多好看而且有意思的效果出来而且代码量也是极少的。


每日一点前端-9-H5视觉特效_第1张图片
过渡效果.gif
每日一点前端-9-H5视觉特效_第2张图片
H5的视觉特效

代码:




    
    视觉特效
    


border-radius给元素设置圆角

RGBA支持

RGBA支持

box-shadow设置元素的阴影效果

box-shadow设置元素的阴影效果box-shadow: 0px 0px 5px red

box-shadow设置元素的阴影效果box-shadow: 2px 2px 5px red

box-shadow设置元素的阴影效果box-shadow: 2px -2px 5px red

box-shadow设置元素的阴影效果box-shadow: 0px 0px 5px red inset

box-shadow设置元素的阴影效果box-shadow: 0px 0px 5px red inset,2px 2px 5px blue;

旋转

style="transform: rotate(45deg);background-color: #00FF00"

渐变

过渡

将鼠标放入
每日一点前端-9-H5视觉特效_第3张图片
公众号.png

你可能感兴趣的:(每日一点前端-9-H5视觉特效)