1.css动画效果(部分)

最新推荐文章于 2022-11-13 10:28:28 发布

风无雨

最新推荐文章于 2022-11-13 10:28:28 发布

阅读量181

点赞数 1

分类专栏： # css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/wusandaofwy/article/details/125837734

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.字体图标

1.1类名生成字体图标

 <!-- 引入字体图标css -->
    <link rel="stylesheet" href="../fonts/iconfont.css">

<!-- 加固定类名 -->
    <div class="iconfont icon-meishi"></div>
    <div class="iconfont icon-meishi1"></div>
    <div class="iconfont icon-meishi2"></div

1.2unico生成字体图标

<!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>
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<body>
    <!-- 写固定类名 -->
    <i class="iconfont">&#xe608;</i>
    <i class="iconfont">&#xe60c;</i>
    <i class="iconfont">&#xe8f8;</i>

</body>
</html>

1.3伪元素生成字体图标

<!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>
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        i::after {
            /* 内容 */
            content: '\e604';
            color: red;
            vertical-align: middle;
            font-size: 200px;

        }
        em::before {
            content: '\e60a';
            vertical-align: middle;
            /* iCon是文字,变颜色变大小用color和fontsize和文字一样 */
            color: orange;
            font-size: 300px;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div class="box"> 
        <i class="iconfont"></i>
        <em class="iconfont"></em>
    </div>
</body>

</html>

1.4 线上链接显示字体图标

注意:复制的链接要加上http:

<!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>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">
</head>
<body>
    <div class="iconfont icon-a-4-shezhi"></div>
  
</body>
</html>

2.平面转换

2.1位移

    <style>
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* transform: translate(900px, 80px); */
            transform: translateX(100px) translateY(100px)  ;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            /* top: 50%;
            left: 50%;
            transform: translate(-50%,-50%); */
            /* 特殊的居中方式
            1.先让盒子在原来的位置脱标
            2.通过margin:auto;四个方向全部自动居中 */
        }
        /* 位移
        transform: translate(X,Y)
        当Y轴为零时,可以省略
        可以用百分比写,但百分比是相对于盒子自身的
         */
    
         /* margin和 transform: translate的区别
         1.margin移动会影响下面的元素()
         .transform: translate不会影响下面的元素()
         2.margin移动100%是浏览器的100%
         transform: translate移动的100%是自身盒子的100%
         */
    </style>
</head>

<body>
    <!-- 位移 -->

    <div class="box">
        <div class="box1"></div>
    </div>
</body>

2.2旋转

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 50%; */
            margin: 100px auto;
            transition: all 4s;
            /* 改变旋转中❤ */
            /* transform-origin: 100px 0px; */
        }
        .box:hover {
       transform: translateX(800px);  transform: rotate(360deg);
            /* transform: rotate(10turn); */
        }
        .box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- 旋转 -->
    <div class="box">
        <img src="../images/p4-tx3.png" alt="">
    </div>

</body>

2.3transform多重转换

  <title>Document</title>
    <style>
        .box {
            margin: 750px auto;
            width: 1400px;
            height: 303px;
            border: 1px solid #000;
            font-size: 50px;

        }

        .box1 {
            margin: 100px auto;
            width: 1400px;
            height: 303px;
            border: 1px solid #000;
            font-size: 50px;

        }

        img {
            transition: all 2s;
        }

        .box img:hover {
            /* transform: translate(1000px) rotate(1turn); */
            transform: rotate(1turn) translate(1000px);
            /* 先旋转再位移 */

        }

        .box1 img:hover {
            transform: translate(1000px) rotate(1turn);
            /* transform: rotate(1turn) translate(1000px) ; */

            /* 先位移再旋转 */
        }
    </style>
</head>

<body>
    <!-- 多重转换,先位移再旋转 ,
    不然发生效果会生效果-->先旋转再位移
    <div class="box">
        <img src="../images/tyre.png" alt="">
    </div>先位移再旋转
    <div class="box1">
        <img src="../images/tyre.png" alt="">
    </div>
</body>

2.4缩放scale

  <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 400px auto;
            transition: all 1s;
            cursor: pointer;
        }

        .box:hover {
            /* 缩放 scale(缩放的倍数)等比例缩放 缩小扩大宽高的n倍 */
            transform: scale(2);
        }

        .one {
            width: 500px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
        }

        img {
            width: 100%;
            height: 100%;
            transition: all 1s;

        }

        .one:hover img {
            transform: scale(1.2) rotate(1turn);

        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <div class="one">
        <img src="../images/huawei.jpg" alt="">
    </div>
</body>

2.5倾斜skew

 transform: translate(-50%, -50%) scale(1) skew(40deg);
            /*1倾斜单位是角度
            2倾斜度数 正值往左边,负值往右边
            3.倾斜不要等于90度或270,90盒子不显示*/

3渐变background-image: linear-gradient( );

    <style>
        .box{
            width: 400px;
            height: 400px;
            /* background-image: linear-gradient(to left, pink, aqua,blue); */
            /* 渐变色
            1.在 background-image
            2.属性名linear-gradient
            3.属性值中间逗号隔开,
            4.角度和方位词放在第一位:60deg,to top*/
            /* 用的比较多渐变色,从透明色变成变成透明色 */
            background-image: linear-gradient(90deg,transparent,pink,rgba(0,0,0,.5));

        }
    </style>
</head>
<body>
    <div class="box"></div>