盒子隐藏 背景图 盒子 过渡 3d
盒子隐藏
样式:
display:none;
背景系列
background属性。
background-color 设置元素的背景颜色。
background-img 将图片设置为元素的背景。
background-color
颜色的表示方法:1.单词red blue 2.rgbred green blue 三原色 饱和度 0-255 3.16进制0-9 a-f #ff000020=f=15255=15*15=ff对于10进制来说 100=10*10对于16进制来说 255=15*15=f*f ff10=1*16=1612=1*16+2=1828=2*16+8=4016进制的af等于10进制的多少?10*16+ 15=175所有的十六进制的颜色都是以#开头的。所有的#aabbcc的形式,都可以简写为#abc。常用的颜色:#000 黑色#fff 白色#f00 红色#222 深灰#333 灰色#ccc 灰色
背景图
将图片设置为背景。background-image: url("图片的路径");背景图片会铺满盒子的整个背景区域。background-repeat:repeat(平铺 默认值)no-repeat 不平铺repeat-x 横向平铺repeat-y 纵向平铺background-img
设置图片为背景。background-size:设置背景图片的大小
属性值:px 单词
单词:都会让图片等比例缩放。cover 将盒子铺满背景图,但是不保证图片的完整显示。contain 将图片完整的显示,不保证铺满盒子。background-repeat 设置背景图片是否重复以及如何重复,默认为平铺满。
属性值:repeat:平铺 默认值no-repeat:不平铺repeat-x 水平上平铺repeat-y 垂直上平铺
background-position
规定插入的背景图在盒子中的位置。
默认从左上角开始显示背景图。
1.像素background-position: 水平偏移量(正向右) 垂直偏移量(正向下);2.百分比图片在左上角是 0% 0%图片在右下角是100% 100%代表的像素值:(盒子的宽/高-图片本身的宽/高)*百分比也可以为负数。3.单词topbottomcenterleft right如果只有一个值,默认另外一个值为50%应用场景:1.网页的背景图2.通栏banner3.精灵图/雪碧图(音译)提高网页的响应速度,减少服务器的压力。使用技巧:1.在h1中使用背景图,再将文字首行缩进溢出隐藏,有利于网站的SEO优化。
background-attachment;
设置图片是否随着页面的滚动而滚动属性值:fixed:背景会被固定,不会随滚动条滚动scroll 默认属性,会随滚动条滚动。
精灵图:综合写法
color image repeat attachment positionbackground:red url("img/bs.jpg") no-repeat fixed 100px 200px;
background-origin 背景原点
padding-box 从内边距开始显示背景 默认值
border-box 从边框开始显示背景
content-box 从内容开始显示背景
background-clip 背景裁切
border-box 默认值 超过边框部分的背景,将被裁剪掉。
padding-box 超过padding部分的背景,将被裁剪掉。
content-box 超过内容部分的背景,将被裁剪掉。
text-shadow 文本阴影。
格式:text-shadow: 水平偏移量 垂直偏移量 模糊度 阴影颜色;
盒子:
边框圆角border-radis属性值:px 百分比border-radis:水平半径 垂直半径border-radis:10px;以10px为半径,画圆,以得到的弧度为边角。可以按照四个角来设置:border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;border-radius: 左上 右上 右下 左下;省略的角度,取对角的值。半圆:1.矩形2.宽是高的2倍。3.左上右上圆的半径为宽的一半半径写法:border-radius: 150px/200px; 水平半径/垂直半径
盒子阴影
box-shadow
格式: box-shadow:水平偏移 垂直偏移 模糊度 阴影大小 阴影颜色 内阴影/外阴影
线性渐变:
格式:background-img:liner-gradient(方向,起始颜色...终止颜色); 方向:to left,to right,to top,to bottom 角度 deg
百分比写法
background-image: linear-gradient(45deg,yellow 0%,green 40%,cyan 70%,#ff6700 100%);
径向渐变
background-img:radial-gradient(辐射的半径大小 中心的位置,起始颜色,…终止颜色);
中心的位置:单词at centerat leftat topat rightat bottompx按照左上角进行位移
w3c
会员:各大互联网巨头
它设定了整个平台的规则,监督整个过程。现在学习的是css2.1 但是到css3时,就要考虑兼容性问题。浏览器前缀 谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
sass
过渡
transtion 过渡
之前:元素从一个状态到另一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。
css3新增了过渡这个属性,可以实现元素不同状态的平滑过渡。
transition-porperty:制定过渡的属性。all为指定所有属性都有过渡效果,必须。
transition-duration:制定过渡的时间单位可以说s或者ms,必须
transition-delay:制定过渡生效的延迟时间。transition-timing-function: ease 慢慢减速linear 匀速ease-in 加速ease-out 减速ease-in-out 先加速后减速
过渡属性 完成时间 运动曲线 延迟时间
transition:all 3s linear 1s;一般有数值/中间状态的属性才可以设置过渡,比如:width,height
缩放,位移,旋转,倾斜
transform 属性缩放:放大缩小。格式transform:scale(x,y);x:代表水平方向的缩放倍数y:代表垂直方向的缩放倍数。如果只写一个值,代表等比例缩放。不会改变真实宽高,也不会旁边的盒子造成影响位移 translate格式:tramsform:translate(水平位移,垂直位移)属性值:px 正值:向右或向下。百分比 是按照盒子本身的宽高。只写一个值时,是水平位移转:rotate
格式: transform:rotate(角度)
单位:degtransform-origin: 变换原点格式: transform-origin: 水平坐标 垂直坐标
px
百分比 按照盒子的宽高。50%=center
单词 left center等transform 后面可以书写多个转换,但是书写顺序不同,效果不同。
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移,再旋转
第二种会先旋转,再位移。
倾斜 skew格式:transform:skew(水平倾斜角度,垂直倾斜角度)
单位是deg,正值 顺时针,负值逆时针。所有的转换属性,只能添加给块级元素,行内元素无效。
3D旋转:
transform: rotate3D(x,y,z,deg); x,y,z 是一个0/1的数值,0表示不旋转,1表示旋转,deg表示旋转的角度。rorateX,X轴旋转rorateY,Y轴旋转rorateZ Z轴旋转
旋转的方向:左手法则
左手握住旋转轴,大拇指指向旋转的正方向,其他手指的卷曲方向就是旋转的正方向。
位移:
transform: translateX(); //沿着x轴移动transform: translateY();//沿着Y轴移动transform: translateZ();//沿着Z轴移动transform: translate3d(x,y,z);perspective 透视:translateZ为正值,perspective值越小,盒子与你的距离越近,看到的效果也就越大。translateZ为0,perspective不管怎么变化,盒子上的阴影不变,看到的效果不变。translateZ为负值,perspective值越小,盒子与你的距离越近,看到的效果也就越小。设置给变换盒子的父容器。透视:设置用户眼睛与屏幕的距离。透视效果只是视觉上的呈现,不是真正的距离
盒子隐藏 背景图 盒子 过渡 3d相关推荐
- html图片撑开盒子,css背景图撑开盒子高度
本文原地址 需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...
- CSS中添加背景图+盒子边框样式
background-image背景图 *设置图片为背景.* background-image:url("图片路径"): background-size :设置背景图片的大小 属性 ...
- 精灵图,背景图缩放。盒子阴影,
文章目录 精灵图 背景图大小 连写 盒子阴影 过渡 骨架标签 SEO三大标签 标题图标--favicon 精灵图 将小图合成一个大图 优点:减少服务器的发送次数,减轻服务器的压力,提高页面的加载速度 ...
- 修改placeholder文字 文字换行省略号 背景图固定 鼠标经过图片闪光效果
1.input框里面的placeholder文字字体大小修改 input {background-color:transparent;font-size: (13 / @baseSize);paddi ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...
- 纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- html盒子高度自动收缩,CSS如何解决背景图随父盒子高度变化而拉伸或收缩的问题...
前两天写了个盒模型,遇到了父盒子的背景图片因子盒子的撑开而拉伸,或是因子盒子的缩短而收缩的情况,不开心! 怎么解决呢? 父盒子未设定固定高度,完全靠动态获取的子盒子的高度变化来决定它的最终高度. 在这 ...
- 第11章组件装饰和视觉效果-DecoratedBox装饰盒子-背景图效果
防采集标记:亢少军老师的课程和资料 import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { ...
最新文章
- 51单片机怎么编程,有什么好的课程?
- NRM: 地球上细菌和古菌的生物膜丰度
- 面向对象分析和设计(OOA/D)
- Microsoft Dynamics CRM 2011 多客户端安装共用同一Sql Server 实例设置
- lda数学八卦_【技术博客】文本挖掘之LDA主题模型
- client心跳 websocket_理解websocket的原理
- 四大原因告诉你:云为什么比传统IT系统更安全
- Unity3D AssetBundle相关
- 如何确定线程池核心数的最佳值?
- 无法连接到SQL SERVER数据库
- vue实现上传图片识别文字
- 用C语言求解各类求和问题
- kubuntu18.04安装搜狗输入法
- SHEL中调用uci
- 修改禅道使用的数据库
- 制作一组创意的食物图标
- 沃尔沃旗下豪华纯电动轿跑Polestar 2全球首发
- 05 爬虫应用(2)——抓取昵图性感美女图片(针对传统翻页图片版本)
- 运用计算机思维可以解决什么问题,计算机思维是能否解决生活中遇到的难题?...
- 如何挑选合适自己的内存
热门文章
- 社区团购怎么做?相对传统电商有哪些优势?
- Java学习笔记----引用传递
- Loser应该知道的6个残酷人生事实
- VC++播放Flash
- c++ connect函数Address family not supported by protocol
- 手机热点设置虚拟服务器,以三款路由器为例,浅谈手机热点中继路由器的设置方法...
- 工作室课题学习情况总结(第二周)
- C++ string获取文件路径文件名、文件路径、文件后缀(两种方式)
- 李书福为何要亲自挂帅造手机?
- 学习Python+BeautifulSoup爬取小说