<!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-------弹簧特效的更多相关文章

  1. css3动画特效：上下晃动的div

    css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...

  2. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  3. CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  4. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  5. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  6. 9款赏心悦目的HTML5/CSS3应用特效

    经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...

  7. CSS3悬停特效合集Hover.css

    CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

  9. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  10. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. 小米OJ 12. 找出可能的合的组合

    利用dfs解决,从给出的数组左边或右边开始遍历,对每一个数字进行判断,有三种情况: 1. 加上当前数字的值,遍历下一个数字 2. 加上当前数字的值,继续遍历该数字 3. 不加上当前的数字的值,遍历下一 ...

  2. mysql8.0忘记密码如何操作？

    很不幸,刚安装了MYSQL8,由于密码验证方式的不同,自己折腾了一小会,不小心退出来了,进不去了.从网上面查了一下资料,好多都不是特别好使,最后摸索出来可以进行如下操作: 1. 在配置文件中设置将密码 ...

  3. Vim、Linux、Shell、Idea、Git命令总结

    目录 Vim 剪切 复制 shell idea centos Vim /名字 搜索关键词 :u 撤销上一次操作 v 进入可视模式(选中模式) 剪切 回到顶部 命令模式下的剪切 dd,删除一整行==剪切 ...

  4. java连接oracle数据库jdbc

    driver = oracle.jdbc.driver.OracleDriver url = jdbc:oracle:thin:@localhost:1521:orcl

  5. 【Java】判断字符串是否含字母

    用正则表达式,示例代码如下: String str = "123abc"; Pattern.compile("(?i)[a-z]]").matcher(str) ...

  6. 浅入深出Vue：自动化路由

    在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...

  7. 定时器任务django-crontab的使用【静态化高频率页面，增加用户体验】【系统的定时器，独立于项目执行】【刘新宇】

    页面静态化 思考: 网页的首页访问频繁,而且查询数据量大,其中还有大量的循环处理. 问题: 用户访问首页会耗费服务器大量的资源,并且响应数据的效率会大大降低. 解决: 页面静态化 1. 页面静态化介绍 ...

  8. .netcore持续集成测试篇之Xunit数据驱动测试一

    系列目录 Nunit里提供了丰富的数据测试功能,虽然Xunit里提供的比较少,但是也能满足很多场景下使用了,如果数据场景非常复杂,Nunit和Xunit都是无法胜任的,有不少测试者选择自己编写一个数据 ...

  9. [原创实践]IBM thinkpad T61制作和使用recovery光盘进行出厂系统恢复

    制作系统恢复盘 之前制作了系统恢复光盘,包含Product recovery 光盘1和光盘2,rescure and recovery光盘. 联想笔记本XP系统有一个硬盘分区是用来做恢复的,双击硬盘即 ...

  10. RE最全面的正则表达式----字符验证

    二.校验字符的表达式汉字:^[一-彪]{0,}$英文和数字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$长度为3-20的所有字符:^.{3,20}$由26个英文字母组成的字 ...