css 与 html5

corn6

已于 2022-03-25 19:26:57 修改

阅读量107

点赞数

分类专栏： vue 文章标签： css html5 css3

于 2021-11-28 15:22:53 首次发布

本文链接：https://blog.csdn.net/corn6/article/details/121590329

版权

vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

折叠隐藏文字

快捷键：span*6，然后敲一个tap键，会生成6个span标签
写业务style之前，需要先清除style的内置样式
也就是在style里面写上* {margin: 0;padding: 0;}
注意body的height:100vh;不要写100%
弹性盒子能使子元素垂直居中的条件：弹性盒子本身具备高度
使用>直接控制子元素，而不会影响到孙元素

body {
            background-color:#003a8c;
            width: 100%;
            height: 100vh;
            display: flex;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>被折叠隐藏的字符</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color:#003a8c;
            width: 100%;
            height: 100vh;
            display: flex;
        }
        #char1 {
            /* width: 100px;
            height: 100px; */
            background-color: #fadb14;
            margin: auto;
            border-radius: 85px;
            padding: 0 50px;
        }
        .my-span {
            font-size: 130px;
            color: #fff;
            /* 把span改为行内块元素，才可以改变其宽度 */
            display: inline-block;
            /* 给变化的span添加动画效果 */
            transition: 1s;
        }
        /* 隐藏字母的样式 */
        .my-hide {
            opacity: 0;
            width: 0;
        }
        /* 使用>直接控制子元素，而不会影响到孙元素 */
        /* 当鼠标悬浮在div上的时候，显示隐藏的span标签 */
        #char1:hover>span.my-hide {
            opacity: 1;
            /* width: auto; */
            /* 过渡动画的实现条件:宽度确定 */
            width: 70px;
        }
    </style>
