css3 record1


尝试用css写了个箭头效果

思路就是通过spanspan子元素i分别通过设置他们的伪元素构造两个箭头,但是i构造的箭头两条线height都是0,hover的时候渐近的动画效果就是i箭头的高度变化而来的,还有rotate相同的角度

css3知识:

  • transition
  • transform
  • 伪元素::before ::after

jsfiddle demo


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箭头效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. Hover.css:一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  4. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  5. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  8. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  9. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

随机推荐

  1. 《量化投资:以MATLAB为工具》连载(2)基础篇-N分钟学会MATLAB(中)

    http://www.matlabsky.com/thread-43937-1-1.html   <量化投资:以MATLAB为工具>连载(3)基础篇-N分钟学会MATLAB(下)     ...

  2. JAVA-JNI java程序调用c/c++程序

    目的:写c/c++函数,让java调用 java代码 1.创建HelloJNI.java文件->编写代码如下->cmd中javac HelloJNI.java获取HelloJNI.clas ...

  3. MySQL添加用户、删除用户与授权

    MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户 1.1 登录MYSQL: @>mysql -u root -p @&g ...

  4. C#数组的声明

    C#一维数组的声明方式 int[] myArray; string[] myStrArr; 但是在访问数组之前必须初始化. C#数组的初始化方式有两种,第一种是在声明数组的时候为数组的元素赋初值: i ...

  5. Windows Phone 十五、HttpWebRequest

    Windows 运行时中支持网络资源访问的对象:HttpWebRequest 对象 发送 GET/POST 请求,HttpHelper 封装,超时控制. HttpClient 对象 发送 GET/PO ...

  6. (转)How To Kill runaway processes After Terminating Concurrent Request

    终止EBS并发请求后,解锁相关的进程. 还有种方法可以在PLSQL->tools->session 中找到并且kill Every concurrent Request uses some ...

  7. https基础流程

    背景: https基于SSL,目的是保护http通信的过程,防止中间人篡改信息,或假冒服务端的问题.   要解决的问题: 1. 客户端如何证明是与正确的服务端进行通信 2. 客户端如何确认收到服务端的 ...

  8. 【转】PowerShell入门(十二):编写PowerShell管理单元和二进制模块

    转至:http://www.cnblogs.com/ceachy/archive/2013/03/13/PowerShell_SnapIn.html PowerShell一开始就提出利用管理单元来实现 ...

  9. GirdView 追忆学生时代的百思不得解

    临近年关,越多越多的园友开始了对工作.生活的总结,以及对来年目标的确立.这很励志,人是一根能思想的苇草,想来想去,我实在没什么惊天地.泣鬼神的英勇事迹,16年毕业季,按部就班的在时间的马车上颠簸,阅读 ...

  10. 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 ...