css动画

最新推荐文章于 2024-08-10 22:43:21 发布

weixin_70368260

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量19

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_70368260/article/details/132171887

版权

css动画

渐变
- 线性渐变
动画
- 今日代码练习

渐变

线性渐变

1，background-image：liner-gradient（yellow，green）渐变的方向默认从上到下

2，background-image：liner-gradient（to right，yellow，green）改变渐变方向从左到右

3，background-image：liner-gradient（to right bottom，yellow，green）

4，background-image：liner-gradient（60eg，yellow，green）改变角度

5，background-image：liner-gradient（red，yellow，green）多色渐变

6，background-image：liner-gradient（red 30%，yellow 80%）区域百分比

7，background-image：repeating-liner-gradient（white 20px，black 40px）；斑马线渐变（重复渐变）

动画

transform：translate（px，px）；平移动画

transition：时间；过度动画

transform：scale();缩放动画

transform：rotate：（）；旋转动画

transform-origin：right bottom；根据什么位置旋转（右下）

transform：skew（30deg）；倾斜动画

@keyframes run{

from{

}

to{

transform：translatex（1000px）

}

今日代码练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css">
</head>

<body>
    <div id="box">
        <ul>
            <li>
                <div id="box2"></div>
                <a href=""><h3>&nbsp;&nbsp;&nbsp;Card Two</h3>
                <p>
                    Lorem ipsum dolor sitamet consecteturadipisicing elit.
                     Omnisdelectus adipisci ullamdeleniti 
                    aliquamreiciendis aliasmaiores? Impedit 
                    earumporro, asperiores doloreconsequatur 
                    quidem vitaeculpa ducimus nesciuntcommodi aperiam!</p>
            <button class="but">Read More</button></a>
            <div class="box3"></div>
            <div class="box4"></div>
            </li>
            <li>
                <div id="box5"></div>
                <a href=""><h3>&nbsp;&nbsp;&nbsp;Card Two</h3>
                <p>
                    Lorem ipsum dolor sitamet consecteturadipisicing elit.
                     Omnisdelectus adipisci ullamdeleniti 
                    aliquamreiciendis aliasmaiores? Impedit 
                    earumporro, asperiores doloreconsequatur 
                    quidem vitaeculpa ducimus nesciuntcommodi aperiam!</p>
            <button class="but">Read More</button></a>
            <div class="box3"></div>
            <div class="box4"></div>
            </li>
            <li>
                <div id="box2"></div>
                <a href=""><h3>&nbsp;&nbsp;&nbsp;Card Two</h3>
                <p>
                    Lorem ipsum dolor sitamet consecteturadipisicing elit.
                     Omnisdelectus adipisci ullamdeleniti 
                    aliquamreiciendis aliasmaiores? Impedit 
                    earumporro, asperiores doloreconsequatur 
                    quidem vitaeculpa ducimus nesciuntcommodi aperiam!</p>
            <button class="but">Read More</button></a>
            <div class="box3"></div>
            <div class="box4"></div>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

#box {
    width: 1300px;
    height: 500px;
    margin: 100px auto;
    /* border: 1px solid rgb(255, 255, 255); */
}

#box>ul>li {
    width: 400px;
    height: 300px;
    list-style: none;
    position: relative;
    display: inline;
    float: left;
    
}

#box2 {
    width: 200px;
    height: 400px;
    background-image: linear-gradient(red, yellow);
    transform: skew(30deg);
    position: absolute;
    left: 50px;
    top: 35px;
    filter: blur(10px);


}

#box>ul>li>a {
    width: 300px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    position: absolute;
    top: 35px;
    left: 10px;
    font-size: 18px;
    transform: scale(0.8);
}

p {
    position: absolute;
    left: 20px;
    top: 50px;
}

#box>ul>li:hover>#box2 {
    transform: skew(0deg);
    transition: 0.4s;
}

#box>ul>li:hover>a {
    transform: scale(1);
    transition: 0.4s;
}

.but {
    width: 150px;
    height: 50px;
    background-color: white;
    position: absolute;
    left: 15px;
    top: 350px;
    border-radius: 30%;
    font-size: 18px;

}

.clear::after {
    content: '';
    display: block;
    clear: both;
}
.box3{
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    left: 50px;
    top: 8px;
    display: none;
}
#box>ul>li:hover>.box3{
    display: block;
    animation: run 1s linear infinite;
}
@keyframes run{
    form{
        transform: scale(0.5);
    }
    to{
      transform: scale(0.9);
    }
}
.box4{
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    left: 150px;
    top: 350px;
    display: none;
}
#box>ul>li:hover>.box4{
    display: block;
    animation: run 1s linear infinite;
}
#box5 {
    width: 200px;
    height: 400px;
    background-image: linear-gradient(red, pink);
    transform: skew(-30deg);
    position: absolute;
    left: 50px;
    top: 35px;
    filter: blur(10px);

}
#box>ul>li:hover>#box5 {
    transform: skew(0deg);
    transition: 0.4s;
}

weixin_70368260

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css动画

2，background-image：liner-gradient（to right，yellow，green）改变渐变方向从左到右。4，background-image：liner-gradient（60eg，yellow，green）改变角度。5，background-image：liner-gradient（red，yellow，green）多色渐变。
复制链接

扫一扫