css3箭头效果
css3 record1
尝试用css写了个箭头效果
思路就是通过span
和span
子元素i
分别通过设置他们的伪元素构造两个箭头,但是i
构造的箭头两条线height
都是0,hover
的时候渐近的动画效果就是i
箭头的高度变化而来的,还有rotate
相同的角度
css3知识:
- transition
- transform
- 伪元素::before ::after
transition
Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
transtion-property
拿张鑫旭老师博客列出的参考下CSS3 transition-property使用参考指南
(transform
也可当作transtion-property
)
transform
开始有个箭头旋转的时候设置transform-origin
理解有点绕(就是突然觉得自己不会几何旋转了...2333)
后来画了下坐标清晰了,基点(0,0,0)就是原点,默认值是(50%, 50%, 0),就是平面的中点.
-webkit-transform-origin: 50% 70%;
transform-origin: 50% 70%;
上面代码是x轴50%偏移,向右偏移50%,Y轴70%偏移,向下偏移70%.
伪元素
需要注意的是
content即使为''
也必须有这个属性
伪元素是作为附属元素的子元素存在,比如下面代码它们都是i
的子元素
.block-arrow .prev i::before,
.block-arrow .prev i::after{
outline: 1px solid transparent;
z-index: 0;
position: absolute;
left: 50%;
top:50%;
width: 3px;
height: 50%;
content: '';
background: #0099cc;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
css3箭头效果的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- Cool!15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
随机推荐
- 《量化投资:以MATLAB为工具》连载(2)基础篇-N分钟学会MATLAB(中)
http://www.matlabsky.com/thread-43937-1-1.html <量化投资:以MATLAB为工具>连载(3)基础篇-N分钟学会MATLAB(下) ...
- JAVA-JNI java程序调用c/c++程序
目的:写c/c++函数,让java调用 java代码 1.创建HelloJNI.java文件->编写代码如下->cmd中javac HelloJNI.java获取HelloJNI.clas ...
- MySQL添加用户、删除用户与授权
MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户 1.1 登录MYSQL: @>mysql -u root -p @&g ...
- C#数组的声明
C#一维数组的声明方式 int[] myArray; string[] myStrArr; 但是在访问数组之前必须初始化. C#数组的初始化方式有两种,第一种是在声明数组的时候为数组的元素赋初值: i ...
- Windows Phone 十五、HttpWebRequest
Windows 运行时中支持网络资源访问的对象:HttpWebRequest 对象 发送 GET/POST 请求,HttpHelper 封装,超时控制. HttpClient 对象 发送 GET/PO ...
- (转)How To Kill runaway processes After Terminating Concurrent Request
终止EBS并发请求后,解锁相关的进程. 还有种方法可以在PLSQL->tools->session 中找到并且kill Every concurrent Request uses some ...
- https基础流程
背景: https基于SSL,目的是保护http通信的过程,防止中间人篡改信息,或假冒服务端的问题. 要解决的问题: 1. 客户端如何证明是与正确的服务端进行通信 2. 客户端如何确认收到服务端的 ...
- 【转】PowerShell入门(十二):编写PowerShell管理单元和二进制模块
转至:http://www.cnblogs.com/ceachy/archive/2013/03/13/PowerShell_SnapIn.html PowerShell一开始就提出利用管理单元来实现 ...
- GirdView 追忆学生时代的百思不得解
临近年关,越多越多的园友开始了对工作.生活的总结,以及对来年目标的确立.这很励志,人是一根能思想的苇草,想来想去,我实在没什么惊天地.泣鬼神的英勇事迹,16年毕业季,按部就班的在时间的马车上颠簸,阅读 ...
- Solution for Error FRM-92095: Oracle Jnitiator version too low
Solution for Error FRM-92095: Oracle Jnitiator version too low By Pan.Tian on 六月 04, 2013 Symtom: Af ...