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 ...
随机推荐
- 集群之间配置 SSH无密码登录
集群之间配置 SSH无密码登录 配置 ssh (1)基本语法 ssh 另一台电脑的 ip 地址 (2)ssh 连接时出现 Host key verification failed 的解决方法 # ss ...
- RecyclerView下拉加载集合越界问题
问题描述 在做毕业设计app中遇到这样一个问题,使用RecyclerView进行下拉加载数据的时候,比如我每次让它加载5条数据,当服务器端数据总数刚好是5的倍数的时候,不会出现下拉加载数据集合越界的问 ...
- C#2.0新增功能01 分布类与分部方法
连载目录 [已更新最新开发文章,点击查看详细] 分部类型 拆分一个类.一个结构.一个接口或一个方法的定义到两个或更多的文件中, 每个源文件包含类型或方法定义的一部分,编译应用程序时将把所有部分组 ...
- 2019牛客多校第二场D-Kth Minimum Clique
Kth Minimum Clique 题目传送门 解题思路 我们可以从没有点开始,把点一个一个放进去,先把放入一个点的情况都存进按照权值排序的优先队列,每次在新出队的集合里增加一个新的点,为了避免重复 ...
- Git学习笔记 (二)
Git学习笔记(二) 突然发现,学习新知识新技能,都得经常温故使用,这样才能日益精进.最近学习的Git是因为加入了课题组,在学习做一些后台,由于后台开发会牵扯到多人开发,所以学会Git这一代码管理工具 ...
- Java集合 HashSet的原理及常用方法
目录 一. HashSet概述 二. HashSet构造 三. add方法 四. remove方法 五. 遍历 六. 合计合计 先看一下LinkedHashSet 在看一下TreeSet 七. 总结 ...
- codeforces 371A K-Periodic Array
很简单,就是找第i位.i+k位.i+2*k位...........i+m*k位有多少个数字,计算出每个数出现的次数,找到出现最多的数,那么K-Periodic的第K位数肯定是这个了.这样的话需要替换的 ...
- RGB颜色 三者都是0为黑色而255是白色 解释
问题: RGB颜色 都是0为黑色而255是白色 与日常生活的黑色白色差距怎么那么大,(与物理学中的黑色吸收光是否相悖)而且为什么要这样定义呢? 链接:https://www.zhihu.com/que ...
- mysql主从配置详解(图文)
最近工作不是很忙,把以前整理的mysql数据库的主从配置过程记录一下,有不足之处,请各位多多纠正指教 #环境配置#master IP:192.168.46.137 slave IP:192.168.4 ...
- JS 中构造函数和普通函数的区别
原来只是随意的了解了下 , 但是最近有点忘了 于是详细了解下 加深下印象. 1.构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写 2.构造函数和普通函数的区别在于:调用方式 ...