contenteditable 是一个枚举属性,表示元素是否可被用户编辑。如果可以,浏览器会修改元素的组件以允许编辑。
投影效果:
- -webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
-
-webkit-box-reflect属性提供元素倒影:
linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型,是一种特别的image数据类型。
transparent:透明。
英文字母转为大写样式
- text-transform: uppercase;
-
自定义属性 --c,可通过 var 函数对其调用
- --c:lightseagreen;
-
调用自定义属性–c,设置文字阴影(发光效果)
- text-shadow: 0 0 10px var(--c),
- 0 0 20px var(--c),
- 0 0 40px var(--c),
- 0 0 80px var(--c),
- 0 0 160px var(--c);
-
执行动画:动画名 时长 线性的 无限次播放
- animation: animate 5s linear infinite;
-
定义动画
- @keyframes animate{
- to{
- /* 色相旋转过滤镜(设置度数可改变颜色) */
- filter: hue-rotate(360deg);
- }
- }
-
新建一个后缀为 HTML 的文件,然后把下面的代码复制进去,然后双击打开。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- *{
- /* 初始化 */
- margin: 0;
- padding: 0;
- }
- body{
- /* 100% 窗口高度 */
- min-height: 100vh;
- width: 100%;
- /* 弹性布局 水平+垂直居中 */
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #06252e;
- }
- .box{
- width: 100%;
- /* 投影效果 */
- -webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
- }
- h1{
- color: #fff;
- font-size: 96px;
- /* 字间距 */
- letter-spacing: 15px;
- /* 转大写 */
- text-transform: uppercase;
- text-align: center;
- line-height: 76px;
- outline: none;
- /* 自定义属性 --c,可通过 var 函数对其调用 */
- --c:lightseagreen;
- /* 调用自定义属性--c,设置文字阴影(发光效果) */
- text-shadow: 0 0 10px var(--c),
- 0 0 20px var(--c),
- 0 0 40px var(--c),
- 0 0 80px var(--c),
- 0 0 160px var(--c);
- /* 执行动画:动画名 时长 线性的 无限次播放 */
- animation: animate 5s linear infinite;
- }
- /* 定义动画 */
- @keyframes animate{
- to{
- /* 色相旋转过滤镜(设置度数可改变颜色) */
- filter: hue-rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <div class="box">
- <h1 contenteditable="true">hello</h1>
- </div>
- </body>
- </html>
-
以上就是 基于 HTML5+CSS3 制作的小实例:炫彩的发光字特效,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。