css----transition的应用，产生动画效果。
应用transition属性产生动画效果
css中的transition属性设置元素的变化过程所需的时间。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.adiv{
position:absolute;
text-align:center;
top:45%;
left:45%;
}
.bdiv{
border:2px solid black;
padding:25px 20px;
width:100px;
height:30px;
background-color:#33ffff;
color:white;
cursor:pointer;<!--设置鼠标手指状-->
}
.bdiv>span{
border:2px solid #33ffff;
position:absolute;
transition:0.8s;<!--设置变化所需要的时间-->
} .bdiv>span:nth-of-type(1){
top:0px;
left:-300px;
width:140px;
opacity:0;<!--设置透明，隐藏-->
}
.bdiv:hover>span:nth-of-type(1){
top:0px;
left:0px;
width:140px;
opacity:1;<!--设置不透明，显示-->
}
.bdiv>span:nth-of-type(2){
top:80px;
left:300px;
width:140px;
opacity:0;
}
.bdiv:hover>span:nth-of-type(2){
top:80px;
left:0px;
width:140px;
opacity:1;
}
.bdiv>span:nth-of-type(3){
top:160px;
left:0px;
height:80px;
opacity:0;
}
.bdiv:hover>span:nth-of-type(3){
top:0px;
left:0px;
height:80px;
opacity:1;
}
.bdiv>span:nth-of-type(4){
top:-160px;
left:140px;
height:80px;
opacity:0;
}
.bdiv:hover>span:nth-of-type(4){
top:0px;
left:140px;
height:80px;
opacity:1;
}
</style>
</head>
<body>
<div class="adiv">
<div class="bdiv">
鼠标放在这里
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
效果图（录制工具不好用，就不录光标了）
运用得好的话，效果是挺好看的。
css----transition的应用，产生动画效果。的更多相关文章
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
- 用CSS实现加载的动画效果
用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...
- [web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
- css3 transition属性实现3d动画效果
transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...
- 前端每日实战：140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- CSS实现四种loading动画效果
四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 用纯CSS实现加载中动画效果
HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...
- HTML+CSS实现鼠标点上去动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 抓包工具tcpdump用法说明
tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包. 例如: ...
- XAMPP环境下配置Phalcon框架
目前环境:win7 xampp 从phalcon 官网下载如下包:https://phalconphp.com/en/download/windows phalcon_x86_vc11_php5.6 ...
- JAVA ArrayList实现随机生成数字，并把偶数放入一个列表中
package Code429; import java.util.ArrayList;import java.util.Random; public class CodeArrayListPrint ...
- java 类加载机制 阿里面试题
/** * 加载方法不等于执行方法,初始化变量则会赋值 * 类加载顺序应为 加载静态方法-初始化静态变量-执行静态代码块 * 实例化时 先加载非静态方法-实例化非静态变量-执行构造代码块-执行构造函数 ...
- sqlserver(查看被锁进程)
-- ###### 查看被锁进程 ###### select 标志, 进程ID=spid,线程ID=kpid,块进程ID=blocked,数据库ID=dbid, 数据库名=db_name(dbid), ...
- SQL反模式学习笔记14 关于Null值的使用
目标:辨别并使用Null值 反模式:将Null值作为普通的值,反之亦然 1.在表达式中使用Null: Null值与空字符串是不一样的,Null值参与任何的加.减.乘.除等其他运算,结果都是Null: ...
- Redis 数据结构之dict
上篇文章<Redis数据结构概述>中,了解了常用数据结构.我们知道Redis以高效的方式实现了多种数据结构,因此把Redis看做为数据结构服务器也未尝不可.研究Redis的数据结构和正确. ...
- BZOJ4259 残缺的字符串 多项式 FFT
原文链接http://www.cnblogs.com/zhouzhendong/p/8798532.html 题目传送门 - BZOJ4259 题意 给你两个串,用其中一个来匹配另一个.问从母串的那些 ...
- nodejs入门篇之linux版的nodejs简易环境安装部署
第一步:下载二进制安装包 根据linux的不同版本选择32位或64位,因为我的linux的虚拟机是64位的,所以我选择的是64位二进制安装文件(Linux Binariesx64),可以右键选择在新窗 ...
- Winfrom 动画实现
Winform 动画实现 实际上是调用的系统的 Win32 class Animation { // 从左到右打开窗口 public const Int32 AW_HOR_POSITIVE = 0x0 ...