应用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. Git上传文件容量大小限制

    使用Git LFS突破git的100M容量限制. 1.安装Git LFS https://git-lfs.github.com./ 2.安装后把里面的git-lfs.exe放到你要上传的项目文件夹 3 ...

  2. aiohttp使用队列

    获取百度的搜索结果,然后把百度的长链接,获取到真实的url import time import aiofiles import aiohttp import asyncio from lxml im ...

  3. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  4. .Net Core---- 通过EPPlus批量导出

    前台代码: 前台代码是在.net core bootstrap集成框架上的(这是效果浏览地址:http://core.jucheap.com[效果地址来自:http://blog.csdn.net/a ...

  5. 【原创】Linux基础之sudo

    sudo允许用户以其他用户的身份(比如root)执行命令,比如切换用户.执行命令.读写文件等: 配置 sudo配置在:/etc/sudoers ## Sudoers allows particular ...

  6. 【原创】大叔经验分享（23）spark sql插入表时的文件个数研究

    spark sql执行insert overwrite table时,写到新表或者新分区的文件个数,有可能是200个,也有可能是任意个,为什么会有这种差别? 首先看一下spark sql执行inser ...

  7. H2 Database Engine

    http://www.h2database.com/html/main.html H2 Database Engine Welcome to H2, the Java SQL database. Th ...

  8. c4b和c4f的区别

    1. cc.c4b的参数直接填rgba的值. 2 .cc.c4f(r,g,b,透明度),把rgb值填进去,会发现颜色不对,需要把rgb值除以255,所以最终转换公式是: cc.c3b(r,g,b) = ...

  9. Vuforia的图像识别之后的服务器下载与ARKit的兼容性解决

    2017.12.12 遇到的问题: Could not produce class with ID 75 直接关闭unity里面的Strip engine code,解决下载ab时的崩溃问题 *Str ...

  10. .NET Core 添加Java 服务引用(WebService) 曲折历程(一)

    背景: 需要在HangFire定时任务中加入请求Java开发的WebService接口.定时获取数据同步数据.现有的代码是在VS2017 ,.Net Core 下创建的,添加WS发现系统不支持. 在C ...