- CSS3 border-image-repeat 属 11-25
- css3属性(transform)的一个css3动画 11-25
- css3重复渐变效果 11-25
- CSS3 text-wrap 属性 11-25
- CSS3选择器(:nth) 11-25
- CSS3 overflow-x 属性 11-25
- CSS3 column-gap 属性 11-25
- css3实现加载动画效果 11-25
- css3 属性实现画动态搞笑动画 11-25
- 「CSS3 」动画详解 11-25
CSS3 border-image-repeat 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置重复图像的方式:
div {
border-image-source: url(border.png);
border-image-repeat: repeat;
}
定义和使用
border-image-repeat 属性用于图像边界是否应重复(repeated)、拉伸(stretched)或铺满(rounded)。
提示:你可以查看 border-image 属性 (简写属性用于设置所有 border-image-* 属性)。
默认值:stretch继承性:no动画:no. 查看 animatable版本:CSS3JavaScript 语法:object.style.borderImageRepeat="round"尝试一下效果说明:当鼠标移到a标签的时候,从右上角滑出二维码。
实现方法:
HTML 代码如下:
需要说明的一点是,a链接的跳转需要用javascript拦截,就这一句。
2、需要注意的几个点:
二维码是HTML上没有,需要用css的伪类和css背景实现。
隐藏使用css属性:透明度为0和scale为0;
当鼠标移动到a链接上时候出现,需要设置a:hover
3、CSS3代码:
为了让二维码图片,位置固定,需要先设置父元素为相对定
css3重复渐变效果
发布者: superzhang | 发布时间:2017-11-25css3重复渐变 repeating gradient即重复让线性渐变(linear-gardient)或者径向渐变(radial-gradient)重复执行。
用法是repeating-linear-gradient(重复线性渐变)和repeating-radial-gradient(重复径向渐变)
1、重复径向渐变
图1
图1实现代码:
background: -webkit-repeating-radial-gradient(#ff0, #ff0 5px, #f00 5px, #f00 10px);
2、重复线性渐变
浏览器支持
CSS3选择器(:nth)
发布者: superzhang | 发布时间:2017-11-25首先第一个网站
https://css-tricks.com/examples/nth-child-tester/
这个学习css3的选择器简单明了,想研究的可以看看哈
接下来第二个网站
http://lea.verou.me/demos/nth.html
由于两个网站都是英文的,对于不会英文的可能敬而远之,如果你用的谷歌浏览器(这里只介绍这款浏览器),可以安装百度翻译的扩展插件来翻译,如果你有更好的翻译插件那就忽略上面的,这款插件百度翻译官网有下载,想要的也只可以找我索要
关于CSS3的所有的选择符,可以参考网站: http://www.w3school.com.cn/cssref/css_se
CSS3 overflow-x 属性
发布者: superzhang | 发布时间:2017-11-25实例
如果它溢出了元素的内容区-剪辑div元素的左/右边缘内容:
div
{
overflow-x:hidden;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性overflow-x4.09.08.0 -ms-3.53.09.5属性定义及使用说明
overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。
提示: 使用overflow-y属性来判断顶部和底部边缘是否裁剪。
CSS3 column-gap 属性
发布者: superzhang | 发布时间:2017-11-25实例
指定列之间的40个像素的差距:
div
{
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
}
浏览器支持
属性column-gap50.04.0 -webkit-10.02.0 -moz-9.03.1 -webkit-37.015.0 -webkit11.1属性定义及使用说明
column-gap的属性指定的列之间的差距。
注意: 如果指定了列之间的距
css3实现加载动画效果
发布者: superzhang | 发布时间:2017-11-25css3实现加载动画效果,运用到了CSS3的动画过渡效果,适合用在一些等待刷新的页面!
效果如下:
具体代码实现
html:
css:
css3 属性实现画动态搞笑动画
发布者: superzhang | 发布时间:2017-11-25css3 属性实现画动态搞笑动画
利用工作之余,可以用学过的知识,写一些好玩的效果
鼠标移上去后:
代码
html:
@keyframes
定义动画各个阶段的状态的代码段。比如开始态,结束态,中间态(使用百分比表示)。
animation-name
使用 @keyframes 定义的状态集合名称,如上面的 exampleName。
<