代码成长史4

制作照片墙(一些定论)

html => 结构 可供于浏览器先编译再读取的一门语言

标签 梁css = > 样式 可供于浏览器 直接读取 的一门语言            装修javascript => 行为                                        生活margin:0 2px 4px;(上 左右 下)元素分为三类:       

1.块元素  ,独占一行  有宽高属性

2.行内元素,后面可接其他元素  a  

3.行内块元素,接其他元素

transform:rotate(10deg;

阴影属性box-shadow:px px px red;transition:all 1s;

(过渡动画):hover{  transform:rotate(0deg);

 scale(缩放)}position:relative;left:0px; top:100px;

设置相对定位元素,无论定位到哪里去,原来位置还居中

.img01{

/*第一个属性 rotate 角度

第二个属性 scale  缩放 */

transform:rotate(10deg);

/* 设置相对定位的元素,无论定位到哪里去,原来的位置还中据,不会影响其它的结构布局 */

/* position:relative; left:0px; top:100px; */

/* 设置层级关系,必要有定位的属性,不管什么定位都行 */

/* z-index:8; */

旋转图片第一种方式:

(景深效果)perspective

transfrom-style:preserve-3d;(要实现真是的三维空间效果,必须得设置这个3D属性,如果只是设置了景深效果参数,不设置三维参数,那他只是三维平面)

<style>

*{margin:0; padding:0;}

body{

background:#999;

}

.box{

width:200px; height:200px; margin:200px auto; border:2px solid red;

/*景深属性,好比舞台效果,离得越近(设置的值越小),看得越大,反之...  */

perspective:800px;}

.photo{

width:200px; height:200px; position:relative;

/* 要实现真实的三维空间效果,必须得设置这个3D属性, 如果只是设置了之前的景深参数,不设置这个

三维参数,那么它只是看似三维的平面效果

*/

transform-style:preserve-3d;

/*css3过渡动画  */

/* transition:1s; */

/*css3属性,调用定制动画,

第一个参数表示定制动画的名称

第二个参数表用多少时间来完成这个定制的动画

第三个参数表示动画的形式,linear表示匀速运动

第四个参数表示此动画循环重复

*/

animation:play 15s linear infinite;}

.photo img{

width:200px; height:200px; position:absolute; left:0; top:0}

.img01{

transform:rotateY(40deg) translateZ(400px)

}

/*css3定制动画  */

@keyframes play{

/*form表示初始状态 */

form{

transform:rotateY(0deg);}

/*to表示结束状态 */

to{transform:rotateY(-360deg);}

}

.img02{

transform:rotateY(80deg) translateZ(400px)}

.img03{

transform:rotateY(120deg) translateZ(400px)}

.img04{

transform:rotateY(160deg) translateZ(400px)}

.img05{

transform:rotateY(200deg) translateZ(400px)}

.img06{

transform:rotateY(240deg) translateZ(400px)}

.img07{

transform:rotateY(280deg) translateZ(400px)}

.img08{

transform:rotateY(320deg) translateZ(400px)}

.img09{

transform:rotateY(360deg) translateZ(400px)}

/* .photo:hover{

transform:rotateY(30deg)

} */

</style>

</head>

<body>

<div class="box">

<div class="qwq">

<img src="1.jpg">

</div>

</div>

第二种方式制作(js)

<script src="1.js"></script>

<script src="2.js"></script>

<script>

//$('.photo').css('border', '100px solid red')

//var a = 0;

//$('.photo').click(function(){

//a += 3;

//alert(a);(弹出小框);

//});

//定义一个变量叫做a,并且把0赋值给它,那么这个a就等于0

var a = 0;

//选择对象为document,表示整个文档,然后加鼠标滚动事件,function为所要执行的具体事件

//function里面有一个参数为detail,它可以帮助返回鼠标滚动是向上滚还是向下滚,-1表示向下滚动

// 1表示向上滚动

$(document).mousewheel(function(e, detail){

//console.log(detail) // -1 1

//alert(11)

//每次鼠标滚动,之前设置的a变量就会加一次40*(正1还是负1,取决于用户滚动的方向)

a += 40 * detail;

//给这个对象为.photo的设置样式

$('.photo').css('transform','rotateY('+a+'deg)')

})





>

推荐阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,338评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,266评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 807评论 0 7
  • 一、写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙...
    MrZengB阅读 1,050评论 2 9
  • 甜困阅读 47评论 0 0
  • 从九点一刻入睡,睡了十来分钟,醒来。然后一直到现在你都是在翻来覆去,哼哼唧唧。我除了无奈还很心疼。睡个觉这么不踏实...
    杨茗辞阅读 62评论 3 3
  • 安卓中国2017年3月8日消息,虽然HMD接手诺基亚后,凭借着一波情怀圈了不少的粉丝,但是没有旗舰机的推出还是让诺...
    斑码科技阅读 128评论 0 0