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 ...
随机推荐
- ios下fixed回复框bug的解决方案
前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...
- android案例一 电话拨号器
效果图: 电话拨号器的核心原理: 意图 MainActivity代码: private EditTest et_number; //加载一个布局 setContentView(R.l ...
- eclipse设置汉化
1. 打开eclipse->help->install new software 2. 打开http://www.eclipse.org/babel/downloads.php,,,找到相 ...
- 真正shopex分销王2代DRP系统源码正版安装版本终身商业授权
真正ShopEx分销王系统2代正版授权.该商业程序已经完整授权,已测试100%完整能用.很多朋友来问是否免费版的源码?错,这是和官方一样的平台版本,100%无限制功能使用,跟官方付费使用的授权版一样. ...
- 我的第一个开源项目-logger4Net
学会学习,学会分享,学会创造. 这我的第一个开源项目.以前总觉得开源离自己很远,但通过不断学习发现,其实自己已经走在这条路上.思想就在那,只要懂得学习,懂得分享,就会懂享受创造的快乐感与殷实感. 没做 ...
- newtonsoft.json 序列化,反序列化
public class Book { public string BookID { get; set; } public DateTime PublishDate { get; set; } pub ...
- iOS8.3发布了Swift 1.2带来哪些新变化
苹果前几日在面向开发者推送iOS 8.3 Beta的同时,还发布了版本号为6D520o的Xcode 6.3 Beta,其中便包含了iOS 8.3 Beta和OS X v10.10 SDK,并进一步提升 ...
- Good Bye 2015 D. New Year and Ancient Prophecy
D. New Year and Ancient Prophecy time limit per test 2.5 seconds memory limit per test 512 megabytes ...
- AC6102 开发板千兆以太网UDP传输实验2
AC6102 开发板千兆以太网UDP传输实验 在芯航线AC6102开发板上,设计了一路GMII接口的千兆以太网电路,通过该以太网电路,用户可以将FPGA采集或运算得到的数据传递给其他设备如PC或服务器 ...
- 数据结构 B-树和B+树的应用:数据搜索和数据库索引
B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点 ...