前端【特效】

变形

      平移 

      transform: translateY(100px); 

         旋转 deg turn grad 

        transform: rotate(90deg); 

        transform: rotateX(90deg); 

            缩放 

            transform: scaleX(2); 

            transform: scale(.25); 

            倾斜 

            transform: skewX(60deg);

过渡 transition

过渡模仿iphone解锁

<!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>模仿iphone解锁效果</title>
    <style>
         *{
        margin:0;
        padding: 0;
        list-style: none;
    }
    body{
        background-color: #000;
        overflow: hidden;
    }
    p{
        width: 500px;
        height: 100px;
        font-size: 80px;
        line-height: 100px;
        text-align: center;
        background-color: gray;
        margin: 100px;

        background-image: 
       -webkit-linear-gradient(135deg,transparent 10%,white 15%,transparent 20%);
       background-image: 
         linear-gradient(135deg,transparent 10%,white 15%,transparent 20%);
         /* 背景剪裁 */
        -webkit-background-clip: text;
        color: transparent;
        transition: 4s;

    }
    p:hover{
        background-position: 500px 0;

    }

    </style>
   
</head>
<body>
    <p>千山鸟飞绝</p>
</body>
</html>

过滤

 模糊 

          filter: blur(10px); 

            亮度 

         filter:brightness(2) 

            对比度 

            filter: contrast(2); 

          阴影 

             filter: drop-shadow(5px 5px 5px tomato); 

           灰度 

           filter: grayscale(1);

            色相转变 

         filter: hue-rotate(360deg); 

            反转 

          filter: invert(1); 

          透明度 

             filter: opacity(.25); 

          饱和度

             filter: saturate(4.25); 

           褐色 

           filter: sepia(.5); 

渐变

linear-gradlient、radial-gradlient

        背景图:渐变(方向,颜色1百分比,颜色2百分比

谷歌:-webkit-

设置方向left=to right

            left top

<!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>gradlient</title>
    <style>
        /* linear-gradlient、radial-gradlient
        背景图:渐变(方向,颜色1百分比,颜色2百分比...)
         */
         div{
            width: 500px;
            height: 200px;
            background-color: tomato;
            margin-bottom: 100px;

         }
         div:nth-of-type(1){
           
            /* 谷歌:-webkit- */
            /* 设置方向left=to right
            left top */
            background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%);
            /*  -moz- */
            /* background-image: -moz-linear-gradient(left,cyan,gold);
            background-image: linear-gradient(left,cyan,gold); */
         }
         div:nth-of-type(2){
            background-image: -webkit-radial-gradient(hotpink,red,gold,tomato);
         }
         .ch{
            background-image: -webkit-radial-gradient(
                center bottom,white 40%,purple,skyblue,cyan,green,gold,orange,red,white 60%

            );
            background-image: radial-gradient(
                center bottom,white 40%,purple,skyblue,cyan,green,gold,orange,red,white 60%
            );
         }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="ch"></div>
    
</body>
</html>

 box-shadow、text-shadow

        阴影:横向偏移量 纵向偏移量 模糊距离 阴影颜色

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值