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 ...
随机推荐
- 拟合多项式演示overfitting
# 预先导入库 from sklearn.linear_model import LinearRegression from sklearn.preprocessing import Polynomi ...
- Mybatis generator生成工具简单介绍
Mybatis generator 其主要的功能就是方便,快捷的创建好Dao,entry,xml 加快了开发速度,使用方面根据其提供的规则配置好就OK 这里还有一个重要的开发场景,开发过程中,对数据 ...
- 如何优雅关闭 Spring Boot 应用
## 前言 随着线上应用逐步采用 SpringBoot 构建,SpringBoot应用实例越来多,当线上某个应用需要升级部署时,常常简单粗暴地使用 kill 命令,这种停止应用的方式会让应用将所有处理 ...
- JAVA面试题 String s = new String("xyz");产生了几个对象？
面试官Q1:请问String s = new String("xyz");产生了几个对象? 对于这个Java面试题,老套路先上代码: public class StringTest ...
- 上车时机已到--.NETCore是适应时代发展的雄鹰利剑
上车时机已到--.NETCore是适应时代发展的雄鹰利剑 要起飞了 .NET Core 3.0-prevew7:https://dotnet.microsoft.com/download/dotnet ...
- python的发展史
python的发展史 1989年,被称为龟叔的Guido在为ABC语言写插件时,产生了写一个简洁又实用的编程语言的想法,并开始着手编写.因为其喜欢Monty Python喜剧团,所以将其命名为pyth ...
- 02、HTML 基础
1.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <!DOCTYPE html> <html> < ...
- 跟着阿里p7一起学java高并发 - 第18天：玩转java线程池，这一篇就够了
java中的线程池,这一篇就够了 java高并发系列第18篇文章. 本文主要内容 什么是线程池 线程池实现原理 线程池中常见的各种队列 自定义线程创建的工厂 常见的饱和策略 自定义饱和策略 线程池中两 ...
- mysql整数类型int后面的长度有什么意义
int 的 SQL-92 同义字为 integer.SQL-92 是数据库的一个标准. int类型的存储大小为4个字节 unsigned(无符号) int 存储范围是 2^4*8 int(M) 中的M ...
- Hadoop自学系列集(二) ---- CentOS下安装JDK
上篇我们讲述了如何使用VMware安装CentOS系统,接下来就看如何安装我们最为熟悉的jdk吧!安装前先看看系统上有没有安装过jdk,输入java -version,如果查询出了其他版本的jdk版本 ...