伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI,其他-背景,动画效果
 15143  87  查看评论 (5)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容10

实现方法

HTML结构该星空手机1946韦德最新网站的HTML结构采用一个空的<div>来制作。<div class="stars">     </div>CSS样式为了模拟黄昏是的天空效果,整个背景使用渐变来制作背景色。body {   background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);   background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);   background-attachment: fixed;   overflow: hidden; }整个星空的画布使用perspective制作为3D空间,同时修改透视的原点为50% 100%,并执行rotate帧动画。该帧动画用于对画布中的元素进行旋转。@keyframes rotate {   0% {     transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);   }   100% {     transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);   } } .stars {   transform: perspective(500px);   transform-style: preserve-3d;   position: absolute;   bottom: 0;   perspective-origin: 50% 100%;   left: 50%;   animation: rotate 90s infinite linear; }所有的小星星都是通过jQuery代码动态添加到画布中的,添加时被赋予.star class。在CSS样式中,设置了星星的通用样式,并使用translate3d()函数使它们绕Z轴旋转。.star {   width: 2px;   height: 2px;   background: #F7F7B6;   position: absolute;   top: 0;   left: 0;   transform-origin: 0 0 -300px;   transform: translate3d(0, 0, -300px);   backface-visibility: hidden; }JAVASCRIPT该星空手机1946韦德最新网站使用jQuery来生成小星星。在生成星星之后,会对它们进行遍历,然后随机修改它们的旋转角度和缩放尺寸。$(document).ready(function () {     var stars = 800;     var $stars = $('.stars');     var r = 800;     for (var i = 0; i < stars; i++) {         if (window.CP.shouldStopExecution(1)) {             break;         }         var $star = $('<div/>').addClass('star');         $stars.append($star);     }     window.CP.exitedLoop(1);     $('.star').each(function () {         var cur = $(this);         var s = 0.2 + Math.random() * 1;         var curR = r + Math.random() * 300;         cur.css({             transformOrigin: '0 0 ' + curR + 'px',             transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'         });     }); });
相关伟德BETVICTOR-背景,动画效果

jquery形象照片卷轴伟德BETVICTOR

jquery形象照片卷轴伟德BETVICTOR
  背景
 15021  58

首页大屏背景图平滑切换

首页大屏背景图平滑切换
  背景
 15665  94

jquery固定标题控制伟德BETVICTORMidnight.js

midnight.js是在页面滚动时控制多标题设计的开关jQuery伟德BETVICTOR,所以对应下面的内容你总能看到一个标题。
  背景
 17537  177

全屏背景滚动

基于HTML5的炫酷个人网站模板
  背景
 36549  506

讨论这个项目(5)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    freedom11000 0
    2018/2/8 12:00:32
    ~~--- 0
    2017/12/14 16:52:22
    你好,请问为什么要设置两条渐变呢?background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6); 回复
    总督sir 0
    2017/12/10 22:27:57
    一开始出现的时候太快了 回复
    流景扬辉 0
    2017/11/7 18:48:05
    (_L.nメ° 0
    2017/10/27 15:02:20
取消回复