css3直线运动_CSS3实现动画线条运动效果实例集合(一)

2023-11-10

在我们日常的开发中,有时候有的图片,布局块需要加一下边框运动效果,对于这些效果,我们可以使用CSS3动画属性animation,再配合css的一些技巧制作出来。下面是收藏的一些效果实例。

1、边框流动效果

html:

css3效果的内容部分

css:

.css3-1{

width: 200px;

height: 200px;

position: relative;

}

.css3-1::after,.css3-1::before,.css3-1 span{

position:absolute;

left: 0px;

top: 0;

bottom: 0;

right: 0;

}

.css3-1 span{

background: #eee;

line-height: 200px;

text-align: center;

}

.css3-1::after,.css3-1::before{

content: '';

box-shadow:inset 0 0 0 2px #42b983;

animation:clipAnimate 10s linear infinite;

z-index: 11

}

.css3-1::before{

animation-delay:-5s

}

@keyframes clipA

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css3直线运动_CSS3实现动画线条运动效果实例集合(一) 的相关文章

  • RFC文档:官网、中文RFC文档 及 HTTP/2相关文档

    记录一下RFC的官方文档 2023 06 12修正中文RFC文档无法访问问题 一 RFC官方网站 http www rfc editor org Index of rfc RFC文档列表 Index of rfc 二 中文RFC文档 中文R
  • OS面试题(转载)

    转载自 http placement freshersworld com power preparation technical interview preparation os interview questions 23351 1 Wh
  • Tracy 小笔记 Vue - Vue 对象

    Vue 对象 const vue new Vue options el 类型 String HtmlElement 作用 挂载对象 决定之后Vue 对象会管理哪个 Dom template 当同时有 el 和 tempalte 的时候这里写
  • java泛型

    一 泛型概念的提出 为什么需要泛型 首先 我们看下下面这段简短的代码 1 public class GenericTest 2 3 public static void main String args 4 List list new Ar
  • 计算机文档加密如何解锁,bitlocker怎么解锁_bitlocker解锁方法

    许多用户为了保护电脑文件安全不被偷看 都会喜欢使用bitlocker加密功能来进行加密 Bitlocker是一种独特的为磁盘添加密码的工具 但是很多用户使用bitlocke加密完之后 不知道要怎么解锁 为此小编这就给大家带来bitlocke
  • Vue 使用 mqttws31.js 实现消息实时推送功能(WebSocket)

    1 在 vue 文件中引入 mqttws31 js 文件 mqttws31 js 文件代码在本页底部 import utils mqttws31 2 在 vue 文件中添加代码 export default data return clie
  • MapReduce官方案例wordcount

    wordcountReduce java package MaperReduce import java io IOException import org apache hadoop io LongWritable import org
  • Python后端Flask学习项目实践---搭建一个问答网站

    1 项目效果展示 这里主要以后端为主 前端的代码不做展示 如果需要代码可以评论或者私信 用户注册 登录相关 用邮箱进行注册 并通过向邮箱发送验证码来进行判断 一个邮箱只能注册一个账号 首页相关 用户登录后可以进行发布问题和回答 同时也提供搜
  • 外罚函数法计算机,罚函数法与障碍函数法

    罚函数法与障碍函数法 罚函数法与障碍函数法是求解约束极小化问题的较好的算法 其基本原理是在原目标函数中加上一个罚 障碍 函数 而得到一个增广目标函数 罚 障碍 函数的功能是对非可行或企图穿越边界而逃离可行域的点赋予一个极大的函数值 可以作一
  • 使用 Date 和 SimpleDateFormat 类表示时间以及Calendar 类的应用

    在程序开发中 经常需要处理日期和时间的相关数据 此时我们可以使用 java util 包中的 Date 类 这个类最主要的作用就是获取当前时间 我们来看下 Date 类的使用 使用 Date 类的默认无参构造方法创建出的对象就代表当前时间
  • sql:SQL优化知识点记录(七)

    1 索引优化5 2 索引优化6 3 索引优化7 查询 百分号加右边 否则索引会失效 没建立索引之前都是全表扫描 没建立索引 建立索引 建立索引 id是主键 他也可以从主键上取 覆盖索引要到了name 索引没有失效 覆盖索引要到了age 索引
  • 使用OpenCV,Python和dlib进行眨眼检测及计数

    前三篇博客学习了 windows10 Python3 7安装dlib库进行面部标志识别 python dlib实现面部标志识别 使用python dlib OpenCV提取眼睛 鼻子 嘴唇及下颌 这篇博客将进行进阶版的学习 眨眼检测 眨眼检
  • 如何利用codesense的GJB8114模板对c++源码进行进行规则检测

    2013年7 10 中国 民解放军总装备部发布了中华 民共和国国家军 标准GJB 8114 全称为 8114 2013 C C 语 编程安全 集 提出软件编程标准 以提 国家军 软件的安全性 并作为静态规则检查的依据 量数据表明 软件存在的
  • Python可视化图系列(1)-----jupyter notebook

    Python可视化 复杂的散点图 文章目录 Python可视化 复杂的散点图 前言 一 我们的目标是什么 二 实现目标的知识准备 1 引入库 2 导入数据 3 准备标签的列表和颜色 三 画目标图片 复杂的散点图 四 解读图像 总结 前言 提
  • 五大常用算法之四:分治法

    分治法和动态规划有点像 都是分解成子问题 中科大的张署老师课件很清楚 摘录如下 1 什么是分治法 当求解的问题较复杂或规模较大时 不能立刻得到原问题的解 但这些问题本身具有这样的特点 它可以分解为若干个与原问题性质相类似的子问题 而这些子问
  • 加载超炫动画

    1 MainActivity 1 package com zyhui zyh splash 2 3 import android os Bundle 4 import android os Handler 5 import android
  • 谈谈中间件开发,给想从事中间件开发的同学

    前言 本文主要是写给那些想从事中间件开发的同学看的 如果你没有这个打算 那么本文的学习路线非但不实用 还可能会影响你正常的工作 什么是中间件开发 随着国内软件行业的发展 国内互联网公司规模越来越大 业务越来越复杂 随之使用大量的中间件来提高
  • 【unity3d之UI界面学习】NGUI插件的导入步骤

    首先将下载好的NGUI资源包 我下载的是3 11 4版本 导入到引擎中进行使用 在unity3d界面点击鼠标右键 弹出的菜单送选中import package 然后选择custom package 自定义资源包 弹出资源路径窗口 找到NGU

