应用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的应用，产生动画效果。的更多相关文章

  1. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  2. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  3. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  4. 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...

  5. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  6. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  7. 前端每日实战：140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

  8. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. 用纯CSS实现加载中动画效果

    HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...

  10. HTML+CSS实现鼠标点上去动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. AWT 新建窗口

    新建一个窗口 包 import java.awt.*; 定义 Frame frm_Draw = new Frame("Text"); 初始化代码 public void Frame ...

  2. Android app中的so库和CPU架构

    一.android目前有几种cpu架构? 早期的Android系统几乎只支持ARMv5的CPU架构,目前支持七种CPU架构:ARMv5,ARMv7 (从2010年起),x86 (从2011年起),MI ...

  3. 第六章 接口,lamda表达式与内部类

    接口 接口可以包含常量, 且不需要publish static final修饰, 接口的域会自动添加该修饰符. Java建议不要写多余的代码,因此省略修饰符更简洁. 全部都是常量的接口背离了接口的初衷 ...

  4. pom文件报错org.apache.maven.archiver.mavenarchiver.getmanifest

    eclipse导入新的maven项目时,pom.xml第一行报错: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.mav ...

  5. 在Linux中调试段错误(core dumped)

    在Linux中调试段错误(core dumped) 在作比赛的时候经常遇到段错误, 但是一般都采用的是printf打印信息这种笨方法,而且定位bug比较慢,今天尝试利用gdb工具调试段错误. 段错误( ...

  6. C++设计模式——迭代器模式

    前言 最近非常感伤,总是怀念大学的日子,做梦的时候也常常梦到.梦到大学在电脑前傻傻的敲着键盘,写着代码,对付着数据结构与算法的作业:建立一个链表,遍历链表,打印链表.现在把那个时候声明的链表的头文件拿 ...

  7. Python-Django 模型层-多表查询

    多表操作 基于对象的跨表查询(多次查询) 一对一: -正向查询按字段 -反向查询按表名小写 一对多: -正向查询按字段(正向查询一定会查出一个来) -反向查询按表名小写_set.all()(返回结果是 ...

  8. 忘记加入spring-aop-4.3.16.RELEASE.jar出错

    出错代码: java.lang.NoClassDefFoundError: org/springframework/aop/framework/AopProxyUtils at org.springf ...

  9. select2 api参数的文档

    具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数量的字符 maximumInputLe ...

  10. Redis高可用技术解决方案总结

    一.常见使用方式 Redis的几种常见使用方式包括: Redis单副本: Redis多副本(主从): Redis Sentinel(哨兵): Redis Cluster: Redis自研. 二.各种使 ...