CSS3案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    body{

        margin:0;

    }

    div{

        width:150px;

        height:150px;

        background: #ffb568;

        font:30px/202px 'Arial';

        color:red;

        text-align: center;

        margin: 0 auto;

        border-radius:50%;

    }

    .yuan3{

        display: none;

        /*transition指的是变换，参数有变换时间，延迟时间，变化曲线，宽度高度颜色变化等*/

        transition:1s;

    }

    .yuan2:hover~.yuan3{

        display: block;

        background: #3fb8ff;

    }

    .yuan3:hover{

        display:block;

    }

    .yuan5{

        /*opacity是不透明度*/

        opacity: 0;

        width:0;

        height: 0;

        /*transition写在这里才是.yuan5常有的属性，无论出现还是消失都会有动画的效果*/

        transition:1s;

        overflow:hidden;/*如果圆圈中的数字超过区域就隐藏*/

    }

    .yuan4:hover~.yuan5{

        /*如果将transition写在这里的话，只有当鼠标悬停在.yuan4上的时候才会有效果，

        当鼠标移出.yuan2的区域时，因为不出发hover的条件，所以消失的时候就没有变化效果了，

        结果就是瞬间消失*/

        opacity: 1;

        width:150px;

        height: 150px;

        background: #43ff0b;

    }

    .yuan5:hover{

        opacity: 1;

        width:150px;

        height: 150px;

        background: #43ff0b;

    }

</style>

<body>

    <div class="yuan1">1</div>

    <div class="yuan2">2</div>

    <div class="yuan3">3</div>

    <div class="yuan4">4</div>

    <div class="yuan5">5</div>

    <div class="yuan6">6</div>

</body>

</html>

transition

可以设置颜色，宽度，高度，变化曲线等的变化；

如果需要实现从无到有的动画变化，那个两个值就要存在一个中间值，比如0和1；而none和block就没有中间值，所以这个变化就不能以动画的形式呈现出来，只能实现一瞬间的变化。

opacity

设置不透明度，0表示透明，但是区域还占有位置。

如果要实现仅仅是高度的动画效果，那么就要使宽度固定，position-property:all

css3 鼠标悬浮动画效果的更多相关文章

  1. 利用 :before :after伪类实现鼠标悬浮动画效果

    1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...

  2. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  3. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  4. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. CSS3悬浮动画效果

    利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...

  6. 实现鼠标hover动画效果自己理解的两种方法——练习笔记

    练习前端技术学院的任务,需要实现"导航栏中的链接,随着鼠标悬浮的位置,相应的链接下出现红色线段"的效果(如图1),我的理解有简易与稍显复杂一些的方法: 首先想到的就是直接利用伪元素 ...

  7. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  8. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  9. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

随机推荐

  1. PHP算法之有效的括号

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合.注意空字符串可被认为是 ...

  2. 用Cygwin实现在window环境下使用Linux命令-nohup 来后台运行程序

    1.安装Cygwin 下载 cygdrive-选择64或32位   http://www.cygwin.com/ 注:可以百度搜索安装步骤 2.配置它的环境变量 添加到path路径中 3.cmd  执 ...

  3. swiper缩略图active切换失灵的解决思路

    报错信息:Cannot read property ‘indexOf’ of undefined swiper. 来源是swiper.min.js,首先检查自己写的js配置是否有误,没有就调试插件源代 ...

  4. NX二次开发-UFUN体找边UF_MODL_ask_body_edges

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_modl.h> #include <u ...

  5. P1624 单词缩写

    P1624 单词缩写 题目描述 树树发现好多计算机中的单词都是缩写,如GDB是全称Gnu DeBug的缩写.但是,有时候缩写对应的全称会不固定,如缩写LINUX可以理解为: (1) LINus’s U ...

  6. 检测API函数的InlineHook

    BOOL GetProcHookStatus(LPCSTR lpModuleName, LPCSTR lpProcName) { HMODULE hModule = GetModuleHandleA( ...

  7. linux在不关机情况下新增硬盘的方法

    开机状态插入硬盘 不关机执行命令 echo "- - -" > /sys/class/scsi_host/host0/scan 注意 echo "- - -&quo ...

  8. idea 启动异常xxxx.local: nodename nor servname provided, or not known

    在host文件里面新增配置: 127.0.0.1 xxxx.local localhost 原文地址:https://www.jianshu.com/p/12e01fa9c69c

  9. KNN与决策树

    KNN: 就是计算特征之间的距离,某一个待预测的数据分别与已知的所有数据计算他们之间的特征距离,选出前N个距离最近的数据,这N个数据中哪一类的数据最多,就判定待测数据归属哪一类. 假如N=3,图中待测 ...

  10. Tomcat调优详解

    前言 在这里告诫一下那些感觉自己啥都会的朋友们,其实你会的可能只是皮毛,不要感觉这个东西以前已经做过了,就不想去做了 其实你还远没有达到精通的地步,遇到以前做过的东西,也要用心的再去做一遍,你可能会从 ...