随机推荐

  • 得物H5页面url中sign逆向分析

    一 抓包分析 https app dewu com api v1 h5 activity fire activity platform product feeds recommend detail sign b3e37ea512b177be
  • Java 字符流和字符缓冲流

    文章目录 1 字符的编码解码 2 字符流 2 1 字符输出流 写数据 2 2 字符输入流 读数据 2 3 案例 3 字符缓冲流 3 1 字符缓冲输入流 读数据 3 2 字符缓冲输出流 写数据 3 3 案例 4 小结 1 字符的编码解码 wi
  • emWin - BMP图片显示

    BmpCvt exe 用途 利用BMP图片 进行GUI显示 ICON等图标都是小BMP图片 核心是将BMP图片 转成emWin支持的方式 最终显示到TFT屏上 使用BmpCvt exe工具 将各个图片转成相应的C文件 emWin有关的工具
  • 微信小程序练手项目(云开发)

    入门回顾 微信开放社区 https developers weixin qq com community develop doc 000c2e7a3d0c501c95b9c3c935640d 1 小程序 注册 使用 配置 2 小程序的逻辑层
  • Unity5.3资源热更新

    转载自 http blog csdn net l jinxiong article details 50877926 Unity5以下的版本 要导出AssetBundle需要自己写一大坨导出的代码 BuildPipeline 想正确处理好资
  • 教妹学Java(十七):do-while 循环

    大家好 我是沉默王二 一个和黄家驹一样身高 和刘德华一样颜值的程序员 本篇文章通过我和三妹对话的形式来谈一谈 do while 循环 教妹学 Java 没见过这么有趣的标题吧 语不惊人死不休 没错 本篇文章的标题就是这么酷炫 接受不了的同学
  • JS遍历对象的七种方法

    一 for in let obj name cheng sex man Object defineProperty obj age value 18 enumerable true for item in obj console log i
  • 苹果商店上架流程_App上架苹果流程及注意事项

    APP上架是 APP应用从提交审核到上架整个过程 目的是让应用展示在APP Store上获取流量及用户 一 IOS上架整个流程 1 申请开发者账号 2 创建APP ID及申请证书 3 itunes connect 创建APP 4 打包 上传
  • 小程序 video 组件播放本地视频(黑屏无法播放,报错:MEDIA_ERR_SRC_NOT_SUPPORTED)

    小程序播放本地视频 黑屏无法播放 报错 MEDIA ERR SRC NOT SUPPORTED
  • VS9(vs2008) 下 Debug 显示 UTF8 字符串

    默认的 VC调试器只能正常显示ANSI字符串及UNICODE字符串 而UTF 8字符串及其他格式则无法显示 这里无需编写插件及修改配置文件 只需要将要显示的字符串拉到Watch中 并在变量后面添加 s8即可显示 gt 同样类型的功能也应该很
  • Anaconda-tensorflow-keras安装方法学习

    目录 开发工具 Anaconda 下载 安装与配置 Anaconda 下载 Anaconda 安装 Anaconda 安装问题 Anaconda 添加清华镜像源 安装tensorflow 接着安装keras 使用Jupyter notebo
  • FI 总账科目(GL),应付款方(供应商),应收款方(客户)的主要数据库表流向及说明

    学习FI模块也有几天了 今天的视频冲击 现在基本有点模型了 现将整理好的成果依次发布出 首先说下该模块中主要数据流向 BSIK 是供应商的未清项表 BSAK 是供应商的已清项表 BSID 是客户的未清项表 BSAD 是客户的已清项表 BSI
  • CentOS利用expect批量推送ssh public key的脚本

    方法1 bin bash Author Razor QQ 254456122 Date 2021 10 29 FileName sshkey sh URL https blog csdn net mandarin meng spm 1019
  • 使用预训练模型运行DiffusionDetection

    工程链接 https github com ShoufaChen DiffusionDet DIffusionDet需要的基础环境及各种包都配置好了 接下来我们开始用Pre trained Model来运行demo py 1 打包下载工程
  • Shell脚本之read用法

    read 默认接受键盘的输入 回车符代表输入结束 read命令选项 p 打印信息 t 限定时间 s 不回显 n 输入字符个数 bin bash clear echo n e Login read acc read p Login acc e
  • python函数练习题讲解

    自学的知识 用来记录一下 练习 1 写一个打印一条横线的函数 提示 横线是若干个 组成 2 写一个函数 可以通过输入的参数 打印出自定义行数的横线 提示 调用上面的函数 3 写一个函数求三个数的和 4 写一个函数求三个数的平均值 提示 调用
  • va_start和va_end详解

    1 在C中 当无法列出传递函数的所有实参的类型和数目时 可以用省略号指定参数表 例如 void foo void foo parm list 2 函数参数的传递原理 函数参数是以栈的形式存取 从右至左入栈 参数的内存存放格式 参数存放在内存
  • 如何查看海思SDK的版本

    命令 cat proc umap vpss 效果如下 第一行的version就是版本信息
  • html学习——表格标签

    表格 1 1 1 2 1 3 2 1 2 2 2 3 3 1 3 2 3 3 table border 1px tr td 1 1 td td 1 2 td td 1 3 td tr tr td 2 1 td td 2 2 td td 2
  • css3直线运动_CSS3实现动画线条运动效果实例集合(一)

    在我们日常的开发中 有时候有的图片 布局块需要加一下边框运动效果 对于这些效果 我们可以使用CSS3动画属性animation 再配合css的一些技巧制作出来 下面是收藏的一些效果实例 1 边框流动效果 html css3效果的内容部分 c