欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端(七)之动画与阴影

程序员文章站 2022-04-05 11:27:35
动画及阴影 一.拼接网页 二.过渡 三.阴影 四.伪类实现边框 ......

动画及阴影

一.拼接网页

将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作

二.过渡

transition属性

transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())

过渡属性具体设置给初始状态还是第二状态 根据具体需求
/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画  | opacity 可以做动画*/

三.阴影

/*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 0 0 10px 10px black;

/*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.伪类实现边框

/*自身需要定位*/
.box {
    position: relative;
}
/*伪类通过定位来完成图层的布局*/
.box:before {
    content: "";
    /*完成布局*/
    position: absolute;
    top: 10px;
    left: 0;
    /*构建图层*/
    width: 1px;
    height: 100px;
    background-color: black;
}
.box:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    background-color: black;
    top: 0;
    left: 10px;
}