css3椭圆运动
通过使用css3实现让元素椭圆运动。而不是圆形运动。
效果1：http://sandbox.runjs.cn/show/ignefell
效果2：http://runjs.cn/code/w2wxjyeo
代码如下：
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><link rel="stylesheet" href="css/base.css"></head><body><style>html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
ul,li,div,p,body{margin:0;padding:0;text-align:left;}
body, html {background:#001424;text-align: left;height: 100%;width: 100%;font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;font-size:62.5%;font-weight: normal;}
@-webkit-keyframes star_ani_00{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes star_ani_00{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes star_ani_01{
0%,100%{
-webkit-transform: translateY(0rem);
}
50%{
-webkit-transform: translateY(-35rem);
}
}
@keyframes star_ani_01{
0%,100%{
transform: translateY(0rem);
}
50%{
transform: translateY(-35rem);
}
}
@-webkit-keyframes star_ani_02{
0%,100%{
-webkit-transform: translateX(0rem) scale(0.8);
}
50%{
-webkit-transform: translateX(10rem) scale(1);
}
}
@keyframes star_ani_02{
0%,100%{
transform: translateX(0rem) scale(0.8);
}
50%{
transform: translateX(10rem) scale(1);
}
}
@-webkit-keyframes star_ani_03{
0%,100%{
-webkit-transform: translateX(0rem);
}
50%{
-webkit-transform: translateX(-36rem);
}
}
@keyframes star_ani_03{
0%,100%{
transform: translateX(0rem);
}
50%{
transform: translateX(-36rem);
}
}
@-webkit-keyframes star_ani_04{
0%,100%{
-webkit-transform: translateY(0rem) scale(0.8);
}
50%{
-webkit-transform: translateY(10.5rem) scale(1);
}
}
@keyframes star_ani_04{
0%,100%{
transform: translateY(0rem) scale(0.8);
}
50%{
transform: translateY(10.5rem) scale(1);
}
}
@-webkit-keyframes star_ani_05{
0%,100%{
-webkit-transform: translateX(0rem);
}
50%{
-webkit-transform: translateX(-26.5rem);
}
}
@keyframes star_ani_05{
0%,100%{
transform: translateX(0rem);
}
50%{
transform: translateX(-26.5rem);
}
}
@-webkit-keyframes star_ani_06{
0%,100%{
-webkit-transform: translateY(0rem) scale(0.8);
}
50%{
-webkit-transform: translateY(8rem) scale(1);
}
}
@keyframes star_ani_06{
0%,100%{
transform: translateY(0rem) scale(0.8);
}
50%{
transform: translateY(8rem) scale(1);
}
}
.main{
position: relative;
height:100%;
}
.wrap-icon{
position:absolute;
background-size: 100%;
background-repeat: no-repeat;
left:50%;
top: 12%;
z-index: 2;
opacity: 0;
}
.wrap-icon1{
width: 2.7rem;
height: 2.7rem;
margin-left:-5.5rem;
margin-top: 28rem;
-webkit-animation:star_ani_00 0.5s 4s linear forwards;
animation:star_ani_00 0.5s 4s linear forwards;
}
.wrap-icon1 span{
width:2.7rem;
height:2.7rem;
display: block;
-webkit-animation:star_ani_02 16s 4s ease-in-out infinite;
animation:star_ani_02 16s 4s ease-in-out infinite;
}
.wrap-icon1 i{
width:1.5rem;
height:1.5rem;
border-radius:1.5rem;
display: block;
background:#f60;
background-size: 100% 100%;
-webkit-animation:star_ani_01 16s 0s ease-in-out infinite;
animation:star_ani_01 16s 0s ease-in-out infinite;
}
.wrap-icon2{
width: 2.7rem;
height: 2.7rem;
margin-left: 17.8rem;
margin-top: 8rem;
-webkit-animation:star_ani_00 0.5s 5s linear forwards;
animation:star_ani_00 0.5s 5s linear forwards;
}
.wrap-icon2 span{
width:2.7rem;
height:2.7rem;
display: block;
-webkit-animation:star_ani_03 20s 0s ease-in-out infinite;
animation:star_ani_03 20s 0s ease-in-out infinite;
}
.wrap-icon2 i{
width:1.5rem;
height:1.5rem;
border-radius:1.5rem;
display: block;
background:#f60;
background-size: 100% 100%;
-webkit-animation:star_ani_04 20s 5s ease-in-out infinite;
animation:star_ani_04 20s 5s ease-in-out infinite;
}
.wrap-icon3{
width: 2.7rem;
height: 2.7rem;
margin-left: 12.4rem;
margin-top: 9rem;
-webkit-animation:star_ani_00 0.5s 2.5s linear forwards;
animation:star_ani_00 0.5s 2.5s linear forwards;
}
.wrap-icon3 span{
width:2.7rem;
height:2.7rem;
display: block;
-webkit-animation:star_ani_05 10s 0s ease-in-out infinite;
animation:star_ani_05 10s 0s ease-in-out infinite;
}
.wrap-icon3 i{
width:2rem;
height:2rem;
border-radius:1rem;
display: block;
background:#f60;
background-size: 100% 100%;
-webkit-animation:star_ani_06 10s 2.5s ease-in-out infinite;
animation:star_ani_06 10s 2.5s ease-in-out infinite;
}
.wrap-bg{
width:28rem;
height:28rem;
position: absolute;
top:12%;
left:50%;
margin-left:-14rem;
border:0.1rem solid #aaa;
border-radius:28rem;
-webkit-transform:scale3d(1,0.3,1);
transform:scale3d(1,0.3,1);
}
.wrap-bg2{
width:36rem;
height:36rem;
position: absolute;
top:12%;
left:50%;
margin-left:-18rem;
margin-top:-4rem;
border:0.1rem solid #aaa;
border-radius:28rem;
-webkit-transform:scale3d(1,0.3,1);
transform:scale3d(1,0.3,1);
}
.wrap-bg3{
width:32rem;
height:32rem;
position: absolute;
top:12%;
left:50%;
margin-left:-16rem;
margin-top:-3rem;
-webkit-transform:rotate(4deg);
transform:rotate(4deg);
}
.wrap-bg3 span{
display: block;
width:100%;
height:100%;
border:0.1rem solid #aaa;
border-radius:28rem;
-webkit-transform:scale3d(0.32,1,1);
transform:scale3d(0.32,1,1);
}
.wrap-sun{
position: absolute;
width:5.3rem;
height:5.3rem;
top:12%;
left:50%;
margin-left:-2.6rem;
margin-top:11rem;
background:url(images/sun.png) no-repeat;
background-size: 100%;
}
</style><div class="box">
<div class="wrap-bg"></div>
<div class="wrap-bg2"></div>
<div class="wrap-bg3"><span></span></div>
<div class="wrap-icon wrap-icon1">
<span><i></i></span>
</div>
<div class="wrap-icon wrap-icon2">
<span><i></i></span>
</div>
<div class="wrap-icon wrap-icon3">
<span><i></i></span>
</div>
<div class="wrap-sun"></div>
</div>
</body></html>
css3椭圆运动的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
随机推荐
- SPOJ - GSS1 —— 线段树 （结点信息合并）
题目链接:https://vjudge.net/problem/SPOJ-GSS1 GSS1 - Can you answer these queries I #tree You are given ...
- linux 下 监控系统运行状况 命令 dstat
推荐读文:https://linux.cn/article-3215-1.html
- 大数据 - Zookeeper
Zookeeper 1. Zookeeper概念简介: Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Zooke ...
- leetcode 23. Merge k Sorted Lists(堆||分治法)
Merge k sorted linked lists and return it as one sorted list. 题意:把k个已经排好序的链表整合到一个链表中,并且这个链表是排了序的. 题解 ...
- linux命令学习笔记(62)-curl命令-url下载工具
linux curl是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是综合 传输工具,但按传统,习惯称url为下载工具. 一,curl命令参数,有好多我没有用过,也不知道 ...
- 苹果手机app试玩赚钱平台汇总
注意: 微信扫码下载,绑定手机号和微信.才能提现 每天3点更新任务,4点最多! | 平台 | 提现额 | 任务量| 推荐强度 | 扫码 | 1.小鱼,10元,大量,强推! →点开扫码 2.天天飞燕,5 ...
- HiHoCoder1671 : 反转子串（[Offer收割]编程练习赛41）（占位）
描述 给定一个只包含括号和小写字母的字符串S,例如S="a(bc(de)fg)hijk". 其中括号表示将里面的字符串翻转.(注意括号可能嵌套) 请你输出翻转之后的字符串. 输入 ...
- Http客户端跳转和服务器端跳转的区别
服务器端跳转: 服务器转发全程是没有客户端参与的,都在web container容器内部进行,没有任何服务器和客户端的通信,实际就是服务器内部的跳转. 这次forward, 服务器没有构建H ...
- POCO库中文编程参考指南（11）如何使用Reactor框架？
1 Reactor 框架概述 POCO 中的 Reactor 框架是基于 Reactor 设计模式进行设计的.其中由 Handler 将某 Socket 产生的事件,发送到指定的对象的方法上,作为回调 ...
- ceph安装对象网关
1.概述 安装3个网关节点分别是:controller-03.controller-04和controller-05,使用ceph gw自带的Civetweb提供服务,前端使用nginx作为前端代理. ...