1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3弹簧特效</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0
  10.         }
  11.         html,body{
  12.             width: 100%;
  13.             height: 100%;
  14.             display: flex;
  15.         }
  16.         body{
  17.             perspective: 800px;
  18.         }
  19.  
  20.         .wrap{
  21.             width: 400px;
  22.             height: 400px;
  23.             margin: auto;
  24.             transform: rotateX(60deg);
  25.             position: relative;
  26.             transform-style: preserve-3d;
  27.         }
  28.         .wrap div{
  29.             position: absolute;
  30.             border: 15px solid #ccd7d9;
  31.             border-color: #ccd7d9 #d2dbde #d7e0e2 #d2dbde;
  32.             border-radius: 50%;
  33.             box-shadow: 0 1px 0 #fff, 0 10px 0 #abbdc1 inset, 0 10px 0 #abbdc1;
  34.             transform: translateZ(-50px);
  35.         }
  36.         .wrap div:nth-child(1){
  37.             left: calc( 400px/2 - 340px/2 - 15px );
  38.             top: calc( 400px/2 - 340px/2  - 15px );
  39.             width: 340px;
  40.             height: 340px;
  41.  
  42.             animation: play1 2s 2400ms ease-in-out infinite alternate;
  43.         }
  44.         .wrap div:nth-child(2){
  45.             left: calc( 400px/2 - 280px/2 - 15px );
  46.             top: calc( 400px/2 - 280px/2  - 15px );
  47.             width: 280px;
  48.             height: 280px;
  49.             animation: play1 2s 2000ms ease-in-out infinite alternate;
  50.         }
  51.         .wrap div:nth-child(3){
  52.             left: calc( 400px/2 - 220px/2 - 15px );
  53.             top: calc( 400px/2 - 220px/2  - 15px );
  54.             width: 220px;
  55.             height: 220px;
  56.             animation: play1 2s 1600ms ease-in-out infinite alternate;
  57.         }
  58.         .wrap div:nth-child(4){
  59.             left: calc( 400px/2 - 160px/2 - 15px );
  60.             top: calc( 400px/2 - 160px/2  - 15px );
  61.             width: 160px;
  62.             height: 160px;
  63.             animation: play1 2s 1200ms ease-in-out infinite alternate;
  64.         }
  65.         .wrap div:nth-child(5){
  66.             left: calc( 400px/2 - 100px/2 - 15px );
  67.             top: calc( 400px/2 - 100px/2  - 15px );
  68.             width: 100px;
  69.             height: 100px;
  70.             animation: play1 2s 800ms ease-in-out infinite alternate;
  71.         }
  72.         .wrap div:nth-child(6){
  73.             left: calc( 400px/2 - 40px/2 - 15px );
  74.             top: calc( 400px/2 - 40px/2  - 15px );
  75.             width: 40px;
  76.             height: 40px;
  77.             animation: play1 2s 400ms ease-in-out infinite alternate;
  78.         }
  79.         @keyframes play1 {
  80.             from{
  81.                 transform: translateZ(-50px);
  82.             }
  83.             to{
  84.                 transform: translateZ(100px);
  85.             }
  86.         }
  87.     </style>
  88. </head>
  89. <body>
  90.     <div class="wrap">
  91.         <div></div>
  92.         <div></div>
  93.         <div></div>
  94.         <div></div>
  95.         <div></div>
  96.         <div></div>
  97.     </div>
  98. </body>
  99. </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. C＃中面向对象编程中的函数式编程详解

    介绍 使用函数式编程来丰富面向对象编程的想法是陈旧的.将函数编程功能添加到面向对象的语言中会带来面向对象编程设计的好处. 一些旧的和不太老的语言,具有函数式编程和面向对象的编程: 例如,Smallta ...

  2. windows和linux下如何对拍

    对拍是各种计算机考试检查时必备工具,实际上十分强大,只要你的暴力没有写错就没有问题. 对拍的意思:(怎么有点语文课的意思雾) 对:看见'对'就可以知道有两个. 拍:就是把两个程序结果拍在一起,对照(有 ...

  3. JasperReport报表

    最近在做报表工作,公司要求使用正版免费的报表软件,想想还是用JasperReport. JasperReport是一个纯Java写的开源免费报表工具库,在java开源免费报表中,排在前列. 可是开源免 ...

  4. z-index不起作用

    摘录自 https://blog.csdn.net/apple_01150525/article/details/76546367 z-index无效的情况,一共有三种:1.父标签 position属 ...

  5. springMVC保存数据到mysql数据库中文乱码问题解决方法

    1.web.xml中添加过滤器 <filter> <filter-name>CharacterEncodingFilter</filter-name> <fi ...

  6. 利用git 找到应该对问题代码负责的人--代码定责

    场景 有时候突然发现 某部分代码存在明显的问题,代码作者的态度需要调整. 或者发现某些代码存在特意留下的bug或漏洞,代码作者需要出来担责. 这时候我们就需要找出来 需要为有问题代码承担责任的同事,或 ...

  7. python输出九九乘法表

    1.脚本如下 (1)倒三角格式的,注意行前的空格 for i in range(1,10):     for j in range(i,10):          print("%d*%d= ...

  8. threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸

    这个小案例是当初我在学习的时候,小的一个小案例,代码还需要进一步优化:还请谅解~~:主要用到了threeJS创建mesh,创建平面,设置mesh的平移,旋转.缩放.自传.透明度.拉伸等这些小功能: 采 ...

  9. 【MySQL】导出长数字到 Excel 避免转为科学计数法方法

    MySQL 导出比较长的数字到 Excel 时,最后几位会变成 0,解决方法如下: 如果只需要导出展示.打印:可使用 CONCAT("\t",str) 如果需要后续处理,引用,最好 ...

  10. vue动态表单

    项目需求,需要根据后台接口返回数据,动态添加表单内容 说明:此组件基于Ant Design of Vue 目前支持六种表单控件:文本输入框(TextInput).文本域输入框(TextArea).下拉 ...