使用纯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++11新特性--decltype （转）
返回值 decltype(表达式) [返回值的类型是表达式参数的类型] 这个可也用来决定表达式的类型,就像Bjarne暗示的一样,如果我们需要去初始化某种类型的变量,auto是最简单的选择,但是如果我 ...
- python 内置数据类型之数字
目录: 1.2. 数字 1.2.1. 数字类型 1.2.2. 浮点数 1.2.3. 进制记数 1.2.4. 设置小数精度 1.2.5. 分数 1.2.6. 除法 1.2 数字 1.2.1 数字类型 ...
- MongoDB C#驱动给内嵌list添加数据
Fc fc = new Fc() {}; var temp = Builders<MModel>.Filter.Where(m=>m.id== "882d4d22-ff70 ...
- Django系列（一）
项目引入静态文件 更改settings.py,为项目下面的每个APP应用,建立静态文件,这里如blog,首先在blog下面建立一个静态文件夹名为statics,注意这里为别名 STATICFILES_ ...
- 使用Bazel构建C/C++项目
目录 前提 基本概念 速查链接汇总 stage1: 一个package, 一个target stage2: 一个package,多个target stage3: 多package,多target st ...
- Hive启动失败
启动hive报如下错误 [root@node01 conf]# hive19/03/31 09:57:31 WARN conf.HiveConf: HiveConf of name hive.meta ...
- 经典的XSS案例
在做安全审计的时候,通过常用的<script>alert(1)</script>无法发现该XSS
- HTTP.sys远程执行代码漏洞
远程执行代码漏洞存在于 HTTP 协议堆栈 (HTTP.sys) 中,当 HTTP.sys 未正确分析经特殊设计的 HTTP 请求时会导致此漏洞. http://bbs.safedog.cn/thre ...
- Codeforces 342D Xenia and Dominoes 状压dp
码就完事了. #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define ...
- Docker 启动tomcat
docker run -d --name jinrong_beijingbank -p 8081:8081 -v /application/docker_hub/java/pypaltform2018 ...