html做出文字凹凸效果,css3怎么实现字体凹陷凸出效果？（附代码）

本篇文章主要给大家介绍用css3实现字体凹陷或凸出效果的实现方法。

我们在设计网页时，常常会需要考虑到用户体验，那么足够美观的网页才能吸引住用户。为了让网页内容更加丰富好看，我们可能会使用ps做出很多特效，其实除了ps，利用css3属性也能制作出各种好看的特效。

下面我们就给大家介绍一个css3实现字体凹陷凸出的特效方法，也就是使字体有立体感。

css字体实现凹陷凸出即立体感的代码示例如下：

css3字体实现立体感

body {

background: gray;

}

h1 {

font-size: 200px;

color: gray;

text-shadow: 3px 3px 2px black,

-3px -3px 2px white; }

h1:hover {

text-shadow: 3px 3px 2px white,

-3px -3px 2px black;

}

PHP中文网

这里我们要对“PHP中文网”实现凹陷凸出的效果，并且使用了:hover 选择器。

:hover 选择器表示用于选择鼠标指针浮动在上面的元素。

最终此段代码效果如下图：

当鼠标移至文字上效果如下图，呈现字体凹陷效果：

当鼠标移开文字后效果如下图，呈现字体凸出效果：

这里主要用到了text-shadow属性。

text-shadow属性：为字体添加阴影, 可以通过对text-shadow属性设置相关的属性值，来实现一些需要的字体阴影效果,减少了图片的使用。

注：所有主流浏览器都支持 text-shadow 属性。但是Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

那么本篇文章就是关于css3实现字体凹陷及凸出的效果方法介绍，非常浅显易懂，希望对需要的朋友有所帮助！

html做出文字凹凸效果,css3怎么实现字体凹陷凸出效果？（附代码）相关推荐

html实现凹陷效果,css3怎么实现字体凹陷凸出效果？（附代码）
本篇文章主要给大家介绍用css3实现字体凹陷或凸出效果的实现方法. 我们在设计网页时,常常会需要考虑到用户体验,那么足够美观的网页才能吸引住用户.为了让网页内容更加丰富好看,我们可能会使用ps做出很多 ...
HTML文字阴影火焰,CSS3利用text-shadow属性实现多种效果的文字样式展现方法
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
php实现页面雪花效果,CSS3如何实现雪花飘落的效果
通过CSS3中的animation属性来设置动画名称,动画时间.速度以及动画是否循环播放来实现雪花飘落的效果今天将要分享的是利用CSS3中的animation属性来实现雪花飘落的效果,具有一定的参考 ...
html炫酷的导航栏效果,css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
css怎么设置图片卷角效果,CSS3 带分隔线卷角贴纸效果
CSS 语言: CSSSCSS 确定 body { padding-top: 2.5em; background-color: #666; color: #333; font-size: 84%; f ...
php 字体间距,深入理解CSS文字间距word-spacing与字符间距letter-spacing的不同（附代码）...
CSS 把"字(word)"定义为任何非空白符字符组成的串,并由某种空白字符包围.letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白. ...
html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面然后通过有过渡(trans ...

html做出文字凹凸效果,css3怎么实现字体凹陷凸出效果？（附代码）

html做出文字凹凸效果,css3怎么实现字体凹陷凸出效果？（附代码）相关推荐

最新文章

热门文章