欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

前端开发 (IV) HTML5 和 CSS3

最编程 2024-07-09 18:42:13
...
3月16日,北京源创会 —— “数据库,2024 开炫”

 一、圆角、rgba

设置某一个角的圆角,比如设置左上角的圆角:

border-top-left-radius:30px 60px;

border-top-left-radius: 60px;

同时分别设置四个角:

border-radius:30px 60px 120px 150px;

设置四个圆角相同:

border-radius:50%;

 

①盒子透明度表示法:

.box
    {
        opacity:0.1;
        /* 兼容IE */
        filter:alpha(opacity=10); 
    }

②rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
    <style type="text/css">
        body{
            background: url(images/banner01.jpg);
        }
        .box{
            width: 300px;
            height: 100px;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            /*设置透明度*/
            opacity: 0.3;
            /*兼容IE*/
            filter: alpha(opacity=30);
        }
        .box2{
            width: 300px;
            height: 100px;
            /*设置盒子透明但文字不会变透明*/
            background-color: rgba(0,0,0,0.3);
            color: #fff;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div</div>
    <div class="box2">这是一个div</div>
</body>
</html>

 

二、transition动画

1、transition-property 设置过渡的属性,比如:width height background-color
2、transition-duration 设置过渡的时间,比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            transition: width 1s ease,height 1s ease 1s,background-color 1s ease 2s;

        }
        .box:hover{
            width: 600px;
            height: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如果是多个属性同时的动画,可以合并成下面语句:

  .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            /*transition: width 1s ease,height 1s ease,background-color 1s ease;*/
            transition: all 1s ease;
        }
        .box:hover{
            width: 600px;
            height: 600px;
            background-color: red;
        }

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片说明</title>
    <style type="text/css">
        .pic_con{
            width: 200px;
            height: 300px;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }
        .pic_info{
            position: absolute;
            left: 0;
            top: 300px;
            width: 180px;
            height: 100px;
            background-color: rgba(0,0,0,0.3);
            color: #fff;
            padding: 10px;
            transition: all 500ms ease;
        }
        .pic_con:hover .pic_info{
            top:180px;
        }

    </style>
</head>
<body>
    <div class="pic_con">
        <a href=""><img src="images/banner01.jpg" alt=""></a>
        <div class="pic_info">
            <h3>标题</h3>
            <p>文字说明的内容文字说明的内容</p>
        </div>
    </div>
</body>
</html>

 

 三、transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换</title>
    <!-- 变换不是动画 -->
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*translate位移的性能比定位要高*/
            transform: translate(0px,0px);
            transition: all 1s ease;
        }
        .box:hover{
            transform: translate(30px,30px);
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*放大一倍*/
            transform: scale(1,1);
            transition: all 1s ease;
        }
        .box2:hover{
            transform: scale(2,2);
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*旋转 默认绕着z轴旋转*/
            transform: rotate(0deg);
            transition: all 1s ease;
        }
        .box3:hover{
            transform: rotate(45deg);
        }
        .box4{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: gold;
            margin: 50px auto 0;
            /*斜切 不好控制一般不用*/
            transform: skew(0,0);
            transition: all 1s ease;
        }
        .box4:hover{
            transform: skew(45deg,0deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

5、tranform-origin 设置变形的中心点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: pink;
            margin: 30px;
            float: left;
            transition: all 500ms ease;
        }
        .box2{
            transform-origin: left center;
        }
        .box3{
            transform-origin: left top;
        }
        .box4{
            transform-origin: 50px 50px;
        }
        div:hover{
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

6、rotateX、rotateY、rotateZ 设置三维旋转
7、perspective 设置透视距离
8、transform-style:flat | preserve-3d 设置盒子是否按3d空间显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三维旋转</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            border: 3px solid #000;
            margin: 50px auto 0;
            /*设置盒子按3d显示*/
            transform-style: preserve-3d;
            /*3d旋转需要设置一个透视距离,一般值为800px*/
            /*不设置初始值 可能会出现跳变的bug*/
            transform: perspective(800px) rotateY(0deg);
            transition: all 1s ease;
        }
        .box:hover{
            transform: perspective(800px) rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

9、scaleX、scaleY、scaleZ 设置三维缩放
10、translateX、translateY、translateZ 设置三维移动
11、backface-visibility 设置盒子背面是否可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片翻转</title>
    <style type="text/css">
        .box{
            width: 700px;
            height: 272px;
            border: 3px solid #000;
            margin: 50px auto 0;
            position: relative;
            transform-style: preserve-3d;
        }
        .box img{
            position: absolute;
            left: 200px;
            top: 0;
            transform: perspective(800px) rotateY(0deg);
            transition: all 1s ease;
            /*设置盒子背面不可见*/
            backface-visibility: hidden;
        }
        .box:hover img{
            transform:perspective(800px) rotateY(180deg);
        }
        .box .back{
            width: 300px;
            height: 272px;
            background-color: pink;
            font-size: 20px;
            text-align: center;
            line-height: 272px;
            position: absolute;
            left: 200px;
            top: 0;
            /*背面的初始角度设为-180deg,保证顺时针旋转*/
            transform: perspective(800px) rotateY(-180deg);
            transition: all 1s ease;
            backface-visibility: hidden
						

上一篇: 前端学习笔记 - CSS - 水平居中和垂直居中

下一篇: CSS 样式规则和字体样式

推荐阅读