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 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- Dijkstra算法举例分析
题目如下: 如上图,设A为源点,求A到其他各顶点(B.C.D.E.F)的最短路径.线上所标注为相邻线段之间的距离,即权值.(注:此图为随意所画,其相邻顶点间的距离与图中的目视长度不能一 一对等). 解 ...
- java idea 创建第一个java 程序
我们在 src 目录下边创建一个 package. 然后在package下创建我们的程序 helloworld.java 代码: package com.api.com; public class ...
- flink idea 打包jar 并放到集群上运行
flink idea 打包jar 并放到集群上运行 在开始之前注意前提,当前项目的scala的版本要和集群上的scala一致 我已经创建好一个wordCount的flink项目 注意项目的po ...
- CSS选择器，层叠
CSS选择器 .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" ...
- leetcode-并查集
- 题目:130 并查集: class Solution: def solve(self, board: List[List[str]]) -> None: """ ...
- 带各位深入理解java1.8之supplier
supplier也是是用来创建对象的,但是不同于传统的创建对象语法:new,看下面代码:public class TestSupplier { private int age; (www.0831jl ...
- 全球首个开放应用模型 OAM 开源
业界要闻 全球首个开放应用模型 OAM 开源 2019 年 10 月 17 日,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应 ...
- php上传(一)
php上传基础知识总结 1.文件上传 1>文件上传的原理:将客户端上的文件通过浏览器上传到服务器上, 在将服务器上的文件移动到指定目录. 2>客户端的配置 表单页面,浏览框 method= ...
- PHP headers_sent() 函数
定义和用法 headers_sent() 函数检查 HTTP 报头是否发送/已发送到何处. 如果报头已发送,该函数返回 TRUE,否则返回 FALSE. 语法 headers_sent(file,li ...
- flutter 插件
flutter_spinkit loading动画