内容简介:写在前面:现在很多前端文章其实都是在讲js以及一些js框架的东西,但其实css3中有许多好玩的东西,可以为你的一些css组件添加一些亮色,这篇文章介绍了几个比较好玩的效果,希望有个抛砖引玉的效果1、css3D、动画基础知识预备
写在前面:现在很多前端文章其实都是在讲js以及一些js框架的东西,但其实css3中有许多好玩的东西,可以为你的一些css组件添加一些亮色,这篇文章介绍了几个比较好玩的效果,希望有个抛砖引玉的效果
一.3D风景动态骰子
1、css3D、动画基础知识预备
2、创建一个3D场景 先放置一个.box的div父容器,在box里放置一个.dice的div,然后在其里面放置6个div,分别表示骰子的6个面。
<div class="box"> <div class="dice"> <div class="surface front ">anyway style(text or img)</div> <div class="surface left">anyway style(text or img)</div> <div class="surface right">anyway style(text or img)</div> <div class="surface bottom">anyway style(text or img)</div> <div class="surface top">anyway style(text or img)</div> <div class="surface back">anyway style(text or img)</div> </div> </div> 复制代码
2、设置CSS样式
.dice { width:200px; height:200px; position:relative; margin:100px auto; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } 复制代码
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素,默认是其子元素不呈现3D效果,所以我们需要添加preserve-3d值,让其子元素保留其 3D 效果。 接下来,我们制作立方体的每一个面:
.face { position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #666; opacity: 0.8; font-size: 60px; text-align: center; line-height: 200px; font-weight: bold; color: #fff; border: 1px solid #fff; -webkit-transition: all .3s; transition: all .3s; } .face img { width: 100%; height: 100%; } .front { transform: rotateY(0) translateZ(100px); } .back { transform: translateZ(-100px) rotateY(180deg); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(90deg) translateZ(-100px); } 复制代码
在上面的代码中,我们使用transform的rotate()和translateZ()来转换每一面,平移都是宽度的一半。 要注意rotate()和translateZ()的顺序,顺序不同,转换的结果也会不一样,比如左侧.left这一面,在这里,我们是先绕着Y轴顺时针旋转90,然后再在Z轴的正方向平移150,如果你先平移后旋转,结果就不一样了,你可以试试。 最后,我们还给div.cude加上动画:
@-webkit-keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } 复制代码
二.图片倒影效果
1、box-reflect(方法一)
(1)使用box-reflect属性最容易实现图片倒影效果。
box-reflect属性介绍: box-reflect:<direction> <offset>? <mask-box-image>?
参数说明:
:表示倒影的方向,可能值:above、below、left、right(上下左右); :表示倒影与元素之间的间隔; :表示遮罩图像,可为url地址、渐变
(2) 具体代码
只需简单的放置一张图片:

