css动画翻开折叠生日贺卡

做法:平面div,设置前后伪类分别覆盖一半大小,设置前面的伪类旋转点为最左边的线,旋转角度为负值向外设置后面的伪类旋转点为最右边的线,旋转角度为正值向内设置最外层元素transform-style: preserve-3d;可以查看3d效果transform: perspective(900px) rotateX(45deg) rotateY(25deg);透视和旋转一定角度增强立体感

代码示例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="./index.css"><style>.box{width: 400px;height: 400px;border: solid 1px blueviolet;display: flex;align-items: center;justify-content: center;}.d1{width: 300px;height: 200px;background-color: orange;position: relative;transform-style: preserve-3d;transform: perspective(900px) rotateX(45deg) rotateY(25deg);display: flex;align-items: center;justify-content: center;color: white;}.d1::before,.d1::after{content: '';background-color:#E34336;width: 50%;height: 100%;position:absolute;border-right: solid 2px orange;box-sizing: border-box;}.d1::before{content: '生日';color: white;left: 0;top: 0;display: flex;justify-content: flex-end;align-items: center;transition: 2s;transform-origin: left;}.d1::after{content: '贺卡';color: white;right: 0;top: 0;display: flex;justify-content: flex-start;align-items: center;transition: 2s;transform-origin: right;}.d1:hover::before{transform:rotateY(-180deg);}.d1:hover::after{transform:rotateY(180deg);}</style></head><body class='me'><div class='box'><div class='d1'>生日快乐</div></div></body>
</html>

效果图:

css动画翻开折叠生日贺卡相关推荐

css 右上角翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
大学计算机课程制作生日卡片,DIY手工制作生日贺卡
人们在日常生活中经常会遇到好朋友过生日,这时候肯定需要送上一张生日卡片,其实大家没有必要去礼品店购买生日卡片,可以自己亲手制作一张生日卡片,这里想教大家的是简单可爱的生日贺卡制作教程,自己一个人轻轻松 ...
Scratch官方教程中文版(2)——制作可交互的生日贺卡
原文网址:https://www.toutiao.com/i6546125948423504392/ 可交互的生日贺卡运行效果图一.添加背景幕布从背景库里选择聚会背景,你也可以选择其他背景,你可以 ...
java生日贺卡,简单生日贺卡制作，涨知识了
小朋友同学生日,一起做张贺卡来表示心意. 工具/材料不同颜色彩纸(A4彩纸需要两张,其他可以是小的) 剪刀或者裁纸刀溶胶枪或者固体胶铅笔尺子一张A4卡纸操作方法 01 先拿一张小的折纸或者 ...
html图片视频渲染原理,初识浏览器渲染原理和CSS动画
1.浏览器渲染原理浏览器到底是怎么将一个html文件渲染成生动的页面的?话不多说,直接看图以图中的过程,浏览器的渲染过程大致就是: 通过HTML解析将HTML文件解析为 DOM 树; 通过CSS解 ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
女友生日贺卡(网页),(女朋友收到后感动哭了，后来我也哭了)
早上我上CSDN查资料(签到,抽谢谢惠顾)的时候,首页推送了一个给女朋友做网页表白程序的博客,突然想起女朋友明天的生日,于是花了两小时做了个生日贺卡送给她,没想到她收到后感动哭了(把我打了) pc展示 ...
html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...

css动画翻开折叠生日贺卡

css动画翻开折叠生日贺卡相关推荐

最新文章

热门文章

css动画 翻开折叠生日贺卡

css动画 翻开折叠生日贺卡相关推荐

最新文章

热门文章

css动画翻开折叠生日贺卡

css动画翻开折叠生日贺卡相关推荐