2019开工大吉

2018年终总结:

回顾《2018新起点-脱贫计划》,仔细对比了一下自己2018年的年度计划,完成度不到20%,结果是很失败的。主要是因为目标设置不合理,自我驱动力下降,拖延症越来越严重。2018年在工作中的收获还是有目共睹的。主要负责React Native APP开发和Python数据抓取,数据的抓取过程中用到了iOS逆向,做过一次数据爬取的分享(由于没有准备的很充分,结果不是很成功)。不足之处是数据抓取这块还不够深入,很多地方还可以优化。

2019的计划与展望:

计划:

  • 1、 准备好一次技术分享
  • 2、 学习Flutter
  • 3、 看5本书
  • 4、 App Store上线一个app
  • 5、 6篇博客文章
  • 6、 学一门编程语言
  • 7、 设计模式学习

展望:

2019年,希望平衡好家庭和生活,努力实现既定的目标!

### 使用 Vue 实现卡片翻转动画效果 为了创建一个具有吸引力的“开工大吉”的卡片翻转效果,在Vue中可以利用CSS3变换属性来完成这一目标。下面是一个完整的示例,展示了如何通过Vue组件配合特定样式达到预期的结果。 #### HTML结构与绑定事件 定义了一个基础模板用于显示正面和反面的内容,并绑定了`@click`事件触发器以便用户交互时能够激活翻转逻辑[^1]。 ```html <template> <div class="flip-container" @click="toggleFlip"> <div :class="{ 'flipped': isFlipped }" class="flipper"> <!-- 正面 --> <div class="front face">开工</div> <!-- 反面 --> <div class="back face">大吉</div> </div> </div> </template> ``` #### JavaScript部分 此段脚本负责管理状态变化以及响应用户的点击操作。当检测到点击动作后会改变`isFlipped`变量的状态从而引起视图更新并执行翻转过渡。 ```javascript <script setup> import { ref } from "vue"; let isFlipped = ref(false); function toggleFlip() { isFlipped.value = !isFlipped.value; } </script> ``` #### CSS样式设置 这里设置了`.flip-container`, `.flipper`, 和两个代表正反两面的类`.face`的基础布局方式;同时为`.flipper.flipped`增加了transform规则以实现三维空间内的Y轴旋转效果。 ```css <style scoped> .flip-container { perspective: 1000px; /* 设置透视距离 */ } .flipper { width: 200px; height: 300px; position: relative; transform-style: preserve-3d; transition: all .6s ease-out; } .face { backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: large; color: white; } .front { background-color: red; } .back { background-color: green; transform: rotateY(180deg); } /* 当添加 flipped 类时应用 */ .flipped { transform: rotateY(180deg); } </style> ``` 上述代码片段共同作用下可以在Vue环境中构建出一张可互动式的双面卡片,每次点击都会发生优雅平滑的翻转变换,非常适合用来作为庆祝新年的特别页面元素之一。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值