css鼠标划过时的一些小特效

css部分-----------

.div1{width: 100px;
    height: 100px;
    border: 1px solid;
    position: relative;
    background-color: #fff;
    transition: width 2s;       /*划过时的颜色推送的时间*/
    overflow: hidden;           /*隐藏多余的：before，让它只占满div1*/
    z-index: 2;
}
.div1:before{content: '';
    position: absolute;
    left: -240px;
    top: 0px;
    width: 100px;
    height: 100px;
    background: #629feb;
    z-index: 1;
    transition: width 2s;
    transform: skew(30deg, 0);      /*让它是斜着划过去，好看一些*
}
.div1:hover:before{width: 1000px;
}

body部分-------

<div class="div1">

</div>

上面的transform和transition都没有适配浏览器，

-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;

-webkit-transform: skew(30deg, 0);
-ms-transform: skew(30deg, 0);
-moz-transform: skew(30deg, 0);

-o-transform: skew(30deg, 0);

先给出一个div1的盒子，再给div1添加一个伪元素，当鼠标划在div1上时，

因为hover会触发伪元素的效果（这里不是dom效果），这个小特效可以用于一些菜单里。

第一次发博客还不太会用这个东西，原本想截个动态图也没成功，大家谅解哈。

css鼠标划过时的一些小特效相关推荐

《div图层被鼠标划过时其背景色变色的五种方式》
概述: 同样是为了提高用户体验程度,本篇内容将叙述:div图层被鼠标划过时其背景色改变,鼠标离开相关div图层时其颜色变为原来的颜色.实现上述效果下面总结了五种实现方式,请您耐心阅读,或许会有点收获. ...
[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
CSS鼠标划过背景渐变效果
所有的按钮或链接,当鼠标划上去后背景色会慢慢改变在所有的按钮或链接上加上transition样式针对不同的浏览器写不同的transition. 火狐是-moz-transition,IE是-ms- ...
css鼠标划出动画(transition属性详解)
动画描述:鼠标滑入0.2s添加背景颜色,鼠标滑出0.2s变成之前背景颜色 .navigation{transition: all 0.2s ease-in 0s; } .navigation:hove ...
web前端中——this指向以及this的应用，函数的调用——this代码举例说明——举例：当鼠标划到列表上时，出现div内容，当鼠标移开列表时，div隐藏
一: //this:这个 //想要知道this代表着什么可以直接在中输入alert(this); //由此可以看出window是JS中的"老大" eg:alert(1);其实就是w ...
angular n'g-zorro走马灯划过时如何停止切换
angular n'g-zorro走马灯划过时如何停止切换在写项目时,我用到了ng-zorro这个控件,后来经理想在鼠标划过时能停止swipper自动切换,我想了一下 ,最后发现zorro的走马灯有 ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
CSS 控制鼠标划过，图片放大效果
♩ 背景今天在做后台管理 CMS 时,对于小图片的显示感觉太大了会浪费页面空间,想着在鼠标滑动时可以缓慢放大就好. ♪ 知识点 ①. transform:scale() 用法:transform: ...
鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法
1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示 <div class="date7"> <a href=""><di ...

css鼠标划过时的一些小特效

css鼠标划过时的一些小特效相关推荐

最新文章

热门文章