css3 :hover添加特效

亦凉 2022-08-22 05:53 360阅读 0赞

## 为改变hover动画效果，可以为hover添加transition 增加过度效果 ##

### 1、第一种写法（事件前有动画效果）： ###

<style> body{ padding: 100px} .demo{ width: 100px; height: 100px; background-color: blue; } .demo:hover{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); -webkit-transition: transform 2s linear; -moz-transition: transform 2s linear; -ms-transition: transform 2s linear; -o-transition: transform 2s linear; transition: transform 2s linear; } </style>
        <div class="demo"></div>

此效果可以改变鼠标移入目标区域上的hover效果，缺点：鼠标移出区域还原之前效果时，没有过度效果，很生硬；改善此效果参看方法二（如下）；

### 2、方法二（事件前后有动画效果） ###

<style> body{ padding: 100px} .demo{ width: 100px; height: 100px; background-color: blue; -webkit-transition: transform 2s linear; -moz-transition: transform 2s linear; -ms-transition: transform 2s linear; -o-transition: transform 2s linear; transition: transform 2s linear; } .demo:hover{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } </style>
        <div class="demo"></div>

将transition放在目标节点css中，即可在hover前后均有动画效果；  
*\*transition还可以指定其他效果,并且可以同时指定多个效果，比如：transition : width 1s； opacity : 0.5s;*

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 transition 渐变特效

transition的使用需要和 hover 搭配使用 transition：属性持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s) tran

一时失言乱红尘/ 2022年12月22日 04:53/ 0 赞/ 102 阅读

相关【HTML】使用css3和html给网站添加上春节灯笼特效

马上就过年了，网站也可以装饰一下，本文就教大家如何使用css和html代码给你网站添加上一对新年灯笼。 ![1da4149dc2e3c9ff345f78971a489737.

Myth丶恋晨/ 2022年09月03日 15:26/ 0 赞/ 158 阅读

相关 css hover出现文字,hover显示文字

Simple Tile Hover Effect .tiles \{ width: 1040px; font-size: 0; text-align: center;

矫情吗；*/ 2022年09月02日 14:52/ 0 赞/ 293 阅读

相关 css3 :hover添加特效

为改变hover动画效果，可以为hover添加transition 增加过度效果 1、第一种写法（事件前有动画效果）： <style> body{ padd

亦凉/ 2022年08月22日 05:53/ 0 赞/ 361 阅读

相关 css3 3D旋转特效

最近自己的网站正在制作，由于是个人网站，所以我傲娇的抛弃了IE，痛快的用起了css3和html5的诸多特效，然而问题亦随之而来。这篇文章的主要讲解在使用css3的3D旋转的时候

「爱情、让人受尽委屈。」/ 2022年07月16日 06:28/ 0 赞/ 291 阅读

相关 CSS3 实现3D特效

CSS3 中的动画效果 transition animate transition主要是从一个属性平滑过渡到另一个属性，而animate则是结合关键帧技术，

朱雀/ 2022年07月13日 08:55/ 0 赞/ 264 阅读

相关 CSS3特效之翻转

![这里写图片描述][SouthEast] 鼠标悬停，图片翻转 ![这里写图片描述][SouthEast 1] <!doctype html> <html

港控/mmm°/ 2022年07月11日 07:46/ 0 赞/ 187 阅读

相关 CSS3 实现简单的hover旋转放大，撤销hover渐变还原

> 利用CSS3中的transform功能和transition功能实现简单的hover时旋转放大，撤销hover渐变还原的动画效果 transform > 利用tra

缺乏、安全感/ 2022年06月01日 02:46/ 0 赞/ 316 阅读

相关 css3实现流星雨特效

用到css3知识: radial-gradient 径向渐变， filter， transform， animation以及 nth-child选择器等

今天药忘吃喽~/ 2021年12月10日 08:37/ 0 赞/ 358 阅读

相关 css3 卡片hover3D效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2ly

女爷i/ 2021年09月07日 06:19/ 0 赞/ 454 阅读