端午到了,吃个咸鸭蛋吧


theme: fancy

highlight: a11y-dark

我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛

前言

看到大家轰轰烈烈的初夏创意层出不穷,非前端人员感到非常羡慕,非常想挤入大佬们的世界,凑巧今天发了端午节礼盒,里面有粽子,咸鸭蛋,粽子对我这个选手有点难,而且大家都画过了,我就画个简单的咸鸭蛋的吧

这个应该没人画吧,先来瞅瞅吧,特别简单,就是菜鸟水平
https://code.juejin.cn/pen/7103907209171435533

代码详细

主要分为三部分

第一部分 鸭蛋白

先画一个椭圆,表示鸭蛋白,这是鸭蛋白的详细设置,
这里学到的知识点就是画椭圆的方法
1、元素首先是个矩形,有宽和高
“{width:宽度值;height:高度值;}”样式;

2、要想把矩形元素变成椭圆,给矩形元素添加“{border-radius:100%;}”圆角样式
注:如果宽和高相同,就变成了圆形

3 可以用transform样式的rotate(angle)来设置椭圆的倾斜角度

详细代码

  1. #app {
  2. border-radius: 100%;
  3. background: #f1e4ca;
  4. padding: 20px;
  5. width: 150px;
  6. height: 200px;
  7. transform:rotate(60deg);
  8. }

第二部分 鸭蛋黄

同鸭蛋白,在鸭蛋白里画一个小圆,设置为合适的颜色

详细参数如下

  1. #circle {
  2. border-radius: 100%;
  3. background: #FFA500;
  4. padding: 20px;
  5. width: 100px;
  6. height: 100px;
  7. }

第三部分,鸭蛋动起来

单独画个咸鸭蛋比较无趣,稍微让它跳跳

这里学到了动画的一些知识:CSS动画特效—animation

基本用法 定义动画名称和动作:

@keyframes 动画名称 {

/初始状态/

0%{ 动作 }

/结束状态/

100%{动作 }

}

基本动作用transform来定义,transform是变形,改变的意思。它有四个属性。

  • rotate(旋转)
  • skew(扭曲)
  • scale(缩放)
  • translate(移动)

2、使用动画:

基本用法
使用动画的元素 {animation:动画名称 动画持续时间 动画速度}

咸鸭蛋的动画代码如下

  1. @keyframes dong {
  2. 0% {transform: translate(0px, 0px);}
  3. 50% {transform: translate(10px, 20px);}
  4. 100% {transform: translate(0px, 0px);}
  5. }
  6. #app {animation: dong 1s infinite;}

结语

好了,就到这里啦,css很有趣,希望我有个小黄鸭


文章标签:

原文连接:https://juejin.cn/post/7103930963482116132

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?