如何使用CSS3创建3D文字效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用CSS3创建3D文字效果相关的知识，希望对你有一定的参考价值。
参考技术A 新建html文档，粘贴以下代码，保存后用浏览器打开，可以看到效果<!doctype html><link href='http://fonts.googleapis.com/css?family=Ultra&v2' rel='stylesheet' type='text/css'><style>bodybackground:#333;h1font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px; -moz-animation: 1s slidein; -webkit-animation: 1s slidein; -webkit-perspective: 600; -moz-perspective: 600px;@-moz-keyframes slidein from top:1550px; 85% top:5px; to top:85px;@-webkit-keyframes slidein from top:1550px; 85% top:5px; to top:85px;.myLogo,.myLogo a -moz-transition: all 2s ease-in-out 0s; -webkit-transition:all 2s ease-in-out 0; transition:all 2s ease-in-out 0;.myLogoposition:relative;display:inline-block;zoom:1;top:0;left:0;text-shadow:-2px -1px 1px #7e9409;opacity: 0.8;filter:alpha(opacity=50); -webkit-transform: rotateY(30deg); -moz-transform: rotateY(30deg); transform: rotateY(30deg);h1:hover .myLogo /* 3d-transform */ -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); text-shadow:0;.myLogo aposition:absolute;top:1px;left:5px;color:#B7D902;text-shadow:-1px -1px 1px #fff;text-decoration: none;h1:hover .myLogo aleft: 2px;</style> <h1> <span class="myLogo">百度经验分享 CSS3 3D效果</span></h1> 参考技术B Wow!It's so heavy Lulu tried several times,
CSS实现图片悬停文字叠加效果
引言
在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。
编写HTML
我们的 html 代码非常简单，只有几行：
<div class="image">
<img class="image__img" src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg"
alt="Bricks">
<div class="image__overlay">
<div class="image__title">Ocean</div>
<p class="image__description">
Enjoy the blue color of ocean.
</p>
</div>
</div>
在顶部有一个img类的div，它是最大的容器。然后在其内部给要渲染的图像设置类名image__img; 同级还有一个类名为image__overlay的div，是用于鼠标悬停时显示的，在这里面，我们可以把任何文本相关的东西覆盖在原图之上
编写CSS｜创建实际效果
首先我们对 image__img 做一些基本的样式设置
.image__img
display: block;
width: 100%;
height: 100%;
background-size: cover;
我们再设置父元素的相对定位，以及 image__overlay 的绝对定位属性，然后将 image__overlay 的 top 和 left 设为 0，并将宽高设为 100%，即与父容器重叠。同时设置一下黑色背景色以及透明度，做一个隐约的效果。最后设置一下动画过度效果transition，以及一些想要的字体相关的css属性，这里大家可以自行调整
.image
position: relative;
width: 30%;
.image__overlay
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
现在是最重要的部分，如果我们鼠标离开，则看不到;鼠标放上去，则能看到。所以设置默认的透明度为 0，hover时，透明度为 1
// at start
.image__overlay
opacity: 0;
// on hover
.image__overlay:hover
opacity: 1;
就是这么简单，我们已经完成了图像悬停文本叠加效果。我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。我们只需要将以下简单的类添加到 css 中，然后将他们添加到类名为 image__overlay 的 div 元素中即可
.image__overlay--blur
backdrop-filter: blur(5px);
.image__overlay--solid
background: #c51f5d;
就这么简单。我们用这样的代码创建了三个很酷的 CSS Hover 效果。希望这对你有帮助。
强烈推荐
给你们推荐一下我的个人博客，拥有大量优质文章、面试宝典、算法精选，欢迎访问~
以上是关于如何使用CSS3创建3D文字效果的主要内容，如果未能解决你的问题，请参考以下文章