当前位置: 首页 > Web前端 > HTML5

3D动画和boxshadowandmask

时间:2023-04-05 19:44:53 HTML5

3D动画transform:rotate.box{width:300px;高度:300px;边距:200px自动;背景颜色:天蓝色;transform:rotate(45deg);}/*rotadefault是绕rotateZ轴旋转的,那我们要看立体效果,是不是要换轴呢?我们还可以绕X轴和Y轴旋转盒子。Y轴旋转是不是有点像我们要翻书?然后打开书,它是不是绕着我们的Y轴旋转?*/所以如果盒子绕Y轴旋转的话,一般是看不到立体效果的。要想看到立体效果,必须要有景深(近、大、小的概念)透视:npx;从盒子的远处观察,并定义视角。一般是添加到父盒中,在父盒中观察子盒立体效果的合适距离一般是600px-1000px,1000px大约20厘米的距离差不多。透视原点默认情况下,假定观看者的视线与应用的透视元素相交于元素的中心。就术语而言,这意味着“消失点”位于元素的中心。可以通过perspective-origin来修改消失点的位置。该属性类似于transform-origin,可以接受x/y坐标值(带关键字top,left.right.bottom),百分比或长度值。当为元素定义perspective-origin属性时,当为元素定义perspective-origin属性时,其子元素将获得透视效果,而不是元素本身,它与perspective属性一起使用,仅影响3D变换元素

.wrap{perspective:1000px;透视原点:00;宽度:600px;高度:600px;背景色:番茄;边距:100px自动;}.son1{宽度:200px;高度:200px;宽度:200px;高度:200px;背景色:绿色;}####3d物体的制作方法将物体绕X/Y轴旋转。站在母空间观察,有一定的视野透视打开大盒子的3D空间。变换样式:保留3d;boxshadow-box-shadowBoxshadow属性介绍Boxshadow在CSS3中专门用于修饰元素的边缘。与CSS2.1及之前的border、Outline等属性相比,boxshadow不会影响网页的整体布局,而且表现形式更多。我们可以简单的分析一下整个网页内容。网页的布局就像在地板上一张一张地贴瓷砖。用户总是趴在天花板上看box-shadow下面tilebox的阴影属性详解:xOffset水平偏移yOffset垂直偏移burlLehgth阴影模糊距离spreadshadowscalingcolorshadowcoloroutsetshadowdisplaymethod;.wrap{宽度:200px;高度:200px;背景色:粉色;box-shadow:0px0px00blue;/*boxshadow:水平方向无偏移,垂直方向无偏移,阴影模糊为0,阴影缩放为0,阴影颜色为蓝色Coloroutsidedisplayshadow*//*seems没有效果,因为它其实很简单,因为此时阴影的大小和元素是一样的,并且没有给阴影设置偏移量,所以从用户从上往下看的角度来看,元素的阴影就是完全被元素本身和元素遮挡xOffset属性值的作用是在阴影原来的位置上设置一个偏移量。Xoffset为正时,阴影向右偏移,xOffset为负时,阴影向左偏移*/}
offset-x:水平方向阴影的偏移向右为正,向左为负。offset-y:阴影的垂直偏移量。正数向下移动,负数向上移动。blur:阴影模糊,指的是从完整的颜色到消失的颜色的长度。不能取负数。这个值的显示效果就好像在原来的阴影周围加了一个带有模糊渐变效果的边框,可以让阴影显得更大,有一种朦胧的效果,即使元素没有偏移,因为阴影本身更大,所以您还可以看到一个朦胧的蓝色光晕散布在元素周围:阴影大小。正数扩大阴影(阴影尺寸大于方框尺寸),负数缩小阴影(阴影尺寸小于方框尺寸),0阴影与方框尺寸相同。color:阴影的颜色,这里的颜色可以设置为gradient,英文单词,rgb,rgba,hexadecimal等,作用是改变阴影的颜色;默认黑色插图表示添加内部阴影,默认为外部阴影开头。然而,如果你给盒子阴影加上inset,阴影看起来就好像从元素的边缘向内部扩散一样。这时候阴影的大小会覆盖元素的部分内容。多个阴影用逗号隔开box-shadow:10px10px10px10px#ffcc33,-10px-10px10px10px#9933ff;commaseparatedbox-shadow:10px10px10px10px#ffcc33,-10px-10px10px10px#9933ff;filter-filter.wrap{宽度:400px400px;高度:;背景:url(1.jpg)无重复中心/封面;边距:30px自动;transition:0.5s}wrap:hover{filter:brightness(1.5);/*当亮度大于1时,元素变亮,当值小于1时,元素变暗>Contrastfilter:contrast(百分比);默认为100%所谓对比度,简单的理解就是一个区域的每一种颜色都会变得特别显眼,黑色更黑,白色更白blurfilter:blur(blurradius)pixels给图像设置高斯模糊。模糊半径的值设置了高斯函数的标准差,也就是屏幕上有多少像素混合在一起,所以值越大越模糊;灰度滤镜:灰度(百分比)默认为0%。该属性的作用比较简单,就是将一个颜色复杂的区域转换成只有黑白的区域。括号中的值定义转换的比例。值为100%将完全转换为灰度图像,值为0%则不会改变图像。0%到100%之间的值是效果的线性乘数。如果不设置,则值默认为0;browncolorlevelfilter:sepia(percentage)默认为0%这个属性的作用和上面一样,就是简化某个区域的颜色,这个属性会把一个颜色丰富的区域变成一个旧的黑白白色照片效果,使图片看起来略带黄色。饱和滤镜:饱和度(%);转换图像饱和度。括号中的值定义转换的比例。值为0%表示完全去饱和,值为100%时图像保持不变。其他值是效果的线性乘数。允许超过100%的值,具有更高的饱和度。如果未设置该值,则该值默认为1。随着饱和度的增加,颜色变得“更清晰”。饱和度越小,颜色越“浅”;mask遮住一部分,只暴露css3的一部分属性,不重要,兼容性不好,IE浏览器不支持,webkit核心浏览器(包括chrome,safari,IOS,android)需要添加-webkit-前缀。需要特别注意的是firefox浏览器也支持webkit-mask属性。不同的浏览器对我们写的东西有不同的影响。各种标准更新迭代也非常快,对新标准的支持程度也不一样。所以我给你写一个兼容性前缀,让它更好被识别..box{width:300px;高度:300px;background:url("1.jpg")无重复中心/封面;边距:100px自动0;-webkit-mask-image:linear-gradient(red,blue);}/*此时没有效果。打开控制台,可以看到我们的代码已经成功运行了。但是为什么没有效果呢?这个时候我们就来说说,cover口罩是干什么用的?我们需要使用透明来覆盖图像。maskmask的作用是用透明图片或者渐变来遮挡元素的背景*/-webkit-mask-image:linear-gradient(red,transparent);/*这个有点相当于我们的filter,我们给背景加个颜色*/body{background-color:skyblue;}-webkit-mask-image:radial-gradient(red,transparent)/*我们也可以写百分比。*/-webkit-mask-image:radial-gradient(红色50%,透明50%);ps:蒙版可以用透明的png图片去蒙版。maskmask是一个复合属性。mask-image,默认值为none,值为透明图片,或透明渐变mask-repeat,默认值为repeat,可选值同background-repeatmask-position。默认值为00,可选值同background-clip,位置同mask-clip,默认值border-box,可选值同background-clipmask-origin,默认值为border-box,可选值同backgroundund-origin与mask-size相同,默认值为auto,可选值与background-size相同