前端（七）之动画与阴影

QLQ 发布于2019-04-23 13:06 / 2257人阅读

摘要：动画及阴影动画及阴影一拼接网页一拼接网页将区域整体划分起名对其他区域布局不产生影响提出公共操作当有区域发送显示重叠脱离文档流导致的需要通过调整层级一定需要最外层且最外层做自身布局时不要做过多布局操作二过渡二过渡属性过渡时间必须延迟时间一般

动画及阴影

一.拼接网页

将区域整体划分起名 => 对其他区域布局不产生影响
提出公共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;
}

私有云海外云主机看动画学算法之:hashtable 前端阴影html5 前端动画事件与动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1443.html

vue应用产品之iShow H5编辑器

摘要：地址文档网站在线地址今年年初，开始断断续续打磨自己的编辑器，到现在也有半年有余。目前是版本，后续会不断完善，也欢迎大家贡献自己的想法，共同进步。 github地址：https://github.com/qiuyaofan/iShow 文档：https://qiuyaofan.github.io/iShow/ 网站在线地址：https://qiuyaofan.github.io/is...

W_BinaryTree 2019-08-21 16:25 评论0 收藏0
CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
【前端Talkking】CSS系列-css3之box-shadow介绍

摘要：基本上就是将单侧投影中的技巧运用两次，以如下所示在浏览器中的效果如下模拟边框使用属性可以模拟的效果，以如下所示在浏览器中的效果如下我们可以看到利用属性模拟了的效果，但是与不同的是，使用创建的边框效果并不会影响元素的尺寸。 1.写在前面在CSS3中，可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果，这个属性在前端开发中使用的非常多，例如segmentfault的首...

jackzou 2019-08-29 14:20 评论0 收藏0
从零单排之CSS3

摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。 CSS3 概览 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过...

刘福 2019-08-28 17:59 评论0 收藏0
SVG

摘要：目前只提供了一些基础功能。中与的区别开发者第一次接触手写那种，虽然很多情况都有设计师使用来完成这项工作，但还是不排除需要利用到的每个元素。轻量级，具备灵活的来自团队，全球非常出名的可视化团队。于是笔者尝试着把移植到中。使用SVG + CSS实现动态霓虹灯文字效果早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素发现居然是用SVG + ...

104828720 2019-08-29 14:00 评论0 收藏0