• 禽语林
    了解作者
  • HTML
    开发工具
  • 4KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 1
    下载次数
  • 2018-08-13 15:58
    上传日期
一款基于CSS3实现的个性动画弹簧跳动动画特效,3D弹簧动画代码,实用性不强,拿来研究可以。
2.zip
  • js
  • prefixfree.min.js
    5.9KB
  • index.html
    4.5KB
内容介绍
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>CSS3 3D弹簧跳动动画特效</title> <style> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body { background-color: #ecf0f1; perspective: 4000; perspective-origin: 50% 0%; } .view { width: 400px; height: 400px; margin:0 auto; } .circles { height: 100%; margin: 0; padding: 0; transform-style: preserve-3d; } .item { position: absolute; top: 0; left: 0; list-style: none; padding: 0; border: 15px solid #cfd9db; border-radius: 50%; width: 400px; height: 200px; position: absolute; top: 0; left: 0; box-sizing: border-box; } .h1 { border: 15px solid #ccd7d9; border-color: #ccd7d9 #d2dbde #d7e0e2 #d2dbde; box-shadow: 0 1px 0 white, inset 0 5px 0px #aebfc4, inset 0 10px 0px #aebfc4, 0 5px 0 #bdcbce, 0 10px 0 #bdcbce; width: 400px; height: 400px; transform: rotateX(70deg) translate3d(0px, 0px, -30px); animation: wave1 2s ease-in-out -0ms infinite alternate; } @keyframes wave1 { 100% { transform: rotateX(70deg) translate3d(0px, 0px, 100px); } } .h2 { border: 15px solid #c9d4d7; border-color: #c9d4d7 #cfd9db #d5dde0 #cfd9db; box-shadow: 0 1px 0 white, inset 0 5px 0px #abbdc1, inset 0 10px 0px #abbdc1, 0 5px 0 #bac9cc, 0 10px 0 #bac9cc; width: 340px; height: 340px; transform: rotateX(70deg) translate3d(30px, 0px, -60px); animation: wave2 2s ease-in-out -400ms infinite alternate; } @keyframes wave2 { 100% { transform: rotateX(70deg) translate3d(30px, 0px, 70px); } } .h3 { border: 15px solid #c6d2d5; border-color: #c6d2d5 #ccd7d9 #d2dbde #ccd7d9; box-shadow: 0 1px 0 white, inset 0 5px 0px #a8bbbf, inset 0 10px 0px #a8bbbf, 0 5px 0 #b7c6ca, 0 10px 0 #b7c6ca; width: 280px; height: 280px; transform: rotateX(70deg) translate3d(60px, 0px, -90px); animation: wave3 2s ease-in-out -800ms infinite alternate; } @keyframes wave3 { 100% { transform: rotateX(70deg) translate3d(60px, 0px, 40px); } } .h4 { border: 15px solid #c3d0d3; border-color: #c3d0d3 #c9d4d7 #cfd9db #c9d4d7; box-shadow: 0 1px 0 white, inset 0 5px 0px #a6b8bd, inset 0 10px 0px #a6b8bd, 0 5px 0 #b4c4c8, 0 10px 0 #b4c4c8; width: 220px; height: 220px; transform: rotateX(70deg) translate3d(90px, 0px, -120px); animation: wave4 2s ease-in-out -1200ms infinite alternate; } @keyframes wave4 { 100% { transform: rotateX(70deg) translate3d(90px, 0px, 10px); } } .h5 { border: 15px solid #c0cdd1; border-color: #c0cdd1 #c6d2d5 #ccd7d9 #c6d2d5; box-shadow: 0 1px 0 white, inset 0 5px 0px #a3b6bb, inset 0 10px 0px #a3b6bb, 0 5px 0 #b1c2c6, 0 10px 0 #b1c2c6; width: 160px; height: 160px; transform: rotateX(70deg) translate3d(120px, 0px, -150px); animation: wave5 2s ease-in-out -1600ms infinite alternate; } @keyframes wave5 { 100% { transform: rotateX(70deg) translate3d(120px, 0px, -20px); } } .h6 { border: 15px solid #bdcbce; border-color: #bdcbce #c3d0d3 #c9d4d7 #c3d0d3; box-shadow: 0 1px 0 white, inset 0 5px 0px #a0b4b9, inset 0 10px 0px #a0b4b9, 0 5px 0 #aebfc4, 0 10px 0 #aebfc4; width: 100px; height: 100px; transform: rotateX(70deg) translate3d(150px, 0px, -180px); animation: wave6 2s ease-in-out -2000ms infinite alternate; } @keyframes wave6 { 100% { transform: rotateX(70deg) translate3d(150px, 0px, -50px); } } .h7 { border: 15px solid #bac9cc; border-color: #bac9cc #c0cdd1 #c6d2d5 #c0cdd1; box-shadow: 0 1px 0 white, inset 0 5px 0px #9db1b7, inset 0 10px 0px #9db1b7, 0 5px 0 #abbdc1, 0 10px 0 #abbdc1; width: 40px; height: 40px; transform: rotateX(70deg) translate3d(180px, 0px, -210px); animation: wave7 2s ease-in-out -2400ms infinite alternate; } @keyframes wave7 { 100% { transform: rotateX(70deg) translate3d(180px, 0px, -80px); } } </style> <script src="js/prefixfree.min.js"></script> </head> <body><script src="/demos/googlegg.js"></script> <div class='view'> <ul class='circles'> <li class='h1 item'></li> <li class='h2 item'></li> <li class='h3 item'></li> <li class='h4 item'></li> <li class='h5 item'></li> <li class='h6 item'></li> <li class='h7 item'></li> </ul> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank" rel='nofollow' onclick='return false;'>懒人素材</a></p> </div> </body> </html>
评论
    相关推荐
    • CSS3实现3D弹簧跳动动画特效特效代码
      CSS3实现3D弹簧跳到动画特效是一款基于CSS3实现的个性动画弹簧跳动动画特效下载。
    • android从bootloader到launcher启动流程整理
      讲述android 开机流程 从boot rom---bootloader---init--zygote---systemserver---ams 并附上自己整理的每个流程的流程图 ,清晰熟悉android 启动流程
    • 基于python开发的全国新工商采集工具 v1.2版本
      这个软件是通过scrapy爬虫框架结合代理IP池再加上request模拟请求技术以及验证码识别技术,可以做到日更新采集全国新工商信息。采集的数据自动存储在mysql数据库表里,可下载全量1.8亿多企业工商基本信息和36维度的详细信息.支持sql和excel导出数据包格式。
    • 卷积神经网络
      这是卷积神经网络的一个实际用例,已经调试好了,能够在matlab上成功运行,适合从事卷积神经网络(CNN)研究的人员学习使用。
    • OFDM的MATLAB仿真
      1.使用Matlab实现一个OFDM系统。 OFDM系统具体参数参照LTE标准,具体为: 系统带宽:5MHz; OFDM符号长度:0.0714ms; 子载波间隔:15kHz; CP长度:OFDM符号长度的7 ; FFT点数:512; 2.选择一种降低OFDM系统峰均比的算法,在1的基础上实现,并分析其性能。
    • matlab匹配滤波代码-matlab_for_thesis:Matlab博士学位论文代码
      matlab匹配滤波代码博士论文的MATLAB代码 博士论文的MATLAB代码的一部分,“井田双色散水下声通道中的多载波通信”。 函数下的func_JingTian文件夹 FUNC_JINGTIAN包含多载波通信中一些通常需要的功能: OFDM调制/解调模块,包括几种数据辅助的信道估计方法和差分解调; 快速实现GFDM和C-FBMC调制/解调,分别包括时域和频域的迫零(ZF)和匹配滤波(MF)均衡; 为OFDM信道估计中使用的压缩感测方法计算字典的功能; 增加信道效应,施加宽带多普勒失真的功能; 通过线性调频Z变换(CZT)以任意精度对频域中的信号进行重采样; Hermite函数合成的信号之间的交叉歧义函数的计算。 演示文件夹 以下列出了四个演示 demo1:使用基本追踪(BP)算法形式的压缩感知方法对OFDM进行稀疏2-D信道估计; demo2:比较基本数据辅助OFDM信道估计算法,包括常规频域插值和基于IDFT的变换域方法; demo3:圆形滤波器组多载波(C-FBMC / OQAM)的基于DFT特征向量的原型滤波器合成; demo4:用于广义频分复用(GFDM)的辅助日期辅助无干
    • PSCAD光伏模型 1MW
      通过PSCAD搭建的PV光伏模型,含MPPT最有功率寻找算法。
    • Wind-Energy-Prediction-using-LSTM:使用LSTM进行风能预测的时间序列分析
      使用长期短期记忆(LSTM)进行风能预测 有关完整的详细信息,请阅读CSE 523项目报告.pdf。 介绍 由于风速/功率具有可再生性和环境友好性,因此在地球上受到越来越多的关注。 随着全球风电装机容量的Swift增加,风电行业正在发展为大型企业。 可靠的短期风速预测在风能转换系统中起着至关重要的作用,例如风轮机的动态控制和电力系统调度。 精确的预测需要克服由于天气条件波动而导致的可变能源生产问题。 风产生的功率高度依赖于风速。 尽管它是高度非线性的,但风速在特定时间段内遵循特定模式。 我们利用这种时间序列模式来获得有用的信息,并将其用于功率预测。 LSTM用于对数据执行不同的实验并得出结论。 结论 我们的目标是改善对使用风能发电的功率的预测,并且已经实现了将LSTM用作机器学习模型并对其进行模型优化。 我们还观察到,如果风速小于4 m / s,则系统生成的功率为零。 LSTM无法学习这
    • Aerosim Blockset
      The AeroSim aeronautical simulation blockset provides a complete set of tools for the rapid development of nonlinear 6-degree of freedom aircraft dynamic models. In addition to the basic aircraft dynamics blocks, the library also includes complete aircraft models which can be customized through parameter files.
    • 三相维也纳整流器:三相维也纳整流器磁滞控制的Simulink仿真模型-matlab开发
      这是三相三电平维也纳整流器的仿真模型。 控制算法采用电压和电流双闭环控制。 外部电压环路为PI控制器,内部电流环路为bang bang滞后控制器。