CSS学习(一)——制作新年贺卡

效果如下：

我也是正在学习中，此特效没有太高级的代码语法，只是transform的应用

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cRack</title>
</head>
<body><ul><li><span data="H">H</span><span data="A">A</span><span data="P">P</span><span data="P">P</span><span data="Y">Y</span></li><li><span data="N">N</span><span data="E">E</span><span data="W">W</span></li><li><span data="Y">Y</span><span data="E">E</span><span data="A">A</span><span data="R">R</span></li></ul>
</body>
</html><style>* {padding: 0;margin: 0;}html {height: 100%;}body {background-color: brown;}ul {list-style: none;padding-top: 100px;}ul > li {font-size: 0;text-align: center;}ul > li > span {display: inline-block;/* border: 1px solid #000; */width: 200px;height: 200px;font-size: 200px;line-height: 200px;text-align: center;font-weight: bold;position: relative;}ul > li > span::before, ul > li > span::after {content: attr(data);display: inline-block;width: 200px;height: 200px;position: absolute;top: 0;left: 0;}ul > li > span::before{color: rgb(0, 0, 0, 0.2);transform: skew(5deg) translateX(10px);transition: .2s;}ul > li > span::after{color: brown;text-shadow: 0 -2px 5px rgb(219, 104, 104);transform-origin: 100% 0 0;transform: rotateX(20deg);transition: .2s;}ul > li > span:hover::before {transform: skew(20deg) translateX(25px) scale(1, 1.1) translateY(10px)}ul > li > span:hover::after{color: rgb(199, 72, 72);transform: rotateX(48deg) translateY(5px)}
</style>

CSS学习(一)——制作新年贺卡相关推荐

学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
用AI帮你画新年贺卡：只需输入几个单词，就能模仿大师名作
晓查发自凹非寺量子位出品 | 公众号 QbitAI 如果你的手法拙劣,没有任何艺术细菌,自己作画完全无法见人.但是你想给妹子送上一张有个性的新年贺卡怎么办? 虽然没有梵高.毕加索的才华,但你能 ...
用python做元旦贺卡_用AI帮你画新年贺卡：只需输入几个单词，就能模仿大师名作...
原标题:用AI帮你画新年贺卡:只需输入几个单词,就能模仿大师名作晓查发自凹非寺量子位出品 | 公众号 QbitAI 如果你的手法拙劣,没有任何艺术细菌,自己作画完全无法见人.但是你想给妹子送 ...
HTML送朋友的唯美新年贺卡/祝福贺卡/生日礼物/情人节礼物
主页展示本组合代码是由五个网页循循嵌套组成,形成"画中画"的效果,右边有5个button按钮,点击即可下滑到新页面,具体效果建议看附文中的代码效果展示.建议用IE EDGE浏览 ...
计算机制作节日贺卡教案,节日贺卡教案
贺卡教学目标:1.认知目标:通过欣赏各种有特色的贺卡,开阔学生的视野,培养审美意识. 2.操作目标:学生能选择身边的各种材料,大胆地设计.制作贺卡,体验绘制的乐趣. 3.情感目标:了解贺卡能丰富人 ...
python制作圣诞贺卡_CodeCards：在线创建你的HTML5圣诞贺卡
Python--画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔) 最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
python节日贺卡图片大全_新年贺卡图片_新年贺卡手工制作图片
新年贺卡图片_新年贺卡手工制作图片导读:小编根据大家的需要整理了一份关于<新年贺卡图片_新年贺卡手工制作图片>的内容,具体内容:新年到来,制作一张手工图片,送上新年满满的祝福,本文是小编 ...

CSS学习(一)——制作新年贺卡

CSS学习(一)——制作新年贺卡相关推荐

最新文章

热门文章