如何利用CSS3制作3D效果文字具体实现样式

html-css087

如何利用CSS3制作3D效果文字具体实现样式,第1张

复制代码代码如下:.example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour]}译者注：X表示x轴上的位移，可为负值；Y表示y轴上的位移，可为负值；Blur表示投影的宽度，不能为负值；Color为投影的颜色。堆叠多层CSS投影虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果开始创建3D文字你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下：复制代码代码如下:h2{text-shadow:1px 1px 0 #CCC,2px 2px 0 #CCC, /* end of 2 level deep grey shadow */3px 3px 0 #444,4px 4px 0 #444,5px 5px 0 #444,6px 6px 0 #444/* end of 4 level deep dark shadow */}效果如下：好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。首先用transform属性实现滑过字体放大复制代码代码如下:h2:hover{/* CSS3 Transform Effect */-webkit-transform: scale(1.2)/* Safari &Chrome */-moz-transform: scale(1.2)/* Firefox */-o-transform: scale(1.2)/* Opera */}效果如下：然后利用transition属性实现淡入淡出效果复制代码代码如下:h2{/* CSS3 Transition Effect */-webkit-transition: all 0.12s ease-out/* Safari &Chrome */-moz-transition: all 0.12s ease-out/* Firefox */-o-transition: all 0.12s ease-out/* Opera */}到此，我们就用CSS3实现了3D效果的文字，并且在鼠标滑过是让字体放大，且有淡入淡出的效果，这一切是用纯CSS实现的哦。

[html] view plain copy

<div class="fancy">

<h2>

<span class="ribbon-center">50% OFF!</span>

</h2>

<p>

<img src="/uploads/160501/glass.jpg">

Check out these killer deals from Oakley!

Get an additional 50% off sale items for a limited time.

</p>

</div>

接下来给卡片和商品描述添加样式，来限定高宽和间距：

[css] view plain copy

.fancy {

width: 340px

margin: 20px auto 20px auto

background: #E7E7E7

padding: 15px

}

.fancy p {

padding-top: 10px

margin: 5px 0

line-height: 1.5

}

.fancy img {

width: 340px

}

blob.png

现在页面看起来像上面这样，接下来就是要给标签（h2元素）添加样式，一个是背景色，一个是左边的3D折纸效果。

折边效果其实就是给h2的左下角拼接一个三角形的元素，我们使用伪元素来实现，代码如下：

[css] view plain copy

.fancy h2 {

font-style: italyc

line-height: 1

padding: 5px 0

color: #FFF

margin: 0

width: 205px

left: -35px// 相对卡片向左偏移35px

background-color: #e54439

position: relative

z-index: 6

}

.fancy h2:after {// 定义一个斜三角形

content: ""

width: 0

height: 0

position: absolute

font-size: 0

line-height: 0

z-index: 5

border-top: 0 solid transparent

border-bottom: 15px solid transparent

bottom: -15px

}

.fancy h2:after {

border-right: 20px solid rgb(230, 107, 97)

left: 0

}

.fancy h2 .ribbon-center {

display: block

padding: 10px 0

background-color: #e54439

}

新建一个HTML文件粘过去:

<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="transform: rotate(360deg)">2D 旋转</p>

<p onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="transform: rotateY(180deg)">3D 旋转</p>

<style>

p {

margin: 12px 0 0 0

line-height: 150%

}

#rotate1, #rotatey1 {

border: 1px solid #000000

background: red

margin: 10px

opacity: 0.7

}

.animated_div {

width: 60px

height: 40px

color: #ffffff

position: relative

font-weight: bold

padding: 20px 10px 0px 10px

float: left

margin: 20px

margin-right: 50px

border: 1px solid #888888

-webkit-border-radius: 5px

-moz-border-radius: 5px

border-radius: 5px

font: 12px Verdana, Arial, Helvetica, sans-serif

line-height: normal

text-align: center

vertical-align: middle

}

#rotate1,#rotatey1 { border:1px solid #000000 background:red margin:10px opacity:0.7 }

</style>

<script><!--var x,y,n=0,ny=0,rotINT,rotYINTfunction rotateDIV(){x=document.getElementById("rotate1")clearInterval(rotINT)rotINT=setInterval("startRotate()",10)}function rotateYDIV(){y=document.getElementById("rotatey1")clearInterval(rotYINT)rotYINT=setInterval("startYRotate()",10)}function startRotate(){n=n+1x.style.transform="rotate(" + n + "deg)"x.style.webkitTransform="rotate(" + n + "deg)"x.style.OTransform="rotate(" + n + "deg)"x.style.MozTransform="rotate(" + n + "deg)"if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} }}function startYRotate(){ny=ny+1y.style.transform="rotateY(" + ny + "deg)"y.style.webkitTransform="rotateY(" + ny + "deg)"y.style.OTransform="rotateY(" + ny + "deg)"y.style.MozTransform="rotateY(" + ny + "deg)"if (ny==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} }}//--></script>