(3)设置样式
直接使用box-reflect方法:
img { -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 20%, rgba(250, 250, 250, .3)); } 复制代码
在这个方法中,使用渐变来充当遮罩图像,效果如下图所示:
给box-reflec设置url属性可以用另一张图片来自定义倒影效果:
img { -webkit-box-reflect: below 0 url(images/star.png); } 复制代码
注意:由于box-reflect方法目前只有webkit引擎的浏览器才支持,所以考虑兼容性可以使用下面介绍的第二种方法
2、伪元素方法(方法二)
(1) 伪元素方法本质上是复制图片,结合 transform的用法然后翻转,最后一样是使用渐变来充当遮罩层,覆盖在翻转的图片之上。
(2) 具体代码
与第一种方式略有不同,这里用一个div包裹住图片:
<div class="box-reflect">  </div> 复制代码
(3)设置样式
先将图片克隆一份,然后翻转过来:
.box-reflect { position: relative; width: 150px; float: left; margin-right: 40px; } .box-reflect img { width: 100%; height: 100%; } .box-reflect:before { background: url(images/example.jpg) no-repeat; background-size: 100% 100%; transform: scaleY(-1); /*设置半透明增强倒影效果*/ opacity: 0.5; /*IE下设置透明*/。 filter: alpha(opacity='50'); } .box-reflect:before, .box-reflect:after { position: absolute; width: 100%; height: 100%; top: 100%; left: 0; content: ""; } 复制代码
注意:这里的transform:scaleY(-1)的作用与transform:rotateX(-180deg)等同,可联想一下transform:scaleX(-1)的效果
然后,添加一层渐变,让其覆盖在倒影的上面,渐变的值可根据实际效果调整:
.box-reflect:after { background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%); background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%); background-image: -webkit-linear-gradient(bottom,rgb(0,0,0) 20%,rgba(0,0,0,0) 90%); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000); } 复制代码
三.心跳效果
1.首先用css画出一个静态的红心
#heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } 复制代码
最后给这个红心增加动画即可
.heartbeat { -webkit-animation-name: heartbeat; -webkit-animation-duration: 0.83s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; } @keyframes heartbeat { from { opacity:0.1; } 50% { opacity:1; } to { opacity:0.1; } } 复制代码
四.3D按钮
1.创建div
放置一个要设置成3D按钮的元素,这里使用a标签:
<a href="#" class="3dButton">3dButton</a>
- 设置CSS样式
3D效果主要是依靠阴影(box-shadow)和新的颜色属性HSL来实现。 (1)box-shadow: h-shadow v-shadow blur spread color inset
h-shadow :必需。水平阴影的位置。允许负值。 v-shadow :必需。垂直阴影的位置。允许负值。 blur :可选。模糊距离。 spread :可选。阴影的尺寸。 color :可选。阴影的颜色。请参阅 CSS 颜色值。 inset:可选。将外部阴影 (outset) 改为内部阴影。
(2)HSL(H,S,L)。HSL色彩模式是工业界的一种颜色标准,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360 S:Saturation(饱和度)。取值为:0.0% - 100.0% L:Lightness(亮度)。取值为:0.0% - 100.0%
了解完基础知识后,下面就来看看3D按钮效果怎么实现。
box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, rgba(0, 0, 0, 0.2) 0 .5em 5px; 复制代码
如上代码所示,这里使用了5层阴影,1和2层是内阴影,这是为了实现上下两边光滑效果,你也可以去除这两个;第5层只是普通的阴影;第3层是为了更真实,可有可无;关键是第4层,实现类似于border的实投影。
为了更完美来按钮实现点击效果,这里主要是想让实阴影消失:
.button:active { box-shadow: inset rgba(255, 255, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.2) 0 -0.1em .3em, rgba(0, 0, 0, 0.4) 0 .1em 1px, rgba(0, 0, 0, 0.2) 0 .2em 6px; transform: translateY(.2em); } 复制代码
最后来个示例中按钮的风形形状效果,只有了解下border-radius的高级用法就可以了: border-radius: 1em 5em/5em 1em;
/的前后分别指的是水平半径和垂直半径。
五.渐变炫彩边框
1、html代码
<div class="gradient-border gradient-border-more"> <span></span>  </div> 复制代码
注意这里的span标签是这个效果的重点和技巧所在。
2、设置CSS样式
我们通过gradient-border和span的:before和:after伪元素来实现渐变边框。
.gradient-border { position:relative; width:200px; height:200px; background:gray; } .gradient-border:before, .gradient-border:after, .gradient-border span:first-child:before, .gradient-border span:first-child:after { content:""; position:absolute; background:red; -webkit-transition:all .2s ease; transition:all .2s ease; } /*上边边框*/ .gradient-border:before { width:0; // 初始宽度 top:-2px; right:0; height:2px; } /*右边边框*/ .gradient-border:after { width:2px; height:0; // 初始高度 right:-2px; bottom:0; } /*下边边框*/ .gradient-border span:first-child:before { width:0; // 初始宽度 height:2px; bottom:-2px; left:0; } /*左边边框*/ .gradient-border span:first-child:after { width:2px; height:0; // 初始高度 top:0; left:-2px; } 复制代码
这这个地方使用了.gradient-border里的:before和:after,以及span里的:before和:after制作了边框。
3、增加鼠标hover动画
鼠标移动上去的动画,原理是通过就是改变边框的宽高。
.gradient-border:hover:before, .gradient-border:hover span:first-child:before { width:calc(100% + 2px); } .gradient-border:hover:after, .gradient-border:hover span:first-child:after { height:calc(100% + 2px); } 复制代码
/*添加过渡延迟时间*/ .gradient-border-more:hover:before, .gradient-border-more:hover span:first-child:before { -webkit-transition-delay:.2s; transition-delay:.2s; } 复制代码
以上所述就是小编给大家介绍的《你不知道的css3(上) -- 用css3为你的组件添加风景》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 添加和删除props的react高阶组件
- KDE Frameworks 5.38.0 发布,添加新组件
- 谷歌官方Android应用架构库——添加组件到项目中
- mica 1.1.8 发布,添加分布式限流组件
- 【CuteJavaScript】Angular6入门项目(4.改造组件和添加HTTP服务)
- mica 2.1.0-GA 发布,mica-http 组件添加流上传
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Algorithms on Strings, Trees and Sequences
Dan Gusfield / Cambridge University Press / 1997-5-28 / USD 99.99
String algorithms are a traditional area of study in computer science. In recent years their importance has grown dramatically with the huge increase of electronically stored text and of molecular seq......一起来看看 《Algorithms on Strings, Trees and Sequences》 这本书的介绍吧!