target
模拟后台服务器
框架集
frameset和body不合,所以如果用frameset就不能有body标签
利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显
示不同的网页,同时还需要一个文件记录框架的数量、布局、链接和属性等信息,这个文件就是框架集。
框架集与框架之间的关系就是包含与被包含的关系,框架集中包含了top、left、main和bottom 4个框架。
<frameset cols="50%, 50%"> 将浏览器窗口分成两个(各50%)
css3过渡动画
transition 过渡,转变
transition: all 500ms ease (将所有过渡动画500毫秒播放,并且缓慢的播放)
.###hover{
width: 300px;
height: 300px;
background-color: skyblue;
border-radius: 60px;
鼠标滑过的时候改变状态,为高300宽300背景图像变为天蓝色并且将边框变为圆角边框
css3圆角,阴影,透明度
/*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
/*border-top-left-radius: 100px;
border-top-right-radius: 100px;左、右上角为正圆圆角*/
/*border-radius: 40px;曲率半径为40的圆角矩形*/
/*border-radius: 20%;最大200px,20%即40px*/
/*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
box-shadow: 10px 10px 10px 0px #bfa;
/*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/
box-shadow: 0px 0px 20px 2px red inset;
/*透明度30%,文字也透明了*/
opacity: 0.3;
/*背景色变透明,但文字不会透明*/
background-color: rgba(255,215,0,0.3);
/*边框透明*/
border: 2px solid rgba(0,0,0,0.3);
运动曲线
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
@keyframes:定义关键帧动画
animation-name:动画名称
animation-duration:动画时间
animation-timing-function:动画曲线
作者:王林1907
链接:https://www.jianshu.com/p/acb2aaec72b7
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
图片文字遮罩
rgba:rgba(0,0,0,0.1)第四个为透明度
变行
.box:hover{
transform: translate(50px,50px);
} 平移过渡
.box2:hover{
transform: rotate(3600deg);
background-color: purple
} 旋转过渡
.box3:hover{
transform: scale(0.5,0.2);
} 缩放过渡
.box4:hover{
transform: skew(0, 45deg);
} 斜角过渡
羽化大小不可为负 deg为度数单位 perspective一般值为800px 正值沿轴顺时针旋转;负值逆时针旋转