坚持#第31天~旋转图片学习完了

2019-04-15 14:13发布

2016-9-5

@keyframes rotate{ //反着转
360到0degfrom
{transform:rotateY(0deg);}to
{transform:rotateY(360deg);}
}
放电影(自动旋转)在pic里加东西:.box 


.pic{animation:rotate 5s linear infinite;}//时间是速度

动画的方法:定义一个关键帧(在化妆里面写),拍电影:@keyframes name{},然后放电影:
.box .pic{animation:name speed linear infinite;}透明度是opcity:0.4;再来个文字盒子:
化妆:.text{想都不用想宽度高度背景颜 {MOD}
width:660px;height:440px;background:pink; }
写文字和显示文字的方法:在JS里面写($下面,$不需要开头有空格)://创建一个数组存放所有的文字:var b = ["我只有会在做一件事情的时候才会想你,什么事呢,那就是呼吸."];var str = b.join()//放入join()里面;alert(str)弹出,需要分号,规范。
b.join(),i=0,arr=str.split("");//字符串分割   alert(arr);
var ms_stop = setInterval(function(){
if(i>str.length-1){
return;//不执行下面方法,免得输出其他字
//或写i=0;document.getElementById("txt").innerHTML = "";//打完后重新开始打
}
document.getElementById("txt").innerHTML = document.getElementById("txt").innerHTML+arr[i];
i++;
console.log(i);//aditplus输出是这个
//在当前页面,通过Id去寻找元,特别注意innerHTML的i是小写素"txt";改为:},1000);//每隔1000ms干什么事情
化妆://text-indent是开头空多少距离,后面的是行高.text{text-indent:10px;line-height:20px;}
随机取整数Math.floor(Math.random()*5);

背景切换的方法的构造:
var RandomBg = function(){
return Math.floor(Math.random()*5);}
var ImagesAuto = setInterval(function(){ document.body.style.backgroundImage = "url(images/bg"+RandomBg()+".jpg)";},1000);//setInterval是设置时间间隔

调整背景大小:body{background-size:100% 100%;} body上面添加个html,body{height:100%;}


添加下雪效果有个下雪的JS,引用进来:
      
注意在下雪的js中打开方式记事本改一下雪花的路径:this.el.setAttribute("src", b + "images/snow" + Math.floor(Math.random() * 4) + ".gif");
//music
光棍登场: