产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 开发与运维 文章 正文

js css 悬浮动画字体

2023-05-17 46
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js css 悬浮动画字体
+关注继续查看
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="./myStyle.css">
        <link rel="stylesheet" href="animate.min.css">
        <script src="./jquery-3.1.1.min.js"></script>
        <script src="./wow.min.js"></script>
    </head>
    <body>
        <div class="sidbar">
            <!-- 挂件 -->
            <details class="open">
                <summary>
                    <span></span>
                    <span></span>
                    <span></span>
                </summary>
            </details>
            <ul class="menu tupCass">
                <li class="htmlspan">
                </li>
                <!-- <li class="htmlspan">
                    
                </li>
                <li class="htmlspan">
                    
                </li>
                <li class="htmlspan">
                    
                </li> -->
            </ul>
        </div>
        <script type="text/javascript">
            var wow = new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            });
            
            let open = document.querySelector(".open")
            let sidbar = document.querySelector(".sidbar")
            let isOpen = false
            open.onclick = () => {
                wow.init();
                if (isOpen == true) {
                    sidbar.classList.remove('sidbar-avtive')
                    open.classList.remove('active')
                } else {
                    sidbar.classList.add('sidbar-avtive')
                    open.classList.add('active')
                }
                isOpen = !isOpen
                var span_text = "abcdepoijhtydqq"
                dongHua(span_text)
            }
            function dongHua(span_text) {
                let l = span_text.length
                let sz = 0
                let init = 0
                if (l % 2) { //奇数
                    sz = Math.floor(l / 2) //商
                    init = 0
                } else { //偶数
                    sz = l / 2
                    init = 1
                }
                let arr = []
                let span_html = '';
                for (let i = init; i <= sz; i++) {
                    //奇数
                    let zarr = []
                    if (l % 2) {
                        if (i == init) {
                            span_html = `<span class="id${i}">${span_text[sz]}</span>`
                            console.log("span_html", span_html)
                            zarr.push(span_html)
                            // zarr.push({
                            //  htmlName:a[sz],
                            //  id:`id${i}`
                            // })
                            // `id${i}`
                        } else {
                            span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
                            zarr.push(span_html)
                            span_html = `<span class="id${i}">${span_text[sz+i]}</span>`
                            zarr.push(span_html)
                            // $(".htmlspan").html(span_html)
                            // $(".htmlspan").html(span_html1)
                            // zarr.push({
                            //  htmlName:[sz-i],
                            //  id:`id${i}`
                            // })
                            // zarr.push({
                            //  htmlName:a[sz+i],
                            //  id:`id${i}`
                            // })
                        }
                    } else {
                        if (i == init) {
                            // zarr.push({
                            //  htmlName:a[(sz-i)],
                            //  id:`id${i-1}`
                            // })
                            // zarr.push({
                            //  htmlName:a[(sz)],
                            //  id:`id${i-1}`
                            // })
                            span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
                            zarr.push(span_html)
                            span_html = `<span class="id${i}">${span_text[sz]}</span>`
                            zarr.push(span_html)
                        } else {
                            // zarr.push({
                            //  htmlName:a[(sz-i)],
                            //  id:`id${i-1}`
                            // })
                            // zarr.push({
                            //  htmlName:a[(sz+i-1)],
                            //  id:`id${i-1}`
                            // })
                            span_html = `<span class="id${i}">${span_text[sz-i]}</span>`
                            zarr.push(span_html)
                            span_html = `<span class="id${i}">${span_text[sz+i-1]}</span>`
                            zarr.push(span_html)
                        }
                    }
                    arr.push(zarr)
                    // arr.push(zarr)
                }
                console.log("arr", arr)
                var newArr = []
                for (let index = 0; index < arr.length; index++) {
                    if (index == 0) {
                        newArr.push(arr[index][0])
                    } else {
                        newArr.unshift(arr[index][0])
                        newArr.push(arr[index][1])
                    }
                }
                console.log("newArr", newArr)
                // for (let j = 0; j < newArr.length; j++) {
                //  span_html += newArr[j]
                //  console.log("span_html",span_html)
                // }
                span_html = newArr.join('')
                $(".htmlspan").html(span_html)
                setTimeout(() => {
                    for (let i = 0; i <= sz; i++) {
                        console.log("i", i)
                        setTimeout(() => {
                            let a = document.querySelectorAll(`.id${i}`)
                            console.log(a)
                            if (i == 0) {
                                a[0].style.transform = "translateY(-150px)"
                                a[0].style.transition = "all 1s"
                            } else {
                                a[0].style.transform = "translateY(-150px)"
                                a[0].style.transition = "all 1s"
                                a[1].style.transform = "translateY(-150px)"
                                a[1].style.transition = "all 1s"
                            }
                        }, 50 * i)
                    }
                }, 100)
            }
            $(".menu >li").hover(function() {
                var span_text = "abcdepoijhtydqq"
                let l = span_text.length
                let sz = 0
                let init = 0
                sz = Math.floor(l / 2) //商
                for (let i = 0; i <= sz; i++) {
                    console.log("i", i)
                    setTimeout(() => {
                        let a = document.querySelectorAll(`.id${i}`)
                        console.log(a)
                        if (i == 0) {
                            a[0].style.transform = "translateY(-300px)"
                            a[0].style.transition = "all 1s"
                        } else {
                            a[0].style.transform = "translateY(-300px)"
                            a[0].style.transition = "all 1s"
                            a[1].style.transform = "translateY(-300px)"
                            a[1].style.transition = "all 1s"
                        }
                    }, 50 * i)
                }
            }, function() {
                var span_text = "abcdepoijhtydqq"
                let l = span_text.length
                let sz = 0
                let init = 0
                sz = Math.floor(l / 2) //商
                for (let i = 0; i <= sz; i++) {
                    console.log("i", i)
                    setTimeout(() => {
                        let a = document.querySelectorAll(`.id${i}`)
                        console.log(a)
                        if (i == 0) {
                            a[0].style.transform = "translateY(-150px)"
                            a[0].style.transition = "all 1s"
                        } else {
                            a[0].style.transform = "translateY(-150px)"
                            a[0].style.transition = "all 1s"
                            a[1].style.transform = "translateY(-150px)"
                            a[1].style.transition = "all 1s"
                        }
                    }, 50 * i)
                }
            })
            // $(".menu >li").mouseleave(function(){
            //  var span_text = "abcdepoijhtydqq"
            //  let l = span_text.length
            //  let sz = 0
            //  let init = 0
            //  sz = Math.floor(l/2) //商
            //  for (let i = 0; i <= sz; i++) {
            //              console.log("i",i)
            //              setTimeout(()=>{
            //                  let a = document.querySelectorAll(`.id${i}`)
            //                  console.log(a)
            //                  if(i == 0){
            //                      a[0].style.transform = "translateY(-300px)"
            //                      a[0].style.transition = "all 1s"
            //                  }else{
            //                      a[0].style.transform = "translateY(-300px)"
            //                      a[0].style.transition = "all 1s"
            //                      a[1].style.transform = "translateY(-300px)"
            //                      a[1].style.transition = "all 1s"
            //                  }
            //              },50*i)
            //          }
            // })
        </script>
    </body>
