css3两个汤圆亲吻动效
2024-10-07 16:48:35
效果图:
模板来源: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种方法
最新文章
- CISCO VPN出现网关报错
- PAT1030. Travel Plan
- document.getElementsByClassName方法的重写(OVERRIDE)
- 重新开始学习javase_Exception
- 自定义UINavigationItem的两种方法以及相应的隐藏方法
- ios开发中各种版本、设备的区分
- css网页自适应-2
- java web开发时的绝对路径与相对路径
- 怎样让PDM图形列表显示name和code等需要的信息
- jinja2.exceptions.TemplateNotFound: home/index.html
- [日志分析] Access Log 日志分析
- Django之CBV\FBV
- 基于Tkinter以及百度翻译爬虫做的一个小的翻译软件
- 算法笔记--极大极小搜索及alpha-beta剪枝
- laravel5实现第三方登录(微信)
- 【 js 基础 】为什么 call 比 apply 快?
- PHP实现JS的无符号右移(>;>;>;)
- netty搭建Tcp服务器实践
- Java转Exe
- 安全之路:Web渗透技术及实战案例解析(第2版)