css3 鼠标悬浮动画效果
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 鼠标悬浮动画效果的更多相关文章
- 利用 :before :after伪类实现鼠标悬浮动画效果
1.最近在逛网站的时候,想找一下喜欢的鼠标悬浮效果,避免广告的嫌疑,直接放图了: 2.在实现的时候,如果在直接使用鼠标hover ,transform,进行过渡,不能达到想要的效果,因为同时只能触发一 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- CSS3悬浮动画效果
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...
- 实现鼠标hover动画效果自己理解的两种方法——练习笔记
练习前端技术学院的任务,需要实现"导航栏中的链接,随着鼠标悬浮的位置,相应的链接下出现红色线段"的效果(如图1),我的理解有简易与稍显复杂一些的方法: 首先想到的就是直接利用伪元素 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS3中的动画效果-------Day72
还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- mfc中的_T
mfc 中的字符串表示常用_T,意为text,定义为宏定义,可以方便的定义所有字符串为UNICODE(16位,长字符)或者ANSI(8位,短字符). 如果对于所有的字符串定义了_T并且定义了预处理标志 ...
- Sql Server 小知识不断扩充中
1. char.varchar.nvarchar 区别 char 定长字符数据长度8000字符,小于8000字符时以空格填充. varchar 变长字符数据最大长度8000,小于8000字符时不会以 ...
- 【JZOJ6421】匹配
description analysis 对于普通树形\(DP\)可以设\(f[i][0/1],g[i][0/1]\)表示\([1,i]\)的线段树的最大值.方案数 \(0\)表示不选择根与某个儿子相 ...
- 01二维背包——poj2576
/* 要求把a数组分成两个集合,两个集合人数最多差1,并且元素之和的差尽可能小 那只要把所有可行的列出来即可 01二维背包,即体积是个二维数据,那么我们的背包状态也应该设为二维 dp[j][k]设为 ...
- docker快速安装kibana
一.拉取镜像 docker pull kibana:5.6.9 二.启动容器 docker run --name kibana -e ELASTICSEARCH_URL=http://10.0.0.1 ...
- NX二次开发-UFUN设置工程图PNG图片高度UF_DRF_set_image_height
#include <uf.h> #include <uf_drf.h> UF_initialize(); //插入PNG char* file_name = "D:\ ...
- C语言-实例3个数由小到大排序
VS2012 //C语言实例 3个数由小到大排序 #include <stdio.h> void main() { int a, b, c, t; printf("Please ...
- detours学习
最近学习detours3.0,总结下学习过程,给后来学习者一点参考,也便于自己以后复习 首先应该知道detours可以干什么,学习之前最好看一下detours文档,这个文档很简单,只有4篇文章,相对比 ...
- java.sql.SQLException: ORA-12704: 字符集不匹配
INFO:HibernateSimpleDao----queryForListWithSql:SELECT site_id as id ,MAX(case attr_name when 'siteNa ...
- 7 Scatter-loading Features
7.1 About scatter-loading The scatter-loading mechanism enables you to specify the memory map of an ...