</html>
body,//myStyle 文件夹
div,
dl,
dt,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
a {
    text-decoration: none;
}
/*                            图片居中显示 */
img,
input,
button {
    border: none;
    vertical-align: middle;
}
/* 单行省略 */
.row {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 2行省略 */
.row2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 3行省略 */
.row3 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* 4行省略 */
.row4 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
/* 3行省略 */
.row5 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/* 3行省略 */
.row6 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}
/* 7行省略 */
.row7 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}
.font15 {
    font-size: 0.9375rem !important;
}
.font18 {
    font-size: 1.125rem !important;
}
.font20 {
    font-size: 1.25rem !important;
}
.font25 {
    font-size: 1.5625rem !important;
}
/* 转大写 */
.tupCass {
    text-transform: uppercase;
}
.min1200 {
    min-width: 1200px;
}
details {
    width: 25px !important;
    height: 20px !important;
    margin-right: 20px;
}
details summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    width: 100%;
    height: 100%;
}
summary span {
    display: block;
    width: 100%;
    height: 5px;
    background-color: #FFFFFF;
    transition: 0.3s;
    position: absolute;
}
summary span:first-child {
    top: 0;
}
summary span:nth-child(2) {
    top: calc(50% - 2.5px);
}
summary span:last-child {
    bottom: 0;
}
details[open] span:nth-child(2) {
    display: none;
}
details[open] span:first-child {
    top: calc(50% - 2.5px);
    transform: rotate(-45deg);
    transform-origin: center;
}
details[open] span:last-child {
    bottom: calc(50% - 2.5px);
    transform: rotate(45deg);
    transform-origin: center;
}
header {
    position: relative;
}
datalist[open]+nav {
    overflow: auto;
}
body,html{
    width: 100vw;
    height: 100vh;
    background-color: #272822;
}
.sidbar{
    width: 100%;
    height: 100%;
    background: #ffc324;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    padding-top: 100px;
    transition: all .5s;
    left: 100%;
    /* left: 0; */
}
.sidbar-avtive{
    left: 0;
}
.open{
    position: fixed;
    right: 15px;
    top: 15px;
}
.active{
    color: #007AFF;
}
.menu li{
    /* width: 500px; */
    height: 100px;
    overflow: hidden;
    border: 1px solid #000000;
    position: relative;
    color: #000000;
    display: flex;
    font-weight: bold;
    font-size: 7.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    /* margin-bottom: 8px; */
    transition: all .3s;
    line-height: 80px;
}
.menu li span{
    
    margin-top: 300px;
    
    /* transform: translateY(-150px); */
}
.curts{
    background-color: #FFFFFF;
    color: #000000;
    
    cursor: pointer;
}
/* .menu >.curts,
.menu >li:hover{
    color: #FFFFFF;
    font-size: 6.875rem;
    cursor: pointer;
} */

