<!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. Keil debug command SAVE 命令保存文件的解析

    简介 使用 Keil debug 很方便,把内存中的一段区域 dump 出来也很方便,例如使用命令 SAVE filepath startAddr, endAddr, typeCode .但是要查看 ...

  2. 基于Bitnami gitlab OVA包的gitlab 环境搭建

    前言 最近在折腾gitlab,本篇记录搭建的过程方便以后查找 环境 Windows server + VMware 安装 为方便本次我们直接采用Bitnami的VOA安装包(VOA格式可同时兼容Vir ...

  3. 【Java中级】（一）面向对象的特性与八种基本类型

    1.1.Java 基本数据类型: Java提供了8种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. byte.short.int.long.float.double. ...

  4. 【ironic】ironic介绍与原理

    [ironic]ironic介绍与原理 零,配置文件 0.1 配置驱动 文件ironic.conf, ipmi硬件类型,默认值也是ipmi, pxe_ipmitool驱动也是默认值,配置驱动 [DEF ...

  5. visionpro和halcon这两款机器视觉软件区别

    很多朋友会问到visionpro和halcon这两款机器视觉软件,到底学哪个好呢,今天重码网就给大家讲一讲: 首先比较下两者的优缺点: halcon: 提供的图像算法要比Visionpro多,也就是说 ...

  6. 温故而知新，重温 Java 7 的那些“新”特性

    2009 年 4 月 20 日,Java 的亲生父亲 Sun 被养父 Oracle 以 74 亿美元收购,这在当时可是一件天大的事.有不少同学都担心 Java 的前途,我当时傻不啦叽地也很担心:自己刚 ...

  7. Java编程思想之十七 容器深入研究

    17.1 完整的容器分类方法 17.2 填充容器 import java.util.*; class StringAddress { private String s; public StringAd ...

  8. 浅谈设计模式及python实现

    设计模式及Python实现   设计模式是什么? Christopher Alexander:“每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心.这样你就能一次又一次地使用 ...

  9. C#使用代理IP发送请求

    https://www.cnblogs.com/benbenfishfish/p/5830149.html   获取可代理的IP https://www.cnblogs.com/ShalenChe/p ...

  10. 2019牛客多校训练第三场H.Magic Line（思维）

    题目传送门 大致题意: 输入测试用例个数T,输入点的个数n(n为偶数),再分别输入n个不同的点的坐标,要求输出四个整数x1,y1,x2,y2,表示有一条经过点(x1,y1),(x2,y2)的直线将该二 ...