CSS3-------弹簧特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3弹簧特效</title>
<style>
* {
margin: 0;
padding: 0
}
html,body{
width: 100%;
height: 100%;
display: flex;
}
body{
perspective: 800px;
} .wrap{
width: 400px;
height: 400px;
margin: auto;
transform: rotateX(60deg);
position: relative;
transform-style: preserve-3d;
}
.wrap div{
position: absolute;
border: 15px solid #ccd7d9;
border-color: #ccd7d9 #d2dbde #d7e0e2 #d2dbde;
border-radius: 50%;
box-shadow: 0 1px 0 #fff, 0 10px 0 #abbdc1 inset, 0 10px 0 #abbdc1;
transform: translateZ(-50px);
}
.wrap div:nth-child(1){
left: calc( 400px/2 - 340px/2 - 15px );
top: calc( 400px/2 - 340px/2 - 15px );
width: 340px;
height: 340px; animation: play1 2s 2400ms ease-in-out infinite alternate;
}
.wrap div:nth-child(2){
left: calc( 400px/2 - 280px/2 - 15px );
top: calc( 400px/2 - 280px/2 - 15px );
width: 280px;
height: 280px;
animation: play1 2s 2000ms ease-in-out infinite alternate;
}
.wrap div:nth-child(3){
left: calc( 400px/2 - 220px/2 - 15px );
top: calc( 400px/2 - 220px/2 - 15px );
width: 220px;
height: 220px;
animation: play1 2s 1600ms ease-in-out infinite alternate;
}
.wrap div:nth-child(4){
left: calc( 400px/2 - 160px/2 - 15px );
top: calc( 400px/2 - 160px/2 - 15px );
width: 160px;
height: 160px;
animation: play1 2s 1200ms ease-in-out infinite alternate;
}
.wrap div:nth-child(5){
left: calc( 400px/2 - 100px/2 - 15px );
top: calc( 400px/2 - 100px/2 - 15px );
width: 100px;
height: 100px;
animation: play1 2s 800ms ease-in-out infinite alternate;
}
.wrap div:nth-child(6){
left: calc( 400px/2 - 40px/2 - 15px );
top: calc( 400px/2 - 40px/2 - 15px );
width: 40px;
height: 40px;
animation: play1 2s 400ms ease-in-out infinite alternate;
}
@keyframes play1 {
from{
transform: translateZ(-50px);
}
to{
transform: translateZ(100px);
}
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
CSS3-------弹簧特效的更多相关文章
- css3动画特效：上下晃动的div
css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...
- ShineTime - 带有 CSS3 闪亮特效的缩略图相册
ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...
- CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
- 9款赏心悦目的HTML5/CSS3应用特效
经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...
- CSS3悬停特效合集Hover.css
CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- Hive的架构原理&Hive的安装步骤
Hive架构图 元数据默认数据库是:Derby.开发使用MySQL Hive如何将SQL语句翻译成MapReduce的? 1.使用SQL解析器解析SQL语句 2.使用编译器进行编译逻辑 3.使用优化器 ...
- easypermissions的基本使用
转载请注明出处 http://blog.csdn.net/pyfysf/article/details/78204395 Android 6.0(API 级别 23)开始,在应用运行时向其授予权限,而 ...
- python课堂整理19----迭代器和生成器
一.概念 • 迭代器协议: 对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么引起一个stopIteration异常,以终止迭代(只能往后走,不能往前退) • 协议是一种约定,pyt ...
- Python识别璇玑图中诗的数量
一.璇玑图简介 璇玑图的读法有很多,这里我使用七七棋盘格的读法,在璇玑图中分离出一个七七棋盘格,如下表 吏 官 同 流 污 合 玩 痞 悍 蒙 骗 造 假 蛋 鸡 宴 请 客 友 朋 远 戚 偏 正 ...
- jQuery框架操作CSS
3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦 ...
- 深入理解HashMap（jdk7）
HashMap的结构图示 jdk1.7的HashMap采用数组+单链表实现,尽管定义了hash函数来避免冲突,但因为数组长度有限,还是会出现两个不同的Key经过计算后在数组中的位置一样,1.7版本 ...
- 对于HTTP过程中POST内容加密的解决方案
0x00前言 前几天我师傅和我提及了这件事情 正常情况下 抓包过程中遇到加密情况会很迷茫 昨天把这个都弄了一下 也感谢大佬中间的指导 我一开始看到密码的类型下意识的是base64 但是去解密发现不对 ...
- export，export default，module.exports，import，require之间的区别和关联
module.exports Node 应用由模块组成,采用 CommonJS 模块规范.根据这个规范,每个文件就是一个模块,有自己的作用域.在这些文件里面定义的变量.函数.类,都是私有的,对外不可见 ...
- 【Java例题】8.2 手工编写字符串统计的可视化程序
2. 手工编写字符串统计的可视化程序. 一个Frame窗体容器,布局为null,两个TextField组件,一个Button组件. Button组件上添加ActionEvent事件监听器Actio ...
- （数据科学学习手札66）在ubuntu服务器上部署shiny
一.简介 shiny是R中专门用于开发轻量级web应用的框架,在本地写一个shiny应用并调用非常方便,但如果你希望你的shiny应用能够以远程的方式提供给更多人来使用,就需要将写好的shiny应用部 ...