css3旋转倾斜3d小动画
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3旋转动画</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
body{background: radial-gradient(circle at center, #34679a 0%,#214163 47%,#0d1926 100%);}
.con{width:300px;height:300px;margin:0 auto;position:relative;margin:0 auto;}
.con .box{transform-style: preserve-3d; width:200px;height:200px;border:1px solid #fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(20deg);position:absolute;left:0;top:0;}
.con .box2{-webkit-transform:rotateX(80deg) rotateY(20deg);}
.con .box3{-webkit-transform:rotateX(-70deg) rotateY(60deg);}
.con .box4{-webkit-transform:rotateX(70deg) rotateY(60deg);}
.center{-webkit-animation:centerGo 2s infinite linear;width:40px;height:40px;background:#fff;position:absolute;left:81px;top:82px;border-radius:50%;box-shadow:0 0 20px #fff;}
@-webkit-keyframes centerGo{
0%{
box-shadow:0 0 0 transparent;
}
50%{
box-shadow:0 0 20px #fff;
}
100%{
box-shadow:0 0 0 transparent;
} }
.box .point{animation:point 2s infinite linear;width:200px;height:200px;position:relative;transform-style: preserve-3d;}
.point:after{animation:pointAfter 2s infinite linear;content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;position:absolute;left:24%;top:13px;z-index:999;} .box2 .point,.box2 .point:after{-webkit-animation-delay:-.5s;}
.box3 .point,.box3 .point:after{-webkit-animation-delay:-1.5s;}
.box4 .point,.box4 .point:after{-webkit-animation-delay:-2s;}
@-webkit-keyframes point{
from{
transform:rotateZ(0deg);
}to{
transform:rotateZ(360deg);
} }
@-webkit-keyframes pointAfter{
from {
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
} to {
-webkit-transform: rotateX(90deg) rotateY(-360deg);
transform: rotateX(90deg) rotateY(-360deg);
}
} </style>
</head>
<body>
<div class="con">
<div class="center"></div>
<div class="box box1">
<div class="point"></div>
</div>
<div class="box box2">
<div class="point"></div>
</div>
<div class="box box3">
<div class="point"></div>
</div>
<div class="box box4">
<div class="point"></div>
</div>
</div>
</body>
</html>
css3旋转倾斜3d小动画的更多相关文章
- 基于HTML5/CSS3可折叠的3D立方体动画
今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览 源码下载 实现的代码 ...
- 用css3做一个求婚小动画
概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...
- css3旋转、过渡、动画属性
1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...
- 【CSS3】横屏引导小动画
演示地址:http://codepen.io/anon/pen/oXbXdX 主要知识点: @media all and (orientation : landscape) { /* 这是匹配横屏的状 ...
- 利用svg描边+css3实现边框逐渐消失小动画
首先简单的描述一下svg中两个属性: stroke-dasharray:表示每个虚线的长短. stroke-dashoffset:表示首个虚线的偏移量. 当两者都特别大的时候就会消失掉 直接上代码: ...
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- css3之3D魔方动画(小白版)
在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
随机推荐
- SQL Server错误与事务处理
T-SQL中出现的错误,依据和事务的关系,可以分为两种情况: 有的错误会导致发生错误位置之后的代码不再执行,如果错误位置在事务中,该事务也会自动回滚(即在错误位置之后的rollback语句不会执行,但 ...
- URL后面带\斜杠对SEO的影响
例如以下的两种URL书写方式: 1.www.baidu.com 2.www.baidu.com\ 这两种书写方式的区别到底在哪里呢?哪一个的速度更快呢?可能对于我们大多数人来说会觉得两个速度一样,因为 ...
- 十分钟学会python
1.raw_input的使用 从键盘读取信息,返回字符串. 例: hrs = raw_input("Enter Hours:")pay=raw_input("Enter ...
- How to run a (Tomcat)Java application server on a Azure virtual machine
http://www.windowsazure.com/en-us/documentation/articles/virtual-machines-java-run-tomcat-applicatio ...
- django重量级web框架
一个WEB项目要解决什么问题? 1. 基本核心功能,即将请求的request通过调用本地程序进行计算,数据库查询,返回数据,生成按照http协议生成新的数据返回给客户端,解析这些返回的数据就交由浏览器 ...
- CRM 2011 Install Errors - Tips and Tricks continued(转)
The more I get to install/upgrade to CRM 2011 in different environment the more I come across differ ...
- 关于Navigation的BarButtonItem的
(ios6.1)有两个controller在navigation stack里,A和B.A是B的previous view controller,现在top-level controller是B.要自 ...
- HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- TCP/IP 协议介绍
转自http://blog.jobbole.com/104886/ 一.TCP/IP 协议介绍 在介绍 HTTP 协议之前,先简单说一下TCP/IP协议的相关内容.TCP/IP协议是分层的,从底层至应 ...
- MVC5 + EF6 完整入门教程三
期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型,将之前的示例添加数据库查询验证功能. 文章提纲 概述 & ...