html+css实现文字折叠特效实例


Posted in HTML / CSS onJune 02, 2021

本文主要介绍了html+css实现文字折叠特效实例,分享给大家,具体如下:

效果:

html+css实现文字折叠特效实例

实现:

1. 定义标签:

<h1>aurora</h1>

2. 设置文字基本样式:

h1{
             text-transform: uppercase;
             letter-spacing: 3px;
             font-size: 15vw;
             transform: rotate(-10deg) skew(30deg);
             position: relative;
             color: rgba(0, 101, 253, 0.6);
             -webkit-text-stroke: 2px  rgba(0, 101, 253, 0.6);
             transition: all 1s; 
         }

text-transform: uppercase; 字母变为大写字母。
letter-spacing: 3px; 字间距。
transform: rotate(-10deg) skew(30deg); 先旋转-10deg,再倾斜30deg。
-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6); 文字边框 详细
transition: all 1s; 过渡效果

3. 鼠标经过文字显示内陷效果:

h1:hover{
           /*   先叠层白的,再叠层黑的,先叠的白会覆盖到黑,白的地方亮,黑的地方暗 */
            text-shadow:3px 3px 6px #fff,
            3px 3px 6px #fff,
            0 0 0px #000;           
         }

主要是利用阴影先叠层白的阴影,再在白的后面叠层黑的阴影,这样一来,白的地方发亮,黑的地方暗,形成内陷效果。

4. 用双伪类实现文字的上半部分,(注:双伪类会继承父元素的些css属性):

h1::before{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(0 0 50% 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg);       

         }

position: absolute;
top: 0;
left: 0; 定位。
clip-path: inset(0 0 50% 0); 裁剪,只裁文字的上半部分显示。
transform: rotateX(0deg) skew(0deg); 暂时不旋转,不倾斜。

5. 鼠标经过文字上半部分文字折叠:

h1:hover::before{
            transform: rotateX(-30deg) skew(-30deg); 
           color: rgb(243, 243, 243);
           text-shadow: 0 0 1px black;
            
         }

transform: rotateX(-30deg) skew(-30deg); 旋转-30deg,倾斜-30deg。
color: rgb(243, 243, 243); 颜色变暗点。
text-shadow: 0 0 1px black; 阴影。
6. 异曲同工,设置下半部分:

h1::after{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(50% 0 0 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg); 
            
         }
         h1:hover::after{
            transform: rotateX(40deg) skewX(20deg) ;
            color: rgb(212, 212, 212);
            text-shadow: 0 0 1px black;
         }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }   
  
         h1{
             text-transform: uppercase;
             letter-spacing: 3px;
             font-size: 15vw;
             transform: rotate(-10deg) skew(30deg);
             position: relative;
             color: rgba(0, 101, 253, 0.6);
             -webkit-text-stroke: 2px  rgba(0, 101, 253, 0.6);
             transition: all 1s; 
         }
         h1:hover{
           /*   先叠层白的,再叠层黑的,先叠的白会覆盖到黑,白的地方亮,黑的地方暗 */
            text-shadow:3px 3px 6px #fff,
            3px 3px 6px #fff,
            0 0 0px #000;           
         }
         h1::before{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(0 0 50% 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg);       

         }
         h1:hover::before{
            transform: rotateX(-30deg) skew(-30deg); 
           color: rgb(243, 243, 243);
           text-shadow: 0 0 1px black;
            
         }
         h1::after{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(50% 0 0 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg); 
            
         }
         h1:hover::after{
            transform: rotateX(40deg) skewX(20deg) ;
            color: rgb(212, 212, 212);
            text-shadow: 0 0 1px black;
         }
    </style>
</head>
<body>
   
    <h1>aurora</h1>

</body>
</html>

到此这篇关于html+css实现文字折叠特效实例的文章就介绍到这了,更多相关html+css文字折叠内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
详解CSS故障艺术
HTML中的表单Form实现居中效果
May 25 #HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
You might like
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python实战之制作天气查询软件
2019/05/14 Python
django如何实现视图重定向
2019/07/24 Python
爱岗敬业演讲稿
2014/05/05 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
少先队中队工作总结
2015/08/14 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python