动画和文字阴影

最新推荐文章于 2025-05-31 09:49:44 发布

原创最新推荐文章于 2025-05-31 09:49:44 发布 · 144 阅读

CC 4.0 BY-SA版权

文字阴影:text-shadow:水平位置垂直位置模糊距离阴影颜色;(前两项是必须写的,后两项可以选写。 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 100px;
            font-weight: 700;
            margin: 50px;
            color: #666666;
            position: relative;
        }
        span::before,
        span::after {
            content:attr(data-name) ;
            font-size: 100px;
            font-weight: 700;
            /*设置新增的元素脱离文档流*/
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top left;
            transition: all 1s;
        }
        span::before{
            color: #fff;
            z-index: 3;
            transform: rotateY(-20deg);
        }
        span::after{
            color: #ccc;
            z-index: -1;
            transform: scale(1.1,1);
        }
        span:hover::before{
            transform: rotateY(-30deg) skew(0deg,3deg);
        }
        span:hover::after{
            transform: rotateY(-30deg) skew(0deg,6deg);
        }
    </style>
</head>
<body>
<!--h5新增的属性:data-自定义属性  通过attr()获取属性值-->

<span data-name="蔡">蔡</span>
<span data-name="徐">徐</span>
<span  data-name="坤">坤</span>
</body>
</html>

animation动画:动画名称动画时间运动曲线何时开始播放次数是否反方向(关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            left: 100px;
            /*使用动画*/
            /*animation:动画名称 动画执行时间,动画曲线 动画延迟时间 播放的次数 动画的方向*/
            animation: hh 2s linear 1s infinite alternate;
        }
        /*先声明一个动画*/
        @keyframes hh {
            /*开始的状态*/
            from{
               left: 0;
                width: 20px;
            }
            /*结束的状态*/
            to{
                left: 400px;
                width: 400px;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>