css动画

已于 2023-07-16 16:59:05 修改
阅读量48 收藏
点赞数
文章标签： css css3 前端
于 2023-07-16 14:49:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66288119/article/details/131750204
版权

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


<!DOCTYPE html>
<html lang="zh">
<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>渐变背景动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /* 100%窗口高度 */
            height: 100vh;
            /* 弹性布局 水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变背景 */
            background: linear-gradient(125deg ,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
            /* 制定背景图像的大小 */
            background-size: 500%;
            animation: bgani 15s linear infinite;

        }
        .text {
            color: #fff;
            font-size: 30px;
            /* 字间距 */
            letter-spacing: 15px;
        }
        @keyframes bgani {
            0%,100% {
                background-position: 0% 50%;

            }
            50% {
                background-position: 100% 50%;
            }
        }
    </style>
</head>
<body>
    <div class="text">渐变背景动画</div>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="zh">
<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>
        body {
            background-color: black;
        }
        span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 20px 20px rgba(225,225,225,.3),
                        0 0 40px 40px rgba(225,225,225,.2),
                        0 0 80px 80px rgba(225,225,225,.1);
        }
        /* 拖尾效果 */
        span::after {
            content: "";
            width: 200px;
            height: 2px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background:linear-gradient(to right,#fff,rgba(225,225,225,.5),transparent) ;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="zh">
<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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100vh;
            background: #222;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        h1 {
            font-size: 112px;
            text-transform: uppercase;
            /* background: linear-gradient(to right,#ff69b3,#fe0000,#ffa401,#ffff01,#008102,#40e1d2,#410098,#9400d4) no-repeat; */
            background: linear-gradient(120deg,rgba(255,255,255,0) 100px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
            background-clip: text;
            -webkit-background-clip: text;
            color: rgba(225,225,225,.3);
            animation: move 3s linear infinite;
        }
        @keyframes move {
            0% {
                background-position:-160px,0;
            }
            100% {
                background-position: 600px,0;
            }
        }
    </style>
</head>
<body>
    <h1>helloworld</h1>   
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="zh">
<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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100vh;
        }
        .wrap {
            width: 40px;
            height: 300px;
            border: 1px solid;
            margin: 100px auto;
            overflow: hidden;
        }
        .wrap .inner {
            height: 600px;
            background: repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
            animation: move 5s linear infinite;
        }
        @keyframes move {
            100% {
                margin-top: -300px;
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="zh">
<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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100vh;
            background: #222;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        h1 {
            position: relative;
            font-size: 112px;
            text-transform: uppercase;
            color: #333;
        }
        h1::after {
            content: "helloworld";
            position: absolute;
            top: 0;
            left: 0;
            color: transparent;
            background: linear-gradient(to right,#ff69b3,#fe0000,#ffa401,#ffff01,#008102,#40e1d2,#410098,#9400d4);
            background-clip: text;
            -webkit-background-clip: text;
            clip-path: circle(100px at 0% 50%);
            animation: move 5s infinite;
        }
        @keyframes move {
            0%,100% {
                clip-path: circle(100px at 0% 50%);
            }
            50% {
                clip-path: circle(100px at 100% 50%);
            }
        }
    </style>
</head>
<body>
    <h1>helloworld</h1>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="zh">
<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>
        * {
            margin: 0;
            padding: 0;
        }
        /* 渐变背景动画 */
        body {
            height: 100vh;
            background: linear-gradient(125deg ,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
            background-size: 500%;
            animation: bgmove 10s linear infinite;
            overflow: hidden;
        }
        @keyframes bgmove {
            0%,100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
        /* 流星发光，拖尾，动画 */
        span {
            width: 4px;
            height: 4px;
            background-color: #fff;
            position: absolute;
            /* top: 50%;
            left: 50%; */
            border-radius: 50%;
            /* 发光效果 */
            box-shadow: 0 0 4px 4px rgba(225,225,225,.1),
                        0 0 8px 8px rgba(225,225,225,.1),
                        0 0 20px 20px rgba(225,225,225,.1);
            
            transform: rotate(315deg);
            animation: starmove 3s linear infinite;
        }
        /* 拖尾效果 */
        span::after {
            content: "";
            width: 200px;
            height: 3px;
            background: linear-gradient(to right, #fff,rgba(225,225,225,.6),rgba(225,225,225,.3),transparent);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        @keyframes starmove {
            0% {
                transform:rotate(315deg) translateX(0);
                opacity: 1;
            }
            100% {
                transform:rotate(315deg) translateX(-500px);
                opacity: 0;
            }
        }
        /* 复制流星 */
        span:nth-child(1){
            top: 20%;
            right: 10%;
        }
        span:nth-child(2) {
            /* left: initial; */
            top: 50%;
            right: 50%;
        }
        span:nth-child(3) {
            /* left: initial; */
            top: 10%;
            right: 70%;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

扫光效果
在这里插入图片描述


<!DOCTYPE html>
<html lang="zh">
<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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100vw;
            height: 100vh;
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            background-size: 300%;
            background-position: 50% 50%;
        }
        .main::before {
            content: "";
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            border-top: 1px solid rgba(225,225,225,.5);
        }
        a {
            position: absolute;
            top: 44%;
            left: 44%;
            /* transform: translate(-50%,-50%); */
            width: 80px;
            height: 80px;
            color: #fff;
            border: 1px solid rgba(225,225,225,.4);
            border-radius: 10px;
            text-align: center;
            line-height: 80px;
            text-decoration: none;
            font-size: 28px;
            backdrop-filter: blur(2px);
            transition: all .5s;
            overflow: hidden;
        }
        a:hover {
            transform: translateY(-20px);
        }
        /* 扫光 */
        a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 100%;
            background-color: #fff;
            transform: skewX(45deg) translateX(150px);
            transition: all 0.5s;
        }
        a:hover::before {
            transform: skewX(45deg) translateX(-150px);
        }


    </style>
</head>
<body>
    <div class="main">
        <a href="#"><i class="fa fa-qq"></i></a>
    </div>
</body>
</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>Document</title>
    <style>
        .moon {
            width: 100px;
            height: 100px;
            /* background-color: pink; */
            border-radius: 50%;
            box-shadow: 30px 8px 0 cyan;
        }
    </style>
</head>
<body>
    <div class="moon"></div>
</body>
</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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background-color: #000;
        }
        .wrap {
            width: 750px;
            overflow: hidden;
            margin: 100px auto;
            border: 5px solid #333;
        }
        .wrap li {
            float: left;
            border: 5px solid #333;
        }
        .wrap li img {
            width: 240px;
            height: 225px;
        }
        
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('.wrap li').mouseenter(function() {
                $(this).css('opacity',1).siblings('li').css('opacity',0.4);
            })
            $('.wrap').mouseleave(function() {
                $(this).find('li').css('opacity',1);
            })
        })
    </script>
</head>
<body>
    <ul class="wrap">
        <li><img src="../img/q1.jpg" alt=""></li>
        <li><img src="../img/q2.jpg" alt=""></li>
        <li><img src="../img/q3.jpg" alt=""></li>
        <li><img src="../img/q4.jpg" alt=""></li>
        <li><img src="../img/q5.jpg" alt=""></li>
        <li><img src="../img/q6.jpg" alt=""></li>
    </ul>
</body>
</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>正方体</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                background-color: #000;
            }
            /*盒子*/
            .content {
                margin: 200px;
                width: 200px;
                height: 200px;
                position: relative;
                transform: perspective(400px);
                transform-style: preserve-3d;
                background: transparent;
                animation: play 5s linear infinite;
            }
            /*内层正方体*/
            .content div {
                width: 100px;
                height: 100px;
                position: absolute;
                color: #fff;
                text-align: center;
                line-height: 100px;
                left: 50px;
                top: 50px;
            }
            /*外层正方体


*/
            .content span {
                width: 200px;
                height: 200px;
                position: absolute;
                color: #fff;
                text-align: center;
                line-height: 200px;
                transition: all 1s;
            }
            .left {
                transform: translateX(-50px) rotateY(90deg);
                background: hsla(180, 100%, 50%, 0.7);
            }
            .right {
                transform: translateX(50px) rotateY(-90deg);
                background: hsla(60, 100%, 50%, 0.7);
            }

            .before {
                transform: translateZ(50px);
                background: hsla(0, 100%, 50%, 0.7);
            }
            .after {
                transform: translateZ(-50px);
                background: hsla(120, 100%, 50%, 0.7);
            }

            .top {
                transform: translateY(-50px) rotateX(90deg);
                background: hsla(240, 100%, 50%, 0.7);
            }
            .bottom {
                transform: translateY(50px) rotateX(-90deg);
                background: hsla(300, 100%, 50%, 0.7);
            }

            /* 外层 */
            .out_left {
                transform: translateX(-100px) rotateY(90deg);
                background: hsla(183, 100%, 50%, 0.7);
            }
            .out_right {
                transform: translateX(100px) rotateY(-90deg);
                background: hsla(69, 100%, 50%, 0.7);
            }

            .out_before {
                transform: translateZ(100px);
                background: hsla(20, 100%, 50%, 0.7);
            }
            .out_after {
                transform: translateZ(-100px);
                background: hsla(100, 100%, 50%, 0.7);
            }

            .out_top {
                transform: translateY(-100px) rotateX(90deg);
                background: hsla(210, 100%, 50%, 0.7);
            }
            .out_bottom {
                transform: translateY(100px) rotateX(-90deg);
                background: hsla(330, 100%, 50%, 0.7);
            }

            /* 悬浮外层时改变外层的偏移量， */
            .content:hover .out_left {
                transform: translateX(-200px) rotateY(90deg);
            }
            .content:hover .out_right {
                transform: translateX(200px) rotateY(-90deg);
            }
            .content:hover .out_before {
                transform: translateZ(200px);
            }
            .content:hover .out_after {
                transform: translateZ(-200px);
            }
            .content:hover .out_top {
                transform: translateY(-200px) rotateX(90deg);
            }
            .content:hover .out_bottom {
                transform: translateY(200px) rotateX(-90deg);
            }

            @keyframes play {
                0% {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                100% {
                    transform: rotateX(-360deg) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="content">
            <!-- 外层 -->
            <span class="out_left">out_left</span>
            <span class="out_top">out_top</span>
            <span class="out_before">out_before</span>
            <span class="out_right">out_right</span>
            <span class="out_bottom">out_bottom</span>
            <span class="out_after">out_after</span>

            <div class="left">left</div>
            <div class="top">top</div>
            <div class="before">before</div>
            <div class="right">right</div>
            <div class="bottom">bottom</div>
            <div class="after">after</div>
        </div>
    </body>
</html>
步萌ཽ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS动画和JS动画对比
weixin_36106791的博客
08-31 1999
在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下 本文主要讲以下这些内容 1、浏览器渲染流程 2、回流和重绘 3、CSS 动画 4、JS 动画 两者对比 ???? 1. 浏览器的渲染流程 渲染流程主要有4个步骤 解析 HTML 生成DOM 树 解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree 布局 Render Tree 对每个节点进
CSS动画
LiHang1234567777的博客
07-21 4726
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
CSS动画效果
weixin_53912712的博客
07-09 1920
过渡、动画】变形平移、旋转
CSS 动画
12-13
CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的数字表示支持该...
CSS动画21个小案例
07-06
这个“CSS动画21个小案例”集合涵盖了多种实用且创意的动画效果，旨在帮助开发者深入理解和掌握CSS动画的使用。下面我们将详细探讨这些案例涉及的关键知识点。 1. **关键帧动画（@keyframes）**：CSS动画的核心在于...
css动画 - 把你喜欢css动画嵌入到浏览器中
06-01
本文将深入探讨如何利用CSS动画技术，将各种动态效果嵌入到浏览器中，提升用户体验。我们将围绕七个不同的主题进行讨论： 一、齿轮Loading 齿轮加载动画是一种常见的网页加载指示器，它通过旋转的齿轮形象地展示...
常见css动画-解压直用
09-18
"常见css动画-解压直用"这个资源包可能包含了一系列预设好的CSS动画效果，方便开发者直接应用到自己的项目中。 首先，我们来深入理解CSS动画的基本概念。CSS动画由两部分组成：关键帧（Keyframes）和动画属性。关键...
scss概念及使用
m0_74293254的博客
07-10 903
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
Chloeeeeeeee的博客
07-11 116
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 98
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css 自定义变量 var()
Z_Wonderful的博客
07-10 143
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
CSS的选择器、常用属性、盒子模型和定位
secret010的博客
07-08 434
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
医院人员管理项目01_下午，css
m0_75257168的博客
07-08 489
行内样式（内联样式）：直接在html中设置。引入html网页中的方式，共3种。内部样式：css代码写在的。
CSS 中的 ::before 和 ::after 伪元素
m0_65029152的博客
07-11 701
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
css的继承性和层叠性、权重计算、important
张茂洋的博客
07-11 137
子元素可以直接继承父元素中会对子元素产生影响的样式属性，所以有些元素没有设置样式，样式也发生了改变的原因。
【记录】CSS｜Tailwind 的主题定义的颜色的使用方法（--color啥的）
最新发布
qq_46106285的博客
07-11 497
text-skin-line之类的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值