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 ...
随机推荐
- mysql 原理 ~ 并行复制
一 概念1 MTS(Prepared transactions slave parallel applier) 主库在同一时间进入prepare状态的事务可以被从库并行回放2 传统与改进 ma ...
- 一文掌握 Linux 性能分析之内存篇
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面我们已经学 ...
- torch.utils.data.DataLoader对象中的迭代操作
关于迭代器等概念参考:https://www.cnblogs.com/zf-blog/p/10613533.html 关于pytorch中的DataLoader类参考:https://blog.csd ...
- 在Linux中调试段错误(core dumped)
在Linux中调试段错误(core dumped) 在作比赛的时候经常遇到段错误, 但是一般都采用的是printf打印信息这种笨方法,而且定位bug比较慢,今天尝试利用gdb工具调试段错误. 段错误( ...
- keepalive半同步双主一从
ip地址如下: 192.168.20.201 redis01 主 192.168.20.202 redis02 主 192.168.20.203 redis03 从 192.168.20.205 vi ...
- Mac ---- markdown 转 html\word\pdf
在Mac上,有一个软件,叫iA writer,是一个文字编辑器,可以进行md到word的转换,但它是收费的,RMB68元. 如果只是临时用一下,不想购买,你可以使用pandoc. 在mac下,使用方法 ...
- 【原创】大叔案例分享（3）用户行为分析--见证scala的强大
一 场景分析 用户行为分析应用的场景很多,像线上网站访问统计,线下客流分析(比如图像人脸识别.wifi探针等),比较核心的指标有几个: PV | UV | SD | SC 指标说明: PV(Page ...
- 第十一篇：Mysql系列
Python开发基础之路 第十一篇:Mysql系列 Python-数据库 基本SQL语句 Python-数据类型 主键auto_increment Python-多表关联 外键 级联 Python-s ...
- yum install 报错[Errno 14] curl#37 - Couldn't open file /mnt/repodata/repomd.xml
最近在玩centos7,之前装系统没太注意yum这个东东,今天用别人装好的系统想用yum install 一个东西,结果报各种错,所以就是: 1.然后按照网上的一些修改,先是执行: yum cleam ...
- vue 父子之间通信及非父子之间通信
直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...