CSS鼠标浮动简单特效

近期闲下来的时候,做了个hover浮动的小特效

首先最简单的HTML,我只设置了两个DIV,方便观察,有兴趣和技术的可以自行扩展,比如添加图片缩放等

HTML代码:

更多配置

CSS代码:

    

其中除了常规设置外,特效最重要的是CSS的hover选择器

以及过度效果transition属性

通过.all:hover可以设置当鼠标浮动到该DIV(all)时可以获得的效果

而.all:hover .title 则可以让鼠标浮动到.all时.title可以获得的效果

transition属性设置可以让这些过渡效果时间发生改变,改变的多少取决于你自行设置的值,我这里分别设置了0.1s和0.3s

为了节省代码量,可以将0减去不写....


这只是自己无聊的游戏之举,一般学习了HTML和CSS的各位对于这种效果相信也是信手拈来.

日后可能会上传些JavaScript的小知识..看情况吧,我是个比较随性的人23333.

你可能感兴趣的:(前端)