CSS3 实现穿梭星空动画_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

下面这个代码在Chrome上运行2113没问题啊:5261<style>.father{    width: 200px; height: 肢罩200px;    border: 1px solid #000;    margin: 100px auto;    perspective: 800px;}.son{    width: 100%; height: 100%;     background: lime;    transition: all 3s;    transform: translateZ(-200px);}.son:hover{    transform: translateZ(200px);}</style><div class="father">    <div class="son">鼠标移到这里</div></div>其他浏览器上如果4102没效果,可兆州自行添加前缀再试。注意:1653只有IE10+、FireFox、Chrome、Safari才支持族饥蔽3D转换效果追问谢了啊,现在知道为什么我的代码没效果了,我之前只写了一个div,然后透视效果也写在了上面,结果浏览器没效果。然后我照着你的代码,把透视效果放在父级div上,这才有了效果…… 这问题都坑了我好多天了…,下面这个代码在Chrome上运2113行没问题啊:5261其他浏览器上如果没4102效果,可自行添加前缀再试。1653注意:只有IE10+、FireFox、Chrome、Safari才支持3D转换效果。拓展:1、CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。2、CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。本回答被网友采纳www.zgxue.com防采集请勿采集本网。

实现效果:

利用css3.0的新属性animate 就可以实现,具体怎么实现,百度一下会有很多教程的

html

animation: run 3s linear infinite;/* infinite 就设置为循环执行了 */

<canvas id="starfield"></canvas>

div{width:100px;height:100px;background:blue;transition:width 2s;-webkit-transition: width 5s;-webkit-transition-timing-function: cubic-bezier(0, 0.73, 0.71, 1.14)}div:hover{width:300px;}请把鼠标指针移动到蓝色的 div 元素上,就

css

div { width:100px; height:100px; background:red; position:absolute; animation:myfirst 5s; -webkit-animation:myfirst 5s; animation-fill-mode: forwards; } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;

* { background:black; padding:0; margin:0;}canvas { padding:0; margin:0; width:100%; height:100%;}

css3动画: 可以自定义节点改变属性,例如30%,40%.这种节点式定义属性的状态值,相对过度来说,可以把一系列的属性变化按照顺序节点来执行,这就好比把动画封装成了一个“函数”,既可以共用,又可以根据改变html标签元素的class来增加或者删

js

function $i(t) { return document.getElementById(t)}function $r(t, r) { document.getElementById(t).removeChild(document.getElementById(r))}function $t(t) { return document.getElementsByTagName(t)}function $c(t) { return String.fromCharCode(t)}function $h(t) { return ("0" + Math.max(0, Math.min(255, Math.round(t))).toString(16)).slice(-2)}function _i(t, r) { $t("div")[t].innerHTML += r}function _h(t) { return hires ? Math.round(t / 2) : t}function get_screen_size() { var t = document.documentElement.clientWidth, r = document.documentElement.clientHeight; return Array(t, r)}function init() { for (var t = 0; n > t; t++) star[t] = new Array(5), star[t][0] = Math.random() * w * 2 - 2 * x, star[t][1] = Math.random() * h * 2 - 2 * y, star[t][2] = Math.round(Math.random() * z), star[t][3] = 0, star[t][4] = 0; var r = $i("starfield"); r.style.position = "absolute", r.width = w, r.height = h, context = r.getContext("2d"), context.fillStyle = "rgb(0,0,0)", context.strokeStyle = "rgb(255,255,255)"}function anim() { mouse_x = cursor_x - x, mouse_y = cursor_y - y, context.fillRect(0, 0, w, h); for (var t = 0; n > t; t++) test = !0, star_x_save = star[t][3], star_y_save = star[t][4], star[t][0] += mouse_x >> 4, star[t][0] > x << 1 && (star[t][0] -= w << 1, test = !1), star[t][0] < -x << 1 && (star[t][0] += w << 1, test = !1), star[t][1] += mouse_y >> 4, star[t][1] > y << 1 && (star[t][1] -= h << 1, test = !1), star[t][1] < -y << 1 && (star[t][1] += h << 1, test = !1), star[t][2] -= star_speed, star[t][2] > z && (star[t][2] -= z, test = !1), star[t][2] < 0 && (star[t][2] += z, test = !1), star[t][3] = x + star[t][0] / star[t][2] * star_ratio, star[t][4] = y + star[t][1] / star[t][2] * star_ratio, star_x_save > 0 && w > star_x_save && star_y_save > 0 && h > star_y_save && test && (context.lineWidth = 2 * (1 - star_color_ratio * star[t][2]), context.beginPath(), context.moveTo(star_x_save, star_y_save), context.lineTo(star[t][3], star[t][4]), context.stroke(), context.closePath()); timeout = setTimeout("anim()", fps)}function start() { resize(), anim()}function resize() { w = parseInt(-1 != url.indexOf("w=") ? url.substring(url.indexOf("w=") + 2, -1 != url.substring(url.indexOf("w=") + 2, url.length).indexOf("&") ? url.indexOf("w=") + 2 + url.substring(url.indexOf("w=") + 2, url.length).indexOf("&") : url.length) : get_screen_size()[0]), h = parseInt(-1 != url.indexOf("h=") ? url.substring(url.indexOf("h=") + 2, -1 != url.substring(url.indexOf("h=") + 2, url.length).indexOf("&") ? url.indexOf("h=") + 2 + url.substring(url.indexOf("h=") + 2, url.length).indexOf("&") : url.length) : get_screen_size()[1]), x = Math.round(w / 2), y = Math.round(h / 2), z = (w + h) / 2, star_color_ratio = 1 / z, cursor_x = x, cursor_y = y, init()}var url = document.location.href, flag = !0, test = !0, n = parseInt(-1 != url.indexOf("n=") ? url.substring(url.indexOf("n=") + 2, -1 != url.substring(url.indexOf("n=") + 2, url.length).indexOf("&") ? url.indexOf("n=") + 2 + url.substring(url.indexOf("n=") + 2, url.length).indexOf("&") : url.length) : 812), w = 0, h = 0, x = 0, y = 0, z = 0, star_color_ratio = 0, star_x_save, star_y_save, star_ratio = 115, star_speed = 5, star_speed_save = 0, star = new Array(n), color, opacity = .1, cursor_x = 0, cursor_y = 0, mouse_x = 0, mouse_y = 0, canvas_x = 0, canvas_y = 0, canvas_w = 0, canvas_h = 0, context, key, ctrl, timeout, fps = 0;start();

以上就是CSS3 实现穿梭星空动画的详细内容,更多关于CSS3 星空动画的资料请关注真格学网其它相关文章!

主要需要使用2113 -webkit-animation如: -webkit-animation:gogogo 2s infinite linear ;其中gogogo是自己5261定义的动画帧,41022s是整个动画的秒数,infinite是永久循环 linear是线性变化 (step-end则是无线1653性变化,直接输出结果) 代码如下:CSS:@-webkit-keyframes gogogo { 0%{ -webkit-transform: rotate(0deg); border:5px solid red; } 50%{ -webkit-transform: rotate(180deg); background:black; border:5px solid yellow; } 100%{ -webkit-transform: rotate(360deg); background:white; border:5px solid red; }} .loading{ border:5px solid black; border-radius:40px; width: 28px; height: 188px; -webkit-animation:gogogo 2s infinite linear ; margin:100px; }追问那css3中 过渡和动画的区别是什么呢?过渡感觉也是动画啊追答过渡,可以让您将元素从一种样式或状态更改为另一种样式或状态。对于过渡效果而言,您需要向浏览器指示开始和结束状态;而对于动画,您需要指定在特定时间内的一系列 CSS 属性。 动画实际上就是过渡的扩展。 要创建动画,您可以使用关键帧。 您可以将关键帧看作是某个项目在整个动画持续时间内某个特定时刻的状态,css3动数磨画之无限循2113环进度条无限循环进度条代5261码示例<!DOCTYPE html><html lang=... functi... 博文4102 来自: 比音的博客 在animation出来之前,动薯穗斗画效果需要1653通族茄过js实现,但是,鼠标悬停,图标会一直不停旋转。 如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。具体操作如下:本回答被网友采纳,加入infinite关键字,就可以让动画无限次播放,主帆信要需要2113使用 -webkit-animation如:-webkit-animation:gogogo 2s infinite linear ;其中gogogo是自己定义的动5261画帧,2s是整4102个动画的秒数,infinite是永久循虚锋环 linear是线性1653变差轿晌化 (step-end则是无线性变化,直接输出结果)代码如下:CSS:@-webkit-keyframes gogogo {0%{-webkit-transform: rotate(0deg);border:5px solid red;}50%{-webkit-transform: rotate(180deg);background:black;border:5px solid yellow;}100%{-webkit-transform: rotate(360deg);background:white;border:5px solid red;}}.loading{border:5px solid black;border-radius:40px;width: 28px;height: 188px;-webkit-animation:gogogo 2s infinite linear ;margin:100px;}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css3实现平移效果(transfrom:translate)的示例
  • css3新拟态图标悬停动画特效代码
  • css3全屏图文幻灯片自动轮播特效代码
  • css3 文字动画效果
  • css3弹性盒子flex实现三栏布局的实现
  • css3 按钮边框动画的实现
  • 纯css3巫师法术加载特效代码
  • css3复选框选中灰色变彩色图片特效
  • css3 实现发光边框特效
  • css3 实现图形下落动画效果
  • css3 实现动画效果,怎样使他无限循环动下去?
  • CSS3中的动画效果transform:translateZ(),在Z轴上...
  • 请问做好一个css3动画后,如何实现让动画持续一定...
  • css3 实现动画效果,怎样使他无限循环动下去
  • 如何利用CSS3动画实现弹跳效果
  • css3 实现动画效果,怎样使他无限循环动下去
  • 如何用CSS3实现减速动画
  • css3动画怎样能从下往上慢慢升上去 代码怎么写
  • css3过渡和css3动画它们都能实现动画效果,只是写...
  • css3动画有哪些实现方式?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3动画星空穿梭css3 实现图形下落动画效果css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果纯css实现聊天框小尖角、气泡效果css3通过scale()、rotate()实现放大、旋转css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分使用css3背景渐变中的透明度来设置不同颜色的背景渐变css3 实现图形下落动画效果css3实现平移效果(transfrom:translate)的示例css3 文字动画效果css3弹性盒子flex实现三栏布局的实现css3 按钮边框动画的实现css3 实现发光边框特效css 说明横向进度条最后显示文字的实现代码css3制作3d立方体loading特效css3实现莲花绽放的动画效果css3制作圆形滚动进度条动画的示例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved