HTML样式的简单描述理解，和简单的渐变，过渡，动画

最新推荐文章于 2024-07-13 23:17:47 发布

滑稽的

最新推荐文章于 2024-07-13 23:17:47 发布

阅读量812

点赞数

文章标签： node.js

whqbg

本文链接：https://blog.csdn.net/heiyanmin/article/details/123801238

版权

<!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>CSS样式</title>
    <style>
        #jianbian1{
            height:300px;
            background-image: linear-gradient(to bottom , red ,black);
            margin-bottom: 10px;
            margin-bottom: 10px;
        }
        #jianbian2{
            height:300px;
            background-image: linear-gradient(to right , red ,black);
            margin-bottom: 10px;
            position: sticky;
            top:0px
        }
        #jianbian3{
            height:300px;
            background-image: linear-gradient(to bottom right, red ,black);
            margin-bottom: 10px;
        }
        #jianbian4{
            height:300px;
            background-image: linear-gradient(to top right, red ,black);
            margin-bottom: 10px;
            position: sticky;
            top:300px;
        }
        .guodu{
            height:100px;
            width: 300px;
            background-image: linear-gradient(to top right, red ,black);
            transition: 3s linear;
            margin-bottom: 10px;
            position: sticky;
            top: 600px;
        }
        /* hover ,过渡实现的效果，hover */
        .guodu:hover{
            width: 500px;
            transform: rotate(3deg);
            transform: translate(30px);
            /* transform: skew(30deg,30deg);当扭曲时，掩盖了上面的效果 */
            /* transform: scale(2,2); 放大2倍，过度时，掩盖了上面的效果 */
        }
        .donghua{
            width:150px;
            height: 150px;
            background-color: red;
            animation: myfirst 5s;
            position: relative;
        }
        @keyframes myfirst {
            0%   {background:red; left:0px; top:0px;transform: skew(30deg,30deg);}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        /* Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 所以要加-webkit- */
        @-webkit-keyframes myfirst {
            0%   {background:red; left:0px; top:0px;transform: skew(30deg,30deg);}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
    <div id="jianbian1">从上到下</div>
    <div id="jianbian2">从左到右--粘顶效果</div>
    <div id="jianbian3">从左上到右下</div>
    <div id="jianbian4">从左下到右上--粘顶效果</div>
    <div id="guodu" class="guodu">过度效果--粘顶效果</div>
    <div class="donghua">动画</div>
</body>
</html>

1.css单位
请添加图片描述

2.CSS的继承

3.CSS的样式表

4.CSS的基本选择器

5.CSS的文本修改修饰基本属性

6.CSS的基本样式

7.正常文档流和浮动文档流

8.常用图形绘制

9.过渡样式

10.transform的使用

11.动画的常用属性

例如：请添加图片描述

滑稽的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>CSS
复制链接

扫一扫