css动画之clip

覆雪蓝枫 2019-06-28

先看效果
css动画之clip

clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

clip: rect(<top>, <right>, <bottom>, <left>);

css动画之clip

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            margin: 100px;
            display: inline-block;
            padding: 8px;
            position: relative;
            background-color: rgba(255,255,255,0.8);
        }
        .box::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 2px solid #E611F1;
            animation: borderAround 5s infinite linear;
            background-color: rgba(25,66,25,0.8);
        }
        @keyframes borderAround {
            0%,
            100% {
                clip: rect(0 148px 2px 0);
            }
            25% {
                clip: rect(0 148px 116px 146px);
            }
            50% {
                clip: rect(116px 148px 116px 0);
            }
            75% {
                clip: rect(0 2px 116px 0);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="img/15177108659009550.gif" width="128" height="96" style="background-color: white;">
    </div>
</body>
</html>

附送一张解密图

css动画之clip

*借鉴张鑫旭博文

覆雪蓝枫

覆雪蓝枫

相关推荐

多个你不知道的 CSS 居中方案！

要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar

hellowzm / 0评论 2020-10-12

你知道我们平时在CSS中写的%都是相对于谁吗？

在我们编写css的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的css代码加以实现：。line-height：

云端漂移 / 0评论 2020-07-06

CSS代码片段

2.将父元素文本流水平居中,配合子元素变成行内快

e度空间 / 0评论 2020-06-13

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据，能够给人清晰、一目了然能够看清事情发生的过程，UI页面也显示的那么清晰。先来看看下面的效果：。无特殊定位，对象遵循HTML定位规则。absolute :将对象从文档流中拖出，使用 lef

drdrsky / 0评论 2020-06-13

用CSS代码做出一个简单的自动旋转正方体（css魔方原理）

元素可以使用的顶部，底部，左侧和右侧属性定位。这里会用到的是absolute 定位，也就是绝对定位，这个绝对定位是相对于离它最近的已定位父元素来说的。还有就是relative 定位，它的定位是相对于它原本位置来说的，通常用来作为绝对定位元素的容器块。而我们

AlisaClass / 0评论 2020-06-05

CSS布局

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面的内容发生了变化，后面的内容位置也会随着发生变化。在标准流中，大部分标签是区分等级的，习惯将标签划分为几种常见的加载级别: 块级元素、行内元素、行内块级元素等。隐藏的

vavid / 0评论 2020-05-30

CSS定位

元素的定位属性主要包括定位模式和边偏移两部分。静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。在静态定位状态下，无法

CSSEIKOCS / 0评论 2020-05-19

深入理解CSS绝对定位

CSS中有3种定位机制：普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。顾名思义，普通流中元素框的位置由HTML元素的位置决定。块级框一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出。在本文中，我们主要讲解3种定位机制之一的绝

Phoebe的学习天地 / 0评论 2020-05-09

css实现水平垂直居中的几种方式

上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left偏移、margin偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和tex

sdbxpjzq / 0评论 2020-05-04

css按钮定位在div底部

　　这种场景会经常遇到，比如头部固定，底部固定，或者侧边栏固定等，虽然很简单，但是好记性不如烂笔头，作为一个后端开发，在转全栈的路上css还是有点蛋疼的。　　如上代码便可，父级div给个定位，子级按钮再给个绝对定位就可。这里我父级div给的固定定位是结合我

e度空间 / 0评论 2020-04-30

关于Css的定位的一些总结

参照物：往父级上找，如果找到了有定位的父级，就会以这个元素为 参照物，如果没有就会以body为参照物

wangjie / 0评论 2020-04-25

css中z-index属性

z-index它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。z-index 值表示谁压着谁，数值大的压盖住数值小的，只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元

淡风wisdon大大 / 0评论 2020-04-21

css 定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。相对于一个元素的正常位置来对其定位。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边

dazhifu / 0评论 2020-03-04

css中position属性

position属性规定元素的定位类型。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。　　　　 fixed--固定定位，相

wangjie / 0评论 2020-02-26

CSS position定位

就比如在网页中的一些广告，无论你怎么滑动网页都无法隐藏掉广告，这就运用到我们强大的CSS定位。CSS定位的内容包括：position（位置）:relative（相对） / absolute（绝对）/static （默认）/sticky（粘性）/ fixed

xiaohuli / 0评论 2020-02-23

css定位属性

static 静态定位是position的默认值,默认文本流的状态，不会识别left right top bottom值指定的坐标。如果内容超出窗口位置，按照fixed执行。需要用到定位的地方有很多，这也是一个很灵活的属性，要非常透彻的知道其中的属性才能灵

Phoebe的学习天地 / 0评论 2020-02-22

css的相对定位和绝对定位

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。使用 display 属性改变生成的框的类型。这样的话，该框

葉無聞 / 0评论 2020-02-03

完美实现CSS垂直居中的11种方法

本人前端小白，正在做一个小程序开发的项目，css样式调整搞的头都大了。关于垂直居中，已尝试了文中的几个垂直居中css样式设置，已成功解决我的问题，故转载来备份下。这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居

liusure0 / 0评论 2020-01-11

实现css文字垂直居中的8种方法

这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言。关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同

wcssdu / 0评论 2020-01-11

css属性position

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从

dazhifu / 0评论 2020-01-02

css基础第四节

1.块状元素转行内元素：display: inline;2.行内元素装块状元素：display: block;3.隐藏：display: none;4.行内块状元素，既有行内元素特性，也可以设置margin和宽高：display: inline-block

impress / 0评论 2020-01-07

web前端入门到实战：css绝对定位和相对定位、固定定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。并且即使该元素偏移

元元 / 0评论 2020-01-02

0060 translate、margin 实现绝对定位的盒子 水平居中、垂直居中

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

玫瑰小妖 / 0评论 2019-12-31

css不同情况下的各种居中方法

margin: 0 auto ;display: flex;position: absolute;position : absolute;left : 50%;position: absolute;width : 宽度；margin: 0 auto;dis

jiedinghui / 0评论 2019-12-23

css块级元素

《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行

zhanghao / 0评论 2019-12-23

CSS | 自适应两栏布局方法

<div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div>. <

CaiKanXP / 0评论 2019-12-21

HTML和css常见问题解答2

.要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该

dazhifu / 0评论 2019-12-22

CSS 布局和 BFC

在一个Web页面的CSS渲染中，块级格式化上下文 是按照块级盒子布局的。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒都会垂直的沿着其父元素的边框排列。块格式化上下文的行为通过一个简单的float示例很容易理

impress / 0评论 2019-12-13

前端基础-css(2)

　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画。　　　　a、与其他行内元素并排；　　　　b、不能设置宽、高，默认的宽度，就是文字的宽度；　　　

wangjie / 0评论 2019-11-30

css里的BFC用法

BFC，可以把BFC理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。能够看到父元素没有被撑开，BFC规则第四条：计算BFC的高度时，浮动元素也参与计算所以我们要将父元素触发BFC. 如果，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的

尚衍亮 / 0评论 2019-11-19

Web前端基础(6):CSS(三)

特性：1.脱标 2.做遮盖效果，提成了层级。是以首屏页面左下角为参考点来调整位置。

zengni / 0评论 2019-11-17

css-选择器&amp;布局

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。行内元素设置浮动可以设置宽高。Z-index -1 拥有更低的优先级</p><div class="box3"> 我是块级元素1 &l

MaureenChen / 0评论 2019-11-10

css定位瞄点透明相关知识

position 定位属性，检索对象的定位方式；当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

CaiKanXP / 0评论 2019-11-09

CSS综合问题

将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden ;不会让元素从渲染树消失，

wangjie / 0评论 2019-11-09

css布局：如何实现垂直居中？

5. 父级设置弹性盒子，并设置弹性盒子相关属性；

zuncle / 0评论 2019-11-08

CSS文档流与块级元素和内联元素

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行,浮动元素则按规定浮在行的一端.若当前行容不下, 则另起新行再浮动.浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中

sorryericsson / 0评论 2014-05-30

css绝对定位居中

否则margin负值的调整无法精确。此时，往往要借助JS获得。transform: translate; /* 50%为自身尺寸的一半 */. position: absolute; left: 0; top: 0; right: 0; bottom

MaureenChen / 0评论 2019-11-04

web网页简单设计补充的css知识点

了解了web的基本框架，html和css，补充几点知识点常见表示颜色的几种方法：red#f00rgb(255,0,0)rgba(255,0,0,0.5) 带透明度的色彩值 opacity: 50%;透明度border-radius:圆角 border-r

sdbxpjzq / 0评论 2019-10-31

web前端——CSS 12 定位、z-index

z-index 值表示谁压着谁，数值大的压盖住数值小的，z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元

somboy / 0评论 2019-10-23

web前端——CSS 09 margin用法

当时说到了盒模型，盒模型包含着margin，为什么要在这里说margin呢？因为元素和元素在垂直方向上margin里面有坑。当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“

waterv / 0评论 2019-10-23

CSS 浮动（转）

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。要想阻止

我就是停不下来 / 0评论 2014-07-07

CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。这一点与相对

AlisaClass / 0评论 2014-07-07

css入门之布局

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right；因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）。浮动和 绝对定位,可以让元素脱离文档流。

覆雪蓝枫 / 0评论 2015-05-17

父元素与子元素之间的margin-top问题(css hack)

给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，遇到此问题的朋友可以参考下本文或许会有意想不到的收获。解决方法：1、修改父元素的高度，增加padding-top样式模拟2、为父元素添加overflow：hidd

aiolos / 0评论 2015-11-15

CSS居中小结

2.margin:0 auto;或margin:auto;(要设置宽度，否则没有效果。

tianzyc / 0评论 2016-04-30

css 学习小结

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。在网页中，元素有三种布局模型：1、流动模型2、浮动模型 3、层模型。position

cfang00 / 0评论 2016-04-15

css盒子的浮动与定位

默认是 none ，按照标准流来定位；默认是 none，允许两边都可以有浮动对象；Relative：相对定位，相对于原本的标准位置偏移指定的距离；Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

nicepainkiller / 0评论 2017-02-18

CSS标签属性之position

position属性规定元素的定位类型。所以的主流浏览器都能够很好的支持position属性。任何版本的IE浏览器，包括IE8都 不支持position属性值“inherit”。absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素

yongquanx / 0评论 2017-02-14

css盒子模型和一些属性

(x-height 通常是字体尺寸的一半。这段代码是设置了全部的内边距 只不过上右下都设置成了0；绝对定位与浮动float不能同时使用绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。positi

猫沙盆 / 0评论 2017-05-04

CSS 常用布局在小程序中的应用

我们其他的布局实现方式，都是基于正常的文档流来进行的。默认的文档流，确保在没有任何css样式的时候，还能够正确的渲染和显示内容。行内元素的height width与内容一致。正常布局流是一套在浏览器视口内放置、组织元素的系统。我们在传统的css布局当中，不

csscode / 0评论 2019-09-07