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>
时间： 2024-08-10 21:29:55

css3椭圆运动的相关文章

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<

HTML5 CSS3 诱人的实例： 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

CSS3略谈（中二）

一.3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换.和二维变形一样,三维变形可以使用transform属性来设置 1. 3D移动 l   方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length) l   示例: div:hover{ /*Y轴移动+100px*/ /*transform:translateY(10

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

CSS3特性修改(自定义)浏览器默认滚动条

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角.渐变.rgba等等.最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)[伪类(:hover/:link)].这里写了一个Demo,来看看... 一.HTML <div class="banner_box&qu