使用纯CSS制作展开合并立方体特效
显示效果
源码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css动画练习</title>
</head>
<style>
body {
background: #999;
margin: 0 auto;
font-size: 100px;
height: 100%;
}
div {
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
}
div.a {
background: red;
transition: width 2s, height 2s, transform 2s;
}
div.b {
background: yellow;
transition: width 2s, height 2s, transform 2s;
}
div.c {
background: blue;
transition: width 2s, height 2s, transform 2s;
}
div.d {
background: pink;
transition: width 2s, height 2s, transform 2s;
}
div.e {
background: white;
transition: width 2s, height 2s, transform 2s;
}
div.f {
background: purple;
transition: width 2s, height 2s, transform 2s;
}
body:hover div.a {
width: 200px;
height: 200px;
transform: rotatex(260deg) rotate(90deg) translate(1100px, 0);
}
body:hover div.b {
width: 200px;
height: 200px;
transform: rotatex(-180deg) rotate(90deg) translate(300px, 0);
}
body:hover div.c {
width: 200px;
height: 200px;
transform: rotatey(-80deg) rotate(-90deg) translate(300px, -600px);
}
body:hover div.d {
width: 200px;
height: 200px;
transform: rotatey(80deg) rotate(90deg) translate(-300px, -600px);
}
body:hover div.e {
width: 200px;
height: 200px;
transform: rotatex(80deg) rotate(90deg) translate(-2300px, 0);
}
body:hover div.f {
width: 200px;
height: 200px;
transform: rotatex(360deg) rotate(90deg) translate(-300px, 0);
}
</style>
<body >
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</body>使用纯CSS制作展开合并立方体特效的更多相关文章
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
随机推荐
- C++ Primer 笔记——控制内存分配
1.当我们使用一条new表达式时,实际执行了三步操作. new表达式调用一个名为operator new ( 或者operator new[] ) 的标准库函数.该函数分配一块足够大的,原始的,未命名 ...
- python requests的content和text方法的区别
requests对象的get和post方法都会返回一个Response对象,这个对象里面存的是服务器返回的所有信息,包括响应头,响应状态码等.其中返回的网页部分会存在.content和.text两个对 ...
- spring boot引入json，jsonobject，需要指定jdk15
spring boot引入json,需要指定jdk15 <dependency> <groupId>net.sf.json-lib</groupId> <ar ...
- SQL Server索引的执行计划
如何知道索引有问题,最直接的方法就是查看执行计划.通过执行计划,可以回答表上的索引是否被使用的问题. (1)包含索引:避免书签查找 常见的索引方面的性能问题就是书签查找,书签查找分为RID查找和键值查 ...
- logstash配置白名单决定去哪个index
input { kafka { bootstrap_servers => "127.0.0.1:9092" client_id => "log" a ...
- Windows10右键添加“在此处打开命令窗口”
cmdHere.reg: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\OpenCmdHere] @= ...
- SVN不要显示问号
让SVN不要显示未进行版本控制的文件(夹)图标的问号: 1.选择TortoiseSVN→SettIngs 2.Overlays→取消勾选Unversioned,点击“应用”,然后重启电脑即可
- Caused by: java.net.ConnectException: Connection refused/Caused by: java.lang.RuntimeException: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
1.使用sqoop技术将mysql的数据导入到Hive出现的错误如下所示: 第一次使用命令如下所示: [hadoop@slaver1 sqoop--cdh5.3.6]$ bin/sqoop impor ...
- Http系列笔记
万能的HttpClient (Framework与NetCore 都支持) string url = "http://localhost:5000/api/values"; //p ...
- python之squid实现免费 IP代理 (windows win7 单机 本机 本地 正向代理 区分 HTTPS)
0.目录 1.思路2.windows安装3.相关命令行4.简单配置和初步使用5.问题:squid是否支持HTTPS6.问题:配置多个代理条目,相同ip不同port报错7.问题:根据代理请求区分HTTP ...