我的web程序设计学习记录6-CSDN博客

本文链接：https://blog.csdn.net/zx616122/article/details/106697859

css的两个简单实例

基本选择器的应用

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css" type="text/css"/>
</head>
<body>

<div class="l">
    <ul>
        <li class="one">浮</li>
        <li class="two">世</li>
        <li class="three">万</li>
        <li class="four">千</li>
    </ul>
</div>
<div class="o">
    <ul>
        <li id="five">吾</li>
        <li id="six">爱</li>
        <li id="seven">有</li>
        <li id="eight">三</li>
    </ul>
</div>

</body>
</html>

css代码

div{
    width: 400px;
    border: 10px solid #ffffff;
    padding: 0px;
    margin: 10px;
}
li{
    float: left;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    border-width: 5px;
    border-style: solid;
    border-radius: 30px;
    background: #00FFFF;
    margin-right:4px;
    list-style: none;
}
.two{
    background-color: #0000FF;
}
.four{
    background-color: blue;
}
.one{
    background-color: red;
}
.three{
    background-color: greenyellow;
}
.l{padding: 20px;
    margin: 10px;
}
.o{padding: 20px;
    margin: 10px;
}
#eight{
    background: pink;
}
#five{
    background: aqua;
}
#seven{
    background: powderblue;
}
#six{
    background: green;
}

结果图
在这里插入图片描述

css一个使用@keyframes制作的简单动画

@keyframes的基本语法
@keyframes声明后紧跟动画的名称，花括号内部是一些不同时间段的样式规则
@keyframes必须配合元素的定义的animation属性，用于定义动画
animatign:/动画名称*/
spin 8s /动画执行一次的时间/
ipfinite limnear; /动画循环次数/

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="1.css" media="screen" type="text/css" />
</head>
<body>
<div class="all1">欢</div>
<div class="all1">迎</div>
<div class="all1">光</div>
<div class="all1">临</div>
<div class="all1">您</div>
<div class="all1">好</div>
<div class="all1">欢</div>
<div class="all1">迎</div>

</body>
</html>

css代码

.all1{
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 20px;
    text-align: center;
    border-style: solid;
    font-size: 2em;
    position: relative;
    animation: spin 5s infinite alternate;

}
div{
    float: left;
}

@keyframes spin {

    from {
        background: red;
    }
    to {
        background: yellow;
    }
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }
    50% {
        background: blue;
        left: 0px;
        top: 300px;
    }
    75% {
        background: green;
        left: 0px;
        top: 200px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}