css 变换过渡以及阴影属性

NEWYORK4

于 2022-08-20 17:48:53 发布

阅读量240

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/a2237464569/article/details/126442000

版权

1.变换

tranform 变换值有多个使用空格隔开y
translate translateX（x轴方向） translateY（y轴方向）
缩放 scale scaleX scaleY
旋转 rotate(45deg) rotaeX rotateY

给大家示例一个旋转45度的效果

首先看一下代码示例

<!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>
        .target{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
        .target:first-child{
            /* transform: translateX(50px) */
            transform: rotate(0.78rad);
        }
    </style>
</head>
<body>

     <div class="target">

    </div>
    <div class="target">
    
    </div>
</body>

</html>

运行示例
在这里插入图片描述

关键代码： transform: rotate(0.78rad);
0.78rad表示45度

2.过渡

代码示例

<!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>
        .trans{
            
            width: 100px;
            height: 100px;
            background-image: url(./img/215d762acd4cfd557d70e9ae9349ed65.jpeg);
            background-position: center;
           background: no-repeat;
            background-size: 100%;
            border: 1px solid lightblue;
            opacity:0.5;

        }
        .trans:hover{
            opacity:1;
            /* transform: rotate(9deg); */

        }
        .trans h1{
            transform: translateX(-100%);
            transition: 2s;
        }
        .trans:hover h1{
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <div class="trans">
        <h1>过渡</h1>
     
    </div>
    
</body>
</html>

运行示例
在这里插入图片描述
首先是一个方框，当鼠标划入方框后，文本将从左方慢慢过渡出来

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>
    <style>
        .text{
            font-size: 40px;
            /* 文本阴影 x方向偏移  y方向偏移  模糊度 阴影颜色 */
            text-shadow: 2px 2px 2px grey;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /* 盒子阴影 x方向偏移  y方向偏移  模糊度  扩散度   阴影颜色 */
            box-shadow: 10px 10px 10px 5px lightpink;
        }
    </style>
</head>
<body>
    <div class="text">中华人民共和国台湾省</div>

    <div class="box">中华人民共和国台湾省</div>
</body>
</html>