CSS鼠标浮动简单特效

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

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

HTML代码:

<div class="all">
    <div class="title">更多配置</div>
</div>

CSS代码:

    <style>
        .all{
            width: 200px;
            height: 200px;
            border: solid 1px #e1e2e3;
            margin: auto;
            transition: .1s;

        }
        .title{
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #e1e2e3;
            font-size: 20px;
            transition: .3s;
        }
        .all:hover{
            box-shadow: 0 0 10px #0ff;
            border-color:#0ff;
            width: 500px;
            height: 400px;
        }
        .all:hover .title{
            background-color:#0ff;
            color:#fff;
            height: 150px;
            line-height: 150px;
        }
    </style>

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

以及过度效果transition属性

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

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

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

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

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

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