CSS3——小demo

最新推荐文章于 2023-07-08 12:56:21 发布

weixin_45846980

最新推荐文章于 2023-07-08 12:56:21 发布

阅读量161

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_45846980/article/details/105629947

版权

1.制作抖音字体

在这里插入图片描述
是不是看起来有那木点意思。🙂
其实制作方法也非常简单，大家学会之后可以拿出去写一篇，抖音文字的文章内容🙂
绝对亮瞎别人24k钛合金狗眼🙂

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 实现代码 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
	    //背景颜色
        background-color: black;
    }
    div{
        font-size: 100px;//文字大小
        font-weight: bold;//文字加宽
        color:white;//字体颜色
        //因为可以设置多个文本阴影值，所以才有抖音字体的效果
        text-shadow: 5px 5px 1px  #FC175C,-5px -5px #24F5E9;
    }
</style>
<body>
    <div>
    	<!--文本内容-->
        明日方舟 明日方舟
        明日方舟 明日方舟
        明日方舟
        明日方舟 明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟
        明日方舟  
    </div>
</body>
</html>

2.动态文字人物海报

在这里插入图片描述
是不是瞬间有点封面设计的感觉📷
其实做起来也是十分简单，容易上手🙂
主要掌握一个点文字背后怎样嵌入图片就可以实现此效果了，然后再稍稍加点动画效果，就🆗了
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 实现代码 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
    background-color: black;
    flex-grow: 1;
    }
div{
    font-size: 200px;//字体大小
    font-weight: bold;//字体加粗
    width: 200px;
    height: 800px;
    margin: 0 auto;//居中
    background-image: url("白面鸮.jpg");//背景图片
    background-size: 400px;//背景图片大小
    background-repeat: no-repeat;//去除背景图片重复
    background-position: 202px 0px;//初识背景图片位置
    -webkit-background-clip: text;//重点设置元素的背景（背景图片或颜色）的填充为字体
	-webkit-text-fill-color: transparent;//将文字填充为透明
    transition: all 2s;//动画效果
}
div:hover{
    background-position: -100px 0px;//移动后背景图片位置
}
</style>
<body>
    <div>
        白面鸮
    </div>
</body>
</html>

背景图片素材
在这里插入图片描述

weixin_45846980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3——小demo

1.制作抖音字体是不是看起来有那木点意思。????其实制作方法也非常简单，大家学会之后可以拿出去写一篇，抖音文字的文章内容????绝对亮瞎别人24k钛合金狗眼????~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 实现代码 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<html lang="en"><head> <meta...
复制链接

扫一扫