九大行星运行动画css3

2024-10-27

Html+Css实现九大行星动画效果

前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了, 今年神舟十一号载人飞船顺利发射成功,中国航天技术越来越成熟,浩瀚的宇宙中有着无限的未知等着我们去探索,为表示对祖国航天事业的支持,用代码来表示是最合适的了,就用3D效果稍微修改修改画了一个九大行星星系图,当然因为冥王星被踢出了,大家不要纠结,上个效果图. 这里的椭圆轨道.动画旋转全部使用CSS3来实现,并合理计算好每个行星的公转和自转的时间,

随着ScrollView的滑动，渐渐的运行动画View

今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自己定义ScrollView 复写onScrollChange方法,来计算滑动的位置. 2.自己定义接口,通过接口来在ScrollView中控制,滑动的高度的进度. 3.在自己定义View中去运行动画. 代码实现: 1.ScrollView 最基本的代码仅仅有计算滑动位置的代码了,事实上也是非常easy的.获取子View的个数.每次都去for循环,去计算字View的位置,以及当前ScrollView的top bottom 代码:

【WPF学习】第四十九章基本动画

在前一章已经学习过WPF动画的第一条规则——每个动画依赖于一个依赖项属性.然而,还有另一个限制.为了实现属性的动态化(换句话说,使用基于时间的方式改变属性的值),需要有支持相应数据类型的动画类.例如,Button.Width属性使用双精度数据类型.为实现属性的动态化,需要使用DoubleAnimation类.但Button.Paddin属性使用的是Thickness结构,所以需要使用ThicknessAnimation类. 该要求不像WPF动画的第一条规则那么绝对,第一条规则将动画局限于依赖项属

@-webkit-keyframes 动画 css3

Internet Explorer 10.Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性. Chrome 和 Safari 需要前缀 -webkit-. Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性. 当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果. 通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器: 规定动画的名称规

TranslateAnimation 运行动画后实际位置不正确问题

最近在调试android 动画时候发现一个很奇怪问题,网上搜索都说TranslateAnimation 动画运行后,实际位置要在动画结束的监听里面重新设置才会正确,不然物体位置还是在原位. 我根据网上所说之动画监听里面添加了动画结束监听,设置了物体到新位置,发现物体在视图里面还是错位, 后来经过调试发现,必须在动画结束时候移除动画,然后重新设置位置才会正确 AnimationSet set = new AnimationSet(true); set.addAnimation(translateA

8 cocos2dx加入场景切换效果，控制场景切换彻底完毕之后再运行动画

1 加入场景切换效果供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadialCW CCTransitionProgressHorizontal CCTransitionProgressVertical CCTransitionProgressInOut CCTransitionProgressOutIn CCTransitionCrossFade CCTransitionF

cocos2d-js 运行动画

1.添加动画缓存 //添加动画缓存 cc.spriteFrameCache.addSpriteFrames(res.bug_plist); this.spriteSheet = new cc.SpriteBatchNode(res.bug_png); this.addChild(this.spriteSheet); 2.初始化动作(参数1表示运行每一帧的时间间隔) //初始化动作 var animFrames = []; for (var i = 1; i <= 2; i++) { var st

CSS3 动画--- CSS3 animation

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 语法格式: animation:动画名称花费时间运动曲线何时开始播放次数是否反方向; 关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } animation-iteration-count:infinite; 无限循环播放默认是1次 animation-directi

显示层封装及实现与优化（无动画+css3动画+js动画）

showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>showhide</title> <link rel="stylesheet" href="../css/base.css"> <style> body{ width

setAnimationTransition:forView:cache: 运行动画时背景色问题

首先我描写叙述一下问题:当我从一个view到另外一个view的时候? 解答:这个问题的解决还须要看setAnimationTransition:forView:cache: 官方Api,官方是这样说的: 1.Begin an animation block. 2.Set the transition on the container view. 3.Remove the subview from the container view. 4.Add the new subview to the c

Spring入门(九)：运行时值注入

Spring提供了2种方式在运行时注入值: 属性占位符(Property placeholder) Spring表达式语言(SpEL) 1. 属性占位符 1.1 注入外部的值 1.1.1 使用Environment 一般情况下,我们会将一些值放到配置文件中,等程序运行时再把值注入到一些字段上. 假如,我们有一个test.properties配置文件,内容如下: book.author=wangyunfei book.name=spring boot author.age=30 现在我们希望在程序

JVM 专题九：运行时数据区（四）本地方法栈

1. 本地方法栈 2. 什么是本地方法栈? Java虚拟机栈用于管理Java方法的调用,而本地方法栈用于管理本地方法的调用本地方法栈,也是线程私有的. 允许被实现成固定或者是可动态拓展的内存大小.(在内存溢出方面是相同的) | 如果线程请求分配的栈容量超过本地方法栈允许的最大容量,Java虚拟机将会抛出一个StackOverFlowError异常. | 如果本地方法栈可以动态扩展,并且在尝试扩展的时候无法申请到足够的内存,或者在创建新的线程时没有足够的内存去创建对应的本地方法栈,那么jav

太阳地球月亮运行动画（使用@keyframes）

闲来无事的demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: #000; } .sun{ width: 280px; height: 280px; margin-top: 200px; margin-lef

CSS3新特性（阴影、动画、渐变、变形、伪元素等）

CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点三.伪元素 3.1.before 3.2.after 3.3.清除浮动四.圆角与边框 4.1.border-radius 圆角 4.2.边框图片border-image 五.变形 transform 5.1.rotate()2D旋转 5.2.设置原点 transform-origin 5.3.

CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点三.伪元素 3.1.before 3.2.after 3.3.清除浮动四.圆角与边框 4.1.border-radius 圆角 4.2.边框图片border-image 五.变形 transform 5.1.rotate()2D旋转 5.2.设置原点 transform-origin 5.3.平移 translate() 5.4.缩放 scale 5.5.斜切扭曲skew 六.渐

CSS3动画animation认识，animate.css的使用

CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------------- 首先我们需要创建一个@keyframes规则 @keyframes name{ from{width:1px} to{width:100px} } //或者使用百分比 @keyframes name{ 0%{width:1px} 100{width:100px} } 创建好之后,我们需

JavaScript - 基于CSS3动画的实现

在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降临,带来了强劲的CSS3动画,本文主要探讨:乘着CSS3的风,实现JS动画--探索现代画风的js动画. 本文内容如下: CSS3动画基于CSS3的动画本质封装基于CSS3的动画API 事件处理结语参考和引用 JavaScript - 前端开发交流群:377786580 CSS3动画 CSS3

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果. 浏览器支持属性浏览器支持 @keyframes animation Inte

CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是Web前端开发员,用CSS3做一些过渡效果和动画,并不比运用JS脚本实现要好(个人认为:用CSS只不过让不懂JS的人员(设计人员)也能做动画,而且使用浏览器封装好的方法,但使用JS脚本可以更灵活,在性能上也能去优化). 1.Transition Transition是一种直观上的效果,让DOM元素的某个

如何使用js捕获css3动画

如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-animation: flash 1s ease 3; -moz-animation: flash 1s ease 3; -ms-animation: flash 1s ease 3; -o-animation: flash 1s ease 3; animation: flash 1s ease 3;

九大行星运行动画css3

热门专题