网站首页 > web开发 > CSS 正文
思路:
一个外层盒子设置背景;一个内层盒子设置宽高背景,并设置animate让盒子移动
demo:
css部分:
@keyframes mymove { from{left:0px;} to{left:70px;} } .father{ background: #748096; border-radius:5px; position: relative; top: 70px; left: -5px; } .moveson { width:20px; height:8px; background:#a0e80c; border-radius: 5px; animation:mymove 2s linear infinite; position:relative; }
html部分:
<div class="father"> <div class="moveson"></div> </ediv>
总结
到此这篇关于纯css实现流向性和动态线条效果的代码的文章就介绍到这了,更多相关css实现流向性动态线条效果内容请搜索开源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开源网!
猜你喜欢
- 2021-07-16 CSS八种让人眼前一亮的HOVER效果的示例代码
- 2021-07-16 看完不迷糊的 CSS 盒子模型介绍
- 2021-07-16 CSS 屏幕大小自适应的实现示例
- 2021-07-16 CSS中的translate(-50%,-50%)实现水平垂直居中效果
- 2021-07-16 css实现网页右下角点赞小卡片效果(实例代码)
- 2021-07-16 CSS 选择所有子元素添加样式的方法
- 2021-07-16 CSS子元素跟父元素的高度一致的实现方法
- 2021-07-16 css子元素相对父元素进行定位的实现
- 2021-07-16 纯CSS让子元素突破父元素的宽度限制
- 2021-07-16 CSS实现子元素div水平垂直居中的示例
你 发表评论:
欢迎- 2951℃JS彻底弄懂GMT和UTC时区
- 2822℃JS使用canvas技术模仿echarts柱状图
- 2649℃JS装饰者模式和TypeScript装饰器
- 2574℃JS ES6展开运算符的几个妙用
- 2542℃vue的ssr服务端渲染示例详解
- 2365℃jquery插件实现图片对比
- 2319℃微信小程序视频弹幕位置随机
- 1816℃docker安装redis设置密码并连接的操作
- 0℃未命名
- 开源分类
- 最近发表
-
- (1)python+selenium第一个自动化脚本:实现打开百度首页并搜索selenium
- Discuz!教程之启用HTTPS后解决各处遗留http://网址问题
- 网站如何识别 你是 selenium爬虫?那我们怎么解决(反反爬)
- 旋转拖动验证码解决方案
- python关键词排名_python实现百度关键词排名查询
- Unity3D研究院之通过ipa或apk获取游戏所使用的unity和Xcode版本
- Unity3D研究院编辑器之脚本生成Preset Libraries(十四)
- 手把手教你Charles抓包工具使用
- python开发的程序内存越来越大_遇到个python进程占用内存太多的问题 | 数据,更懂人心...
- Selenium Python3 请求头配置
- 开源网标签
本文暂时没有评论,来添加一个吧(●'◡'●)