css3边框交替动画_用css3实现惊艳面试官的背景即背景动画(高级附源码)
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有。
我们将学到
- Css3
- outline
- radial-gradient
- linear-gradient
- box-shadow
程序员必读
Css3编码技巧
1.实现内部虚线边框
知识点:outline
核心代码
.dash-border{ width: 200px; height: 100px; line-height: 100px; outline: 1px dashed #fff; outline-offset: -10px;}复制代码
2.边框内圆角的实现
知识点:box-shadow
核心代码
.radius-border{ margin-top: 20px; width: 180px; height: 80px; box-shadow: 0 0 0 10px gray;}复制代码
3.实现条纹背景与进度条
知识点:linear-gradient,repeating-linear-gradient
核心代码
/* 上 */background: linear-gradient(to right,#fb3 50%,#58a 0);background-size: 40px 100%;box-shadow: inset 0 0 3px #555;/* 中 */background: linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);background-size: 40px 40px;/* 下 (可以实现任意角度的渐变,45°时显示效果最好) */background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);复制代码
4.复杂的背景图案
知识点:linear-gradient,repeating-linear-gradient,radial-gradient
由于第二个图会有复杂的随机动画,建议大家可以亲自尝试看看效果,核心代码
红绿灯以及红绿灯随机运动动画
利用css3多背景和position实现红绿灯和背景色块移动
核心代码
棋盘背景以及棋盘背景随机动画
利用背景渐变实现棋盘图案
核心代码
伪随机背景
利用背景渐变,keyframe动画,实现复杂的伪随机动画
核心代码
5.折角效果
知识点:linear-gradient
核心代码
折角效果哦
折角效果哦
复制代码
2.内阴影圆折角效果
核心代码
折角效果哦
复制代码
6.自适应文本的条纹背景
知识点:linear-gradient,line-height,background-origin
核心代码
hello you
hello you
hello you
hello you
hello you
复制代码
7.自定义的下划线实现
知识点linear-gridient
小伙伴们注意到了吗?默认的下划线会将文字穿过,而上面的不会呦!
核心代码
i have your big apple.you have a too? hi hi hi.
复制代码
最后
笔者3天后将推出开源的CMS系统,技术架构:
- 后台Node+Koa+redis+JsonSchema
- 管理后台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
- 客户端前台 react + antd + react-hooks + axios
后面将推出该系统的设计思想,架构和实现过程,欢迎在《趣谈前端》里查看更详细的介绍。
欢迎大家相互学习交流,一起探索前端的边界。
css3边框交替动画_用css3实现惊艳面试官的背景即背景动画(高级附源码)相关推荐
- 用CSS3实现惊艳面试官的背景及背景动画(建议收藏)
我们传统的前端更多的是用 JavaScript 实现各种复杂动画,自从有了CSS3 transition 和 animation 以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越 ...
- 在线报名竞赛网站java源码_我用Java写出了一个QQ!可在线聊天(附源码)~
来源:blog.csdn.net/weixin_44048140 正文如下: 一. 功能实现 1.修改功能(密码.昵称.个性签名) 2.添加好友.删除好友 3.单聊功能 4.判断好友是否在线 二. 模 ...
- apache poi 修改docx表格_一个excel(20M)就能干趴你的poi,你信吗(附源码)?
点击上方"阿拉奇学Java",选择"置顶或者星标" 优质文章第一时间送达! 链接: www.cnblogs.com/rongdi/p/11872810.html ...
- 记事本贪吃蛇游戏代码_厉害了,程序员28行代码写贪吃蛇游戏,附源码!
对于贪吃蛇游戏,大家基本上都玩过,但是作为一个程序员,大家是否想过要自己去写一个贪吃蛇,毕竟玩别人写的游戏和自己写的游戏是两种截然不同的感受,而且也可以通过制作来提升自己的技术! 其实贪吃蛇的逻辑并不 ...
- c iostream.源码_通达信《K线上画趋势线预警》精选指标(附源码)
通达信<K线上画趋势线预警>精选指标 K线上画趋势线预警源码: N:=5; MA5:=EMA(C,5)COLORWHITE; MA13:=EMA(C,13)COLORCYAN; MA21: ...
- python如何将图片打包进exe里_用python将图片切分为九宫格 并打包成exe可执行文件(附源码)...
前言 经常在朋友圈或者微博看到九宫格显示的图片,虽然是九张图片,但是这是一张图片经过切割而成的,显示效果很震撼.今天,我们就用python将图片切分为九宫格,并打包成exe可执行文件,就算不需要代码也 ...
- 主力吸筹猛攻指标源码_通达信最准确的抄底指标——主力吸筹(无未来附源码)...
这是一个绝对好用的指标,主力吸筹看的清清楚楚.最好是两个主力吸筹全都出现信号再进行潜伏. 神农科技 华联综超 浙江众成 主力吸筹 VAR1:=REF((LOW+OPEN+CLOSE+HIGH)/4,1 ...
- java写一个简单的浪漫代码_程序员的浪漫弹窗表白,圣诞节给Ta惊喜吧(附源码,简单易学哦)...
不要以为程序员都是木讷的,浪漫起来也会让很多妹子心动的.而程序员的表白方式也很不一般,通过一堆代码,无限释放浪漫.今天教给大家通过改写脚本语言,利用弹窗可充分自由发挥,用来表白或者恶搞都是不错的选择. ...
- python算公倍数的案例_【71页】关于python经典的80个案例操作(附源码解析)
1.Python Hello World 实例 # -*- coding: UTF-8 -*- # Filename : helloworld.py # author by : www.runoob. ...
最新文章
- IT人的学习方法论-续集 关于英语的学习
- 已锁定计算机,计算机锁定怎么解除_计算机已锁定如何解除
- ajax请求后台表格数据,商品后台表格数据的展现方式
- mailcore -- POP
- php7 返回值,7.6.4 函数返回值
- 教你用python爬取网站数据
- P1789 【Mc生存】插火把(python3实现)
- 【喜报】2016 年度最受欢迎中国开源软件TOP20出炉——JEECG、JEEWX双入围!
- 【三维深度学习】Sparse Convolutional Network 基于稀疏采样不变性的深度稠密重建
- 新手学java 学哪方面_初学者学Java应从哪些方面学习?
- unity2D相机跟随
- java数据结构编写二叉树_java 数据结构与算法 BinaryTree二叉树编写
- 计算机方法学,浅谈计算机教学的方法
- 抓包工具神器,fiddler全解
- Vue3:基础学习笔记
- Win10找不到gpedit.msc|找不到本地组策略编辑器的解决方法
- 应聘PHP有面试题吗,php应聘面试题
- php文本框添加表情,仿微信在对话框文字中插入Emoji表情包
- Android窗口Window的创建(悬浮窗)
- 树莓派新手使用iobroker日志三(米家全家桶加入iobroker)
热门文章
- 遍历文件夹还原数据库SQL语句
- ArcGIS 10.6字段计算器(Field Calculator)字段任意填充编码序列(奇数、偶数序列、自定义间隔)
- C语言之常见错误解决办法
- Android之用UncaughtExceptionHandler实现保存崩溃日志到sdcard目录下的文件夹
- LeetCode之Fizz Buzz
- java.io.File.setExecutable(boolean executable) 方法来设置所有者对于此抽象路径名执行权限。
- ubuntu如何杀死进程
- python路径怎么找windows_如何查看 windows 中 Python安装路径
- python 查看当前目录_Python的武器库11:os模块
- android 网卡监听,Android实时监听网络的变化