纯css实现

彩色之外

已于 2023-04-12 18:19:29 修改

阅读量529

点赞数 2

分类专栏： css相关文章标签： css html jquery

于 2022-01-11 11:02:50 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/122426253

版权

css相关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

多背景

<!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>
        #ipt1 {
            border: 0;
            outline: none;
            /*轮廓线*/
            width: 500px;
            height: 35px;
            border-radius: 21px;
            /* 组合写用background :url() 是否平铺 水平 多少px  垂直 多少px/图片大小宽高，url() 背景色 是否平铺 水平方向 多少px 垂直方向/图片大小 宽高*/
            background: url(../images/Snipaste_2021-04-25_11-45-51.png) no-repeat left 15px center/25px 25px, url(../images/Snipaste_2021-04-25_11-46-25.png)#ccc no-repeat right 15px center/25px 25px;
            /* 多个背景图css背景色会失效，在最后一个背景图url后 是否平铺前 加颜色就好#ccc   位置后紧跟斜杠图片大小 */
        }
    </style>
</head>

<body>
    <form action="" method="GET">
        <input type="search" name="" id="ipt1">
    </form>
</body>

</html>

纯css

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

<!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>
        div,
        span {
            margin-bottom: 50px;
        }
        /* 小三角箭头*/
        
        .box1 {
            width: 20px;
            height: 20px;
            border: 1px solid red;
            border-bottom: 0;
            border-right: 0;
            transform: rotate(-45deg);
        }
        /*限时特价 用行元素内边距撑开*/
        
        .box2 {
            position: relative;
            /* 上右下左 顺时针方向 */
            padding: 5px 25px 5px 15px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            background: -webkit-linear-gradient(left, red, blue);
            border-radius: 15px;
        }
        /* 伪元素后插入*/
        
        .box2::after {
            content: "";
            position: absolute;
            top: 11px;
            width: 8px;
            height: 8px;
            border-top: 2px solid rgb(14, 230, 14);
            border-right: 2px solid rgb(14, 230, 14);
            transform: rotate(45deg);
            margin-left: 5px;
        }
        /* 红色对号 */
        
        .box3 {
            margin-top: 60px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            border-radius: 50%;
            text-align: center;
            color: red;
        }
        /*三角 原理利用样式层叠性*/
        
        .box4 {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid red;
            transform: rotate(30deg);
        }
        /* 扇形 */
        
        .box5 {
            width: 300px;
            height: 300px;
            border-radius: 100% 0 0 0;
            background-color: rgb(25, 223, 163);
        }
        /* 更改圆角弧度 扇形Hot */
        
        .box6 {
            width: 25px;
            height: 25px;
            /* 顺势针 上 右 下 左 */
            border-radius: 100% 100% 100% 0;
            background-color: red;
            text-align: center;
            line-height: 25px;
            color: #fff;
        }
        /* 让字体变小 */
        
        .box6>p {
            transform: scale(0.5);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <span class="box2">限时特价</span>
    <div class="box3">√</div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6">
        <p>
            Hot
        </p>
    </div>
</body>
<script>
    console.log(typeof(''));
</script>

</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>
        .f {
            width: 100%;
            height: 2000px;
            background-color: red;
            position: relative
        }

        .z {
            margin-top: 200px;
            width: 100%;
            position: sticky;
            top: 0;
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="f">
        123
        <div class="z">
            456
        </div>
    </div>
</body>

</html>

input的type类型

<!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>
</head>

<body>
    <!-- 总结:类似正则对类型校验,例如number就只能输入数字 -->
    <!-- 1 颜色 -->
    <input type="color" name="" id="" placeholder="颜色">
    <!-- 2日期 -->
    <input type="date" name="" id="" placeholder="日期">
    <!-- 3数字 -->
    <input type="number" name="" id="" placeholder="数字">
    <!-- 4电话号 -->
    <input type="tel" name="" id="" placeholder="电话">
    <!-- 5密码 -->
    <input type="password" name="" id="" placeholder="密码">
    <!-- 6时间 -->
    <input type="time" name="" id="">
    <!-- 7搜索 -->
    <input type="search" name="" id="">
    <!-- 8文本 -->
    <input type="text" />
    <!-- 9按钮 -->
    <input type="button" value="我是按钮" />
    <!-- 10邮件 -->
    <input type="email" />
    <!-- 11文件 -->
    <input type="file" />
    <!-- 12滑动条 -->
    <input type="range" />
    <!-- 13月份 -->
    <input type="month" />
    <!-- 14周 -->
    <input type="week" />
    <!-- 15单选 -->
    <input type="radio" name="man" id="man" value="man" /><label for="man">男</label>
    <input type="radio" name="man" id="women" value="woman" /><label for="woman">女</label>
    <!-- 16复选框 -->
    <input type="checkbox" name="interest" value="run" id="run" /><label for="run">跑步</label>
    <input type="checkbox" name="interest" value="guitar" id="guitar" /><label for="guitar">吉他</label>
    <input type="checkbox" name="interest" value="yoga" id="yoga" /><label for="yoga">瑜伽</label>
    <input type="checkbox" name="interest" value="read" id="read" /><label for="read">阅读</label>
    <!-- 17重置按钮 -->
    <input type="reset" />
    <!-- 18 提交按钮 -->
    <input type="submit" />
</body>

</html>

动画

<!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>
        /* animation: 1 定义动画 空格起个名字 ,*/
        /* animation: 2 起的名字，持续时间，运动曲线 ，播放次数，是否反方向，结束状态;  【使用动画分2步，第二步里分为6属性值】 */
        /* 合写记不住小技巧，打animation会出现代码合写提示，吧它注释，下面照着打 */
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }


            100% {
                transform: translate(1200px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* 动画名称 */
            animation-name: move;

            /* 动画花费时长 */
            animation-duration: 5s;
            /* 动画速度曲线，默认ease */
            animation-timing-function:linear;

            /* 动画等待多长时间执行 */
            /* animation-delay: 2s; */

            /* 规定动画播放次数 ，默认1次数，去和返回都算次数 ，想无限循环用:infinite */
            /* animation-iteration-count: 3; */
            animation-iteration-count: infinite;
            /* 是否逆行播放，默认正常（normal） 逆向 ：alternate*/
            animation-direction: alternate;

            /* 动画结束之后的状态 （默认起始状态backwoods）保持结束状态：forwards*/
            /* 注意：使用结束状态就不能无限循环，会冲突，因为无限循环一直跑没有结束状态 */
            animation-fill-mode: forwards;
            /* 合写同样效果 */
            /* animation: move 5s ease infinite alternate forwards; */
        }

        div:hover {
            /*规定动画上是否暂停或者播放 ，一般和hover配合使用，鼠标放运动的盒子上动画暂停，鼠标离开动画开始*/
            /* 默认running ， 暂停paused 【注意合写不包括规定动画暂停或播放： animation-play-state: paused；】*/
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

动画奔跑的熊

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #cccccc;
    }

    div {
        /* 动画可以多组，用逗号隔开 */
        animation: xiong 0.3s steps(8) infinite, move 3s forwards;
        /* 想让熊跑到浏览器中间用绝对定位，参照最近的祖元素，没有择按浏览器可视区移位 */
        position: absolute;
        top: 400px;
        width: 200px;
        height: 100px;
        background: url(../image/熊熊.png) no-repeat;
    }

    /* 不给背景定义动画也能实现，参照熊跑的速度，背景太快，给背景定义一个5秒匀速无限循环 */
    .bg1 {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 400px;
        animation: bg1 40s linear infinite;
        background: url(../image/背景1.png) no-repeat;
    }

    .bg2 {
        position: absolute;
        top: 0px;
        width: 100%;
        animation: bg2 40s linear infinite;
        height: 400px;
        background: url(../image/背景2.png) repeat-x;
    }

    /* 调整背景小熊图用背景位置属性,从右往左走必须负值 */
    @keyframes xiong {
        0% {}

        100% {
            background-position: -1600px 0;
        }
    }

    @keyframes move {
        0% {
            left: 0;
        }

        100% {
            left: 50%;
            transform: translate(-50%);
        }
    }

    @keyframes bg1 {
        0% {}

        100% {
            background-position: -10600px 0;
        }
    }

    @keyframes bg2 {
        0% {}

        100% {
            background-position: -10600px 0;
        }
    }

    h1 {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
        height: 50px;
        border-bottom: 1px solid #44b5f4;
        /* z-index: 1; */
    }
</style>

<body>
    <h1>奔跑的狗熊</h1>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div></div>

</body>

</html>

所需要的图片下面三张

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

属性选择器

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

<!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>
        /* 选中所有带type属性，或name,id属性 */
        input[type] {
            background-color: rgb(247, 245, 109);
        }

        /* 选择标签input等于属性值url */
        
        input[type="url"] {
            background-color: rgb(223, 22, 22);
        }

        /* 选中type属性并以t属性值开头 */
        input[type^='t'] {
            background-color: #fff;
            font-style: italic;
            font-size: 19px;
        }

        /* 选中type属性并以t属性值结尾 */

        input[type$="l"] {
            background-color: rgb(37, 111, 145);
        }

        /* 选中type属性并包含某字母*/

        input[type*="e"] {
            background-color: rgb(199, 101, 10);
        }
    </style>

</head>

<body>

    <form action="http://www.baidu.com" method="GET">
        <ol>
            <li>密码 ：<input type="password" name="" id=""></li>
            <li>男：<input type="radio" name="xinbie" id=""></li>
            <li>女：<input type="radio" name="xinbie" id="" checked></li>
            <li><label for="q">搜索：</label><input type="search" name="" id="q"></li>
            <li>时间：<input type="time" name="" id=""></li>
            <li>周：<input type="week" name="" id=""></li>
            <li>网址：<input type="url" name="" id=""></li>
            <li>邮箱：<input type="email" name="" id=""></li>
            <li>日期：<input type="date" name="" id=""></li>
            <li>月：<input type="month" name="" id=""></li>
            <li>手机号：<input type="tel" name="" id=""></li>
            <li>文件域：<input type="file" name="" id=""></li>
            <li>表单颜色：<input type="color" name="" id=""></li>
            <li><input type="submit" value="提交"></li>
            <li><input type="reset" value="重置"></li>
        </ol>
    </form>
</body>

</html>

动画

<!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>
        /* 第一步先定义起始动画 @keyframes +名称 */
        
        @keyframes move {
            0% {}
            10% {
                transform: translate(100px, 50px) rotate(90deg) scale(1.5);
            }
            50% {
                transform: translate(600px, 50px) rotate(360deg) scale(1.5);
            }
            60% {
                transform: translate(800px, 10px) rotate(360deg) scale(5.5);
            }
            80% {
                transform: translate(800px, 10px) rotate(60deg) scale(2.5);
            }
            100% {
                transform: translate(1000px, 500px) rotate(360deg) scale(2.5);
            }
        }
        
        div {
            /* 第二步定义名称 animation-name: 名称;和animation-duration: 2s;运动曲线 */
            animation: move 2s linear 3 alternate forwards;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
        
        div:hover {
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3D呈现

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

<!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>
        /* 思路：父元素加呈现，大父元素加透视body，呈现尽量不和透视在一块设置*/
        .wrap {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: pink;
            /* 3d呈现给父级加影响的 是子元素 因为body要加透视，所以3d呈现加给.wrap*/
            
            transform-style: preserve-3d;
            /* 谁过度给谁加 */
            transition: all 1s;

        }


        .in {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: purple;
            transform: rotateX(45deg);
        }

        body {
            /* 透视 */
            perspective: 500px;

        }

    
        .wrap:hover {
            /* 沿着y轴旋转 */
            transform: rotateY(100deg);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="in"></div>
    </div>
</body>

</html>

打字机

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 30px;
            width: 0;
            /* 因为div是块元素竖着排列，所以让字体强制一行显示， */
            white-space: nowrap;
            /* word-break: break-all; */
            /* 溢出的隐藏，超出动画的隐藏 */
            overflow: hidden;
            background-color: rgb(78, 167, 85);
            animation: da 1s steps(11) infinite alternate forwards;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            text-align: center;
            line-height: 30px;
        }

        @keyframes da {
            0% {}

            /* 谷歌字体默认16px，11个字是176px， */
            100% {
                width: 176px;
            }
        }
    </style>
</head>

<body>
    <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>Document</title>
    <style>
        body {
            background-color: black;
        }
        
        .ditu {
            position: relative;
            /* border: 1px solid red; */
            width: 700px;
            height: 600px;
            margin: auto;
            background: url(../image/map.png) no-repeat center;
            background-size: 100%;
        }
        /* 波纹父盒子定位 */
        
        .bowenbox {
            position: absolute;
            top: 180px;
            right: 120px;
            /* border: 1px solid red; */
            width: 50px;
            height: 50px;
        }
        /* 小点 */
        
        .dian {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /* 选中所有波纹 */
        
        .bowenbox div[class^="bow"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            /* 不用边框，太实体了，用盒子阴影、 */
            box-shadow: 0 0 5px blue;
            border-radius: 50%;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: bowen .4s ease infinite;
        }
        /* 多类名调用层叠上面的不同的类名同样式，必须用同样的top/right */
        
        .tb {
            top: 450px;
            right: 70px;
        }
        
        .gz {
            top: 500px;
            right: 160px;
        }
        
        .nj {
            top: 350px;
            right: 500px;
        }
        /* 延迟放大 */
        
        .bowenbox div[class="bowen2"] {
            animation-delay: .2s;
        }
        
        .bowenbox div[class="bowen3"] {
            animation-delay: .4s;
        }
        
        .bowenbox div[class="bowen4"] {
            animation-delay: .6s;
        }
        
        @keyframes bowen {
            0% {}
            50% {
                width: 30px;
                height: 30px;
                opacity: 0.9;
            }
            100% {
                width: 50px;
                height: 50px;
                opacity: 0.2;
            }
        }
    </style>/
</head>

<body>
    <div class="ditu">

        <div class="bowenbox">
            <div class="dian"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
            <div class="bowen4"></div>
        </div>
        <div class="bowenbox tb">
            <div class="dian"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
            <div class="bowen4"></div>
        </div>
        <div class="bowenbox gz">
            <div class="dian"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
            <div class="bowen4"></div>
        </div>
        <div class="bowenbox nj">
            <div class="dian"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
            <div class="bowen4"></div>
        </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
        }



        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0) rotateX(0);
            }

            100% {
                transform: rotateY(360deg)
            }
        }


        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 5s linear infinite;
            transition: all .5s;

        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: purple;
        }

     
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }

        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }

        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
        section div:last-child {
            transform: translateZ(0) rotateY(0);
            background-color: black;

        }

    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

媒体查询

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 要求小于540px页面变蓝色大于540页面变绿色大于970页面变粉色 利用样式层叠从上到下 */
        /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        @media screen and (max-width:539px) {
            body {
                background-color: blue;
                font-size: 14px;
            }

        }


        /* 最小540px变绿色 */
        @media screen and (min-width:540px) {
            body {
                background-color: green;
                font-size: 20px;

            }
        }

        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        @media screen and (min-width:970px) {
            body {
                background-color: pink;
                font-size: 30px;

            }
        }

    </style>
</head>

<body>

</body>

</html>

更新中...