关闭

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

时间: 2018-02-01阅读: 16010标签: 效果

css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用css3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。


(1)背景色过渡变化

下面鼠标移入后,按钮背景色会慢慢地变成黄色。鼠标离开,过渡效果又会发生,颜色恢复到初始状态。


<style>
.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
    transition: background 0.5s;
    -webkit-transition: background 0.5s;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
</style>
 
<button class="slickButton">hangge.com</button>



(2)背景色,文字都需要过渡效果

上面样例看到虽然背景色实现了过渡,文字颜色还是直接改变的。要实现多个样式的过渡,只需使用逗号作为分隔符,同时制定多个样式属性即可。


<style>
.slickButton {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
    transition: background 0.5s, color 0.5s;
    -webkit-transition: background 0.5s, color 0.5s;
}
 
.slickButton:hover {
    color: black;
    background: yellow;
}
</style>
 
<button class="slickButton">hangge.com</button>


(3)过渡所有样式

如果想要过渡所有的样式,并且希望所有过渡都同步完成,可以在指定属性名的地方填 all。  

transition: all 0.5s;
-webkit-transition: all 0.5s;


(4)淡入淡出

通过修改 opacity 属性改变透明度,从而实现图像的淡入淡出。
<style>
.slickButton2 {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
.slickButton2:hover {
    opacity: 1;
}
</style>
<button class="slickButton2">hangge.com</button>


(5)阴影(投影)效果

使用 box-shadow 属性可以为任何盒子元素添加阴影,从而制作出漂亮的悬停效果。


<style>
.slickButton3 {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;   
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
}
.slickButton3:hover {
    box-shadow:5px 5px 10px gray;
}
</style>
<button class="slickButton3">hangge.com</button>


(6)发光效果

同样利用 box-shadow 属性可以实现发光效果,只不过把阴影偏移量设为0。


<style>
.slickButton4 {
    color: white;
    font-weight: bold;
    padding: 10px;
    border: solid 1px black;
    background: lightgreen;
    cursor: pointer;   
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
}
 
.slickButton4:hover {
    box-shadow:0px 0px 20px orange;
}
</style>
<button class="slickButton4">hangge.com</button>


下面样式不值得使用过渡效果

对于内边距(padding)、外边距(margin)和字体大小(font-size)。如果应用由于浏览器要重新计算布局大小或文本提示,这样过渡会消耗更多电量,同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素,那么最好使用变形技术
来源:http://www.hangge.com/blog/cache/detail_982.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/414

关闭

CSS实现无外边框列表效果

使用外层容器切割:给每一个 li 设定右边框和下边框线,使用CSS选择器此方法仅适用于每行固定显示两个li的情况,不需要计算宽高,也不需要设置父容器。使用table通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

js实现放大镜效果

使用电脑逛淘宝,京东等商城时,将鼠标移入图片中,图片会放大,之前一直在想这种是怎么实现的,前两天刚写出来,纯js实现的,无任何工具库。下面先来看下思路吧!刚学js的时候可能对于布局不是很重要

实现一个div的拖拽效果

实现思路:鼠标按下开始拖拽,记录摁下鼠标时的鼠标位置以及元素位置,拖动鼠标记下当前鼠标的位置,鼠标当前位置-摁下时鼠标位置= 鼠标移动距离

纯CSS3制作3d网红热词盒子

今天给大家分享的是CSS3制作的带3d效果的方块,上面简单整理了一下2019年的网红热词。这个DEMO用到了CSS3的3d变化技巧,做出来的效果还不错。请注意,该3d效果依赖transform-style: preserve-3d属性

js如何实现新手引导效果?

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。

Vue.js实现tab切换效果

在我们平时浏览网站的时候,经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后,开始要写出一些简单的特效。实现思路是点击上方的标题,下方的内容随之发生改变

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

css按钮交互效果

是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果,能让更多的朋友喜欢上css。首先来说一下:active,就是当用户按住一个a标签的时候的意思,鼠标点击下去但没有松开的时候就这样样子啦。

利用CSS变量实现炫酷的悬浮效果

最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

强大的CSS:用纯css模拟下雪的效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。浏览器实现动画无非css3和canvas(还有gif)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!