css3两个汤圆亲吻动效
效果图:
模板来源:https://www.17sucai.com/pins/demo-show?id=35132
自己仿写出来的效果图:
笔记:
1、transform:translate(-50%,-50%)实现水平垂直居中
translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。
与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate()函数中的百分比是相对于自身宽高的百分比,所以能进行居中。
示例:
2、css3 @keyframes 规则
学习链接:https://www.runoob.com/cssref/css3-pr-animation-keyframes.html
笔记
3、CSS3 animation(动画) 属性
学习链接:CSS3 animation(动画) 属性
笔记语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
4、发现关于display:inline-block的一个有趣现象:
在父元素上添加display:inline-block可以清除浮动,但美中不足的是 display:inline-block会让元素中间解析一个空格
现象:
有间隔出现
→→→→→→→→
如图示改动,间隔消失
→→→→→→→→
原因是标签段间有空格,解决方法 :去除inline-block元素间 间距的N种方法
css3两个汤圆亲吻动效的更多相关文章
- 从浏览器渲染层面解析css3动效优化原理
引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...
- 前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- css3常用动效以及总结
(迁移自旧博客2017 08 06) CSS3 文本效果: box-shadow:盒子阴影,可以给卡片添加提高美化效果.可广泛应用于内容展示页面. <div class="card&q ...
- 【总结】前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
- Web动效研究与实践
随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低 ...
- angular2-4 之动效-animation
提示: angular2 时animation代码在核心模块里面(@angular/core里面);到了angular4.0时animation从核心模块中提取出来作为一个单独的模块, 这样可以在 ...
- H5动效的常见制作手法
众所周知,一个元素,动往往比静更吸引眼球: 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验: 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表 ...
- 玩转HTML5移动页面(动效篇)
为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...
随机推荐
- CopyOnWriteArrayList(复制数组 去实现)
一.Vector和SynchronizedList 1.1回顾线程安全的Vector和SynchronizedList 我们知道ArrayList是用于替代Vector的,Vector是线程安全的容器 ...
- 如何多个router 进行合并?
有时间可能有多个人开发,如果在共用router, 势必会造成合并冲突,可以分开多个router.js ,然后进行合并 // router0.jsconst studyRouter = [ { path ...
- WPF自适应问题
引用水哥同事的文章 点击跳转
- JS 富文本编码、解码
第一种 escape()和unescape()方法 escape() 方法能够把 ASCII之外的所有字符转换为 %xx 或 %uxxxx(x表示十六进制的数字)的转义序列.从 \u000 到 \u0 ...
- 分支结构if 语句语法
- ARM与X86 CPU架构区别
CISC(复杂指令集计算机)和RISC(精简指令集计算机)是当前CPU的两种架构.它们的区别在于不同的CPU设计理念和方法.早期的CPU全部是CISC架构,它的设计目的是 CISC要用最少的机器语言指 ...
- crontab+selenium不能定时执行测试的原因
上一篇我提到用无界面selenium实现网页的自动签到.本来测试好好 的没问题,但是加进crontab定时任务却一点动静页没有,后来发现是浏览器的显示问题,自动任务要这样写: 12 3 * * * e ...
- Django Rest框架 流程详解
什么是Restful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类审 ...
- R2CNN论文思路记录
Rotational region cnn 我们的目标是检测任意方向的场景文本,与RRPN类似,我们的网络也基于FasterR-CNN ,但我们采用不同的策略,而不是产生倾斜角度建议. 我们认为RPN ...
- cocos2D-X 显示中文
{ 将所在的cpp文件改为utf-8 无签名格式再编译 //但,治标不治本 }