</head>
<body>
    <div id="char1">
        <span class="my-span">J</span>
        <span class="my-span my-hide">a</span>
        <span class="my-span my-hide">v</span>
        <span class="my-span my-hide">a</span>
        <span class="my-span">E</span>
        <span class="my-span my-hide">E</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>被折叠隐藏的字符</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .char1 {
            /* width: 100px;
            height: 100px; */
            background-color: #fadb14;
            margin: auto;
            border-radius: 85px;
            padding: 0 50px;
        }
        .my-span {
            font-size: 130px;
            color: #fff;
            /* 把span改为行内块元素，才可以改变其宽度 */
            display: inline-block;
            /* 给变化的span添加动画效果 */
            transition: 1s;
        }
        /* 隐藏字母的样式 */
        .my-hide {
            opacity: 0;
            width: 0;
        }
        /* 使用>直接控制子元素，而不会影响到孙元素 */
        /* 当鼠标悬浮在div上的时候，显示隐藏的span标签 */
        .char1:hover>span.my-hide {
            opacity: 1;
            /* width: auto; */
            /* 过渡动画的实现条件:宽度确定 */
            width: 100px;
        }
        .my-div-top {
            width: 100%;
            height: 50vh;
            background-color:#003a8c;
            display: flex;
        }
        .my-div-bottom {
            width: 100%;
            height: 50vh;
            background-color:#003a8c;
            display: flex;
        }
        /* 写死div宽度，避免发生变化，影响其他布局 */
        .my-fix-width {
            width: 580px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="my-div-top">
        <div class="char1">
            <span class="my-span">C</span>
            <span class="my-span my-hide">O</span>
            <span class="my-span my-hide">R</span>
            <span class="my-span my-hide">N</span>
            <span class="my-span">6</span>
        </div>
        <div class="char1">
            <span class="my-span">C</span>
            <span class="my-span my-hide">O</span>
            <span class="my-span my-hide">R</span>
            <span class="my-span my-hide">N</span>
            <span class="my-span">6</span>
        </div>
    </div>
    <div class="my-div-bottom">
        <div class="char1 my-fix-width">
            <span class="my-span">C</span>
            <span class="my-span my-hide">O</span>
            <span class="my-span my-hide">R</span>
            <span class="my-span my-hide">N</span>
            <span class="my-span">6</span>
        </div>
    </div>
</body>
</html>

发光复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100vh;
            background-color: #fa8c16;
            display: flex;
        }
        .my-checkbox {
            display: block;
            width: 200px;
            height: 80px;
            margin: auto;
            /* 去掉复选框的显示效果 */
            -webkit-appearance: none;
            -moz-appearance: none;
            /* 去掉复选框的边框 */
            outline: none;
            border: 5px solid #888888;
            /* 宽高里较小值的一半 */
            border-radius: 40px;
            background: linear-gradient(to bottom, #5B5B5B, #F0F0F0);
            /* 可以在控制台调整参数值，第一个参数是阴影在x方向上的偏移，第二个参数是y方向偏移 */
            /* 添加第二个阴影，只需要加一个逗号 */
            /* 第一个参数设置为inset，变为内阴影 */
            box-shadow: 8px 6px 20px #888888, inset 5px -5px 30px #333333;
            /* 父元素相对定位：参考元素之前的位置，进行偏移 */
            /* 只设置相对定位，不做其他任何改变，元素保持原来位置不变 */
            position: relative;
            transition: 0.5s;
        }
        /* 伪元素：为已知的元素添加一个子元素 */
        /* 在html标签里是找不到伪元素的位置的，但它确实被添加进来了 */
        /* 通过before，after控制添加伪元素的顺序 */
        /* before：在所有子元素的最前面添加一个伪元素 */
        /* 黑色背景框是第一个伪元素，小灯是第二个伪元素，只有这样小灯才能在黑色背景的上面 */

        /* 滑动钮大的灰色部分 */
        .my-checkbox::before {
            /* 只有标签，没有标签内容的伪元素 */
            /* 伪元素默认为行内元素，行内元素不受宽高影响 */
            /* 要想使得设置的宽高应用于伪元素，需要将它设置为块元素 */
            display: block;
            content: "";
            width: 120px;
            height: 60px;
            background: linear-gradient(to top, #000, #6B6B6B);
            border: 5px solid #555555;
            border-radius: 35px;
            /* 绝对定位必须设置左边距与右边距 */
            position: absolute;
            left: 0;
            top: 0;
            /* 给要动的元素，添加过渡样式 */
            transition: 0.5s;
        }

        /* 滑动钮小的亮光部分 */
        .my-checkbox::after {
            display: block;
            content: "";
            width: 10px;
            height: 10px;
            background: darkgray;
            border-radius: 50%;
            position: absolute;
            left: 90px;
            /* top50%的参照系是，父元素的50%，但是，是指上边缘位于父元素的50% */
            /* 如果元素很大，那么会偏下 */
            top: 50%;
            /* 调整方法，第一个参数0表示x方向不偏移，第二个参数表示在y方向上偏移*/
            /* 并且此时的50%是指元素自己高度的50% */
            transform: translate(0, -50%);
            transition: 0.5s;
            box-shadow: 0 0 0 #fa8c16;
        }

        /* 复选框选中以后,对伪类before的样式 */
        .my-checkbox:checked::before {
            left: 60px;
        }

        /* 复选框选中以后,对伪类after的样式 */
        .my-checkbox:checked::after {
            left: 150px;
            background-color: #fa8c16;
            /* 泛光效果 */
            box-shadow: 0 0 15px #fa8c16;
        }

        /* 复选框选中以后,自己的样式 */
        .my-checkbox:checked {
            border: 5px solid #fa8c16;
            background: linear-gradient(to bottom, #ad4e00, #ffd591);
            box-shadow: 8px 6px 20px #888888, inset 5px -5px 30px #fa8c16;
        }
    </style>
</head>
<body>
    <input type="checkbox" class="my-checkbox"/>
</body>
</html>

翻书插件turn.js

下载必要的js文件
百度turn.js，下载并引入
由于以上两个插件基于1.7+的jquery，因此下载并引入jquery.js
下载并引入，用于区别html4与html5

加了min的js文件，是部署好的，体积更小，建议使用；并且区分了html4与html5两个版本，必须都引入；代码通过yepnope函数手动区分html版本
在这里插入图片描述
以下js文件，用于区分html4与html5

注意，jquery必须首先引入，它是基础
在这里插入图片描述

<!DOCTYPE html>
<!--[if !IE]><!--><html lang="zh-cn"><!--<![endif]-->
<!--[if gt IE 9]><html class="ie10" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie8 lte9 no-css3" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie7 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
<!--[if lte IE 6]><html class="ie6 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.1.7.js"></script>
    <script src="../js/modernizr.2.5.3.min.js"></script>
</head>
<body>
    <div id="flipbook">
        <div class="hard"> Turn.js </div>
        <div class="hard"></div>
        <div> Page 1 </div>
        <div> Page 2 </div>
        <div> Page 3 </div>
        <div> Page 4 </div>
        <div class="hard"></div>
        <div class="hard"></div>
    </div>
    <script type="text/javascript">
        // 检查该网页是否支持HTML5，若不支持，使用HTML4版本turn.js
        yepnope({
            test:Modernizr.csstransforms, // 这是一个变量
            yep:['../js/turn.min.js'],
            nope:['../js/turn.html4.min.js'],
            both:[''],
            // 上述判断完成后，再使用正确版本的turn.js将div渲染为书页
            complete: function() {
                $("#flipbook").turn({
                    width: 400,
                    height: 300,
                    autoCenter: true
                });
            }
        });
    </script>
</body>
</html>

corn6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 与 html5

折叠隐藏文字快捷键：span*6，然后敲一个tap键，会生成6个span标签写业务style之前，需要先清除style的内置样式也就是在style里面写上* {margin: 0;padding: 0;}注意body的height:100vh;不要写100%弹性盒子能使子元素垂直居中的条件：弹性盒子本身具备高度使用>直接控制子元素，而不会影响到孙元素body { background-color:#003a8c; width: 100%
复制链接

扫一扫