1.jpg

文章标签：
JavaScript
前端开发
关键词：
CSS字体
JavaScript字体
JavaScript CSS
CSS js
CSS动画
游客5iyiu2o7vjvko
目录
相关文章
兜里只有三分钱~
|
5天前
|
前端开发
css字体渐变色
css字体渐变色
兜里只有三分钱~
9 0
兜里只有三分钱~
|
6天前
|
前端开发
css字体模糊，多重边框demo效果示例（整理）
css字体模糊，多重边框demo效果示例（整理）
兜里只有三分钱~
8 0
CaptainDrake
|
9天前
|
Web App开发 前端开发 JavaScript
CSS基础：基础选择器、字体和文本样式
CSS基础：基础选择器、字体和文本样式
CaptainDrake
11 0
~black-
|
30天前
|
前端开发 JavaScript
HTML&CSS Day03 CSS字体及文本样式
HTML&CSS Day03 CSS字体及文本样式
~black-
25 0
邹邹很busy。
|
1月前
|
前端开发
css--字体和文本样式
css--字体和文本样式
邹邹很busy。
20 0
天玄TX
|
1月前
|
前端开发 安全 UED
CSS——字体选择
CSS——字体选择
天玄TX
48 0
萝卜头不吃萝卜头
|
2月前
|
前端开发
css字体缩放
大家好，本章的主要内容就是如何让字体缩放。 一些浏览器都会有字体的最小值，比如谷歌的最小值是12px，当字体设置超过浏览器最小值font-size不起作用时就使用下面这个方法：
萝卜头不吃萝卜头
34 0
DCodes
|
3月前
|
前端开发
css实现霓虹灯特效字体
css实现霓虹灯特效字体
DCodes
37 0
yma16
|
3月前
|
前端开发
css的字体正片叠底和发光效果
css的混合模式
yma16
93 0
祁符建
|
4月前
|
前端开发 开发者
前端祖传三件套CSS的CSS3新特性之文本和字体
在现代的前端开发中，CSS3已经成为了很多前端开发者必备的技能之一。其中，CSS3提供了丰富的新特性，其中包括了文本和字体相关的新特性。本文将为大家介绍CSS3中与文本和字体相关的新特性，包括字体选择器、文本样式属性等。
祁符建
42 0
热门文章
最新文章
1
一篇文章带你学完JavaScript基础知识，超全的JavaScript知识点总结
2
Python爬虫抓取经过JS加密的API数据的实现步骤
3
[JavaScript] 从数组中删除特定元素
4
推荐前 6 名 JavaScript 和 HTML5 游戏引擎
5
js 面向对象封装与继承 COPY
6
Bootstrap框架（JavaScript组件）上
7
小白笔记——vue全局组件注册和全局js引入
8
前端——JavaScript获取系统时间以及通过ajax获取服务器时间
9
如何利用JS获取当前具体日期时间与获取前一天日期时间
10
JavaScript传参的6种方式
1
CSS属性模糊匹配
121
2
一些常用但是不好记的css样式
8
3
css flex布局
5
4
html和css进阶小练习
8
5
html和css进阶
12
6
HTML和css入门作业
10
7
css实现容器垂直水平居中的七中方法
9
8
css设置数组最后2个没有下边框效果(demo)整理
8
9
CSS基础教程
44
10
css三角号旋转90度，上下移动动画效果demo效果（整理）
9
相关产品
云迁移中心
文档详情 产品详情
相关课程
更多
前端开发CSS基础 零基础学前端HTML+CSS JavaScript 自学手册文档教程 JavaScript入门与实战 CSS 快速掌握
相关电子书
更多
JavaScript函数 JavaScript异步编程 Delivering Javascript to World
相关实验场景
更多
前端开发基础3：CSS3常见显示属性 Html5和Webpack2：Webpack5打包JS和样式表 CSS实现樱花特效 CSS实现千纸鹤样式 CSS实现指南针应用 CSS基础教程
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
阿里云函数计算 GPU 宣布降价，最高幅度达 93%，阶梯计费越用越便宜！