css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...

target

模拟后台服务器

框架集

frameset和body不合，所以如果用frameset就不能有body标签

利用框架可以把浏览器窗口划分为若干个区域，每个区域就是一个框架，在其中分别显

示不同的网页，同时还需要一个文件记录框架的数量、布局、链接和属性等信息，这个文件就是框架集。

框架集与框架之间的关系就是包含与被包含的关系，框架集中包含了top、left、main和bottom 4个框架。

将浏览器窗口分成两个(各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        正值沿轴顺时针旋转；负值逆时针旋转