使用css3制作好看的动画效果

最新推荐文章于 2024-03-29 03:34:03 发布

南郭菌！

最新推荐文章于 2024-03-29 03:34:03 发布

阅读量681

点赞数 2

分类专栏： html/css/js 文章标签： css3

本文链接：https://blog.csdn.net/qq_44771388/article/details/111997326

版权

html/css/js 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

今天给大家做两个好看的css3好看的特效

字体浮雕

效果如下
在这里插入图片描述

我们来建一个div然后添加一段文字

   <div>
        这不是摇摆杨嘛？
    </div>

然后我们准备一些常用的css样式

*{
            margin: 0;
            padding: 0;
        }
        :root,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color:blue ;
        }

好的基础准备以经完成了我们给他样式

     div{
            width: 800px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            left:calc(50% - 400px);
            font-size: 6em;
            color: white;
            font-weight: blod;
            transition: all 1s;
        }
        div:hover{
            text-shadow: 0px 1px 0px #ccc,
            0px 1px 10px rgba(0,0,0,0.3),
            0px 2px 0px #ccc,
            0px 3px 0px #ccc,
            0px 4px 0px #ccc,
            0px 5px 0px #ccc,
            0px 6px 0px #ccc,
            0px 7px 0px #ccc,
            0px 8px 0px #ccc,
            0px 9px 0px #ccc,  
            0px 10px 10px rgba(0,0,0,0.5)
        }

设置这么多的文字阴影主要是让他有一个层叠的立体效果

光影加载效果

效果如下：
在这里插入图片描述

我们把每一个字母分别用一个li包裹起来，然后单独给每一个设置动画

<body>
    <ul>
        <li>l</li>
        <li>o</li>
        <li>a</li>
        <li>d</li>
        <li>i</li>
        <li>n</li>
        <li>g</li>
        <li>.</li>
        <li>.</li>
        <li>.</li>
    </ul>
</body>

css代码如下

  *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        :root,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: black;
        }
        ul{
            width: 600px;
            height: 100px;
            /* color:white; */
            /* text-shadow: 0px 0px 10px 1px #037AB5; */
            font-size: 7em;
            position: absolute;
            top: calc(50% - 50px);
            left:calc(50% - 300px);
            font-weight: bold;
        }
        ul li{
            float: left;
        }
        @keyframes te { 
            0%,100%{text-shadow: 0px 0px 80px  #007EB6;
                color: white;
                
             }
            25%,75%{
                text-shadow: none;
                color:black;
             }
            
        }
        li:nth-child(1){
            animation: te 1s linear 0s infinite;
        }
        li:nth-child(2){
            animation: te 1s linear 0.1s infinite;
        }
        li:nth-child(3){
            animation: te 1s linear 0.2s infinite;
        }
        li:nth-child(4){
            animation: te 1s linear 0.3s infinite;
        }
        li:nth-child(5){
            animation: te 1s linear 0.4s infinite;
        }
        li:nth-child(6){
            animation: te 1s linear 0.5s infinite;
        }
        li:nth-child(7){
            animation: te 1s linear 0.6s infinite;
        }
        li:nth-child(8){
            animation: te 1s linear 0.7s infinite;
        }
        li:nth-child(9){
            animation: te 1s linear 0.8s infinite;
        }
        li:nth-child(10){
            animation: te 1s linear 0.9s infinite;
        }

让每一个字母的动画隔0.1秒显示就可以做到光影加载的效果拉！

南郭菌！

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
使用css3制作好看的动画效果

今天给大家做两个好看的css3好看的特效字体浮雕效果如下我们来建一个div然后添加一段文字 <div> 这不是摇摆杨嘛？ </div>然后我们准备一些常用的css样式*{ margin: 0; padding: 0; } :root,body{ width: 100%; height: 100%;
复制链接

扫一扫