CSS3煎制荷包蛋动画特效,优质男士表白必备

这篇具有很好参考价值的文章主要介绍了CSS3煎制荷包蛋动画特效,优质男士表白必备。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

你有多久没吃过早餐了?你是否每天忙碌到很晚,结果导致早上起来也很晚,匆匆忙忙来不及吃早餐,更别说自己做了。一直到现在,你有多久没有吃到过母亲做的早饭了?我们在外奔波,希望家人安康?你有多久没有给自己的爱人做过早餐了?害,谁的婚后日子不是刀光剑影的,还奢望早餐?哈哈,开个玩笑,你别当真!

CSS3煎制荷包蛋动画特效,优质男士表白必备

目录

实现思路 

平底锅的实现

锅把儿的实现

煎蛋的实现

完整源代码


 

实现思路 

本案例为纯CSS3代码特效,已省去HTML5的DOM元素部分,而是基于body元素开发的,也是偷了个懒,小伙伴真实情况下还是要做一个DIV元素的;

为BODY背景填充颜色,因为主要区域是在BODY元素上实现的,所以设置了widthheight

设置平底锅,主要采用背景圆角边框border-radius的角度设置;

平底锅的锅把(抓手还是锅把比较好听?),也不需要单独使用某个元素,直接采用::after伪类元素进行控制;

煎蛋氛围蛋清和蛋黄,哈哈,这大半夜的,我都饿了,口水流到了键盘上,但蛋黄必定不能是纯圆角的,需要有一定的平缓度,这就需要对border-radius设置更多的属性值

平底锅的实现

平底锅设置一定的width和height属性,直接设定border-radius使其改变圆角边框的值,而且煎蛋嘛,肯定会有一个动画的过程,就像我们手拿平底锅,上下滑动,就需要animation的动画效果加持,CSS3代码如下:

@-webkit-keyframes panmov {
  0%, 10% {
    transform: rotate(5deg);
  }
  90%, 100% {
    transform: rotate(-5deg);
  }
}

CSS3煎制荷包蛋动画特效,优质男士表白必备

 

锅把儿的实现

锅把儿其实就是一个长方形,但这里采用::after的伪类元素进行布局,需要添加border-raidus做为圆角设置,box-shadow做一定的阴影效果,而采用transform做一定的偏移,去与平底锅定位,CSS3部分重点代码如下:

border-radius: 0 20px 20px 0;
box-shadow: 3px 0 3px #eee2 inset;
transform: rotate(5deg);

CSS3煎制荷包蛋动画特效,优质男士表白必备

 

煎蛋的实现

煎蛋有没有见过,没见过赶紧煎一个试试就看到了,蛋清铺开,一个圆,蛋黄不铺开,还是一个圆形,我这个锅里有2个圆,一个是鸡蛋,另一个还是鸡蛋,哈哈,这段话咋这么熟悉,好像上学的时候学过。

采用::before的伪类元素进行布局,transform进行位置偏移,蛋清也就是白色,设置一定的width和height,然后重要的是圆角边框的border-radius元素的值要有一定的大小不同,才能显得比较随和,不是那么纯圆,蛋黄采用background-image进行设置,为了和平底锅一起上下移动,显得像是真的在被人拿在手里,也采用animation动画进行设置,部分CSS3代码如下:

background: #fff;
  background-image: radial-gradient(circle 3px, #fff6 90%, transparent 10%), radial-gradient(circle 25px, #ffc400 90%, transparent 10%), radial-gradient(circle 25px, #ffae00 100%, transparent 0);
  background-repeat: no-repeat;
  background-position: -4px -6px, -2px -2px, -1px -1px;
  box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
  border-radius: 47% 36% 50% 50%/49% 45% 42% 44%;
  -webkit-animation: ylmov 0.6s ease-in-out infinite alternate;
          animation: ylmov 0.6s ease-in-out infinite alternate;

CSS3煎制荷包蛋动画特效,优质男士表白必备

 

完整源代码

喜欢的小伙伴可以复制源代码到自己的HTML文档中,不需要添加DOM元素,直接完全复制即可,代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS3煎制荷包蛋</title>
<style>

html {
  height: 100vh;
  width: 100%;
  background: #607D8B;
  display: grid;
  place-items: center;
}

body {
  width: 200px;
  height: 200px;
  position: relative;
  background: #222;
  border-radius: 50%;
  box-sizing: border-box;
  transform-origin: 340px 100px;
  border: 4px solid #333;
  box-shadow: 3px 4px #0003 inset, 0 0 6px #0002 inset;
  -webkit-animation: panmov 0.4s ease-in-out infinite alternate;
          animation: panmov 0.4s ease-in-out infinite alternate;
}
body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) skew(-15deg, 15deg) rotate(-15deg);
  width: 125px;
  height: 123px;
  background: #fff;
  background-image: radial-gradient(circle 3px, #fff6 90%, transparent 10%), radial-gradient(circle 25px, #ffc400 90%, transparent 10%), radial-gradient(circle 25px, #ffae00 100%, transparent 0);
  background-repeat: no-repeat;
  background-position: -4px -6px, -2px -2px, -1px -1px;
  box-shadow: -2px -3px #0002 inset, 0 0 4px #0003 inset;
  border-radius: 47% 36% 50% 50%/49% 45% 42% 44%;
  -webkit-animation: ylmov 0.6s ease-in-out infinite alternate;
          animation: ylmov 0.6s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 96px;
  height: 30px;
  width: 140px;
  background: #222222;
  border-radius: 0 20px 20px 0;
  box-shadow: 3px 0 3px #eee2 inset;
  transform: rotate(5deg);
} 

@-webkit-keyframes panmov {
  0%, 10% {
    transform: rotate(5deg);
  }
  90%, 100% {
    transform: rotate(-5deg);
  }
}

@keyframes panmov {
  0%, 10% {
    transform: rotate(5deg);
  }
  90%, 100% {
    transform: rotate(-5deg);
  }
}
@-webkit-keyframes ylmov {
  to {
    border-radius: 50% 36% 50% 50%/49% 50% 45% 45%;
    background-position: -2px -4px, 2px 2px, 1px 1px;
  }
}
@keyframes ylmov {
  to {
    border-radius: 50% 36% 50% 50%/49% 50% 45% 45%;
    background-position: -2px -4px, 2px 2px, 1px 1px;
  }
}
</style>
</head>
<body>


</body></html>

不管怎么样,大家早餐一定记得吃,哪怕稍微吃一点,身体是一切的本钱嘛文章来源地址https://www.toymoban.com/news/detail-465394.html

到了这里,关于CSS3煎制荷包蛋动画特效,优质男士表白必备的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快六一啦,学习CSS3实现一个冰淇淋动画特效

    快六一啦,小时候顶多吃个小冰棍,或者是那种小冰袋,现在的小朋友真是好,动不动就能吃到冰淇淋,今天用CSS3实现一个冰淇淋的动画特效吧   目录 实现思路 桶身的实现 冰淇淋身体的实现 五彩颗粒的实现 HTML源码 CSS3源码 最后 实现思路 本文采用多DOM的方式进行布局,冰

    2024年02月06日
    浏览(34)
  • 看不上日全食了,学习CSS3,实现一个日全食的动画特效

    看新闻说,今年全球唯一一次日全食将于北京时间4月9日凌晨在北美洲地区上演。看来那边我是去不成了,日全食也看不见了,不过我可以用CSS3实现一个日全食的动画特效。一起来看一下吧。   目录 1. 实现思路 2. 天空的生成已经渐变 3 太阳的生成以及渐变 4 月亮的生成以及

    2024年04月09日
    浏览(39)
  • css3+js 画出爱心特效

    要使用CSS3和JavaScript绘制爱心特效,可以使用CSS3的动画和过渡效果来创建爱心的形状,并使用JavaScript来控制动画的触发和交互。以下是一个简单的示例代码: HTML: CSS: JavaScript: 在上述示例中,我们首先在HTML中创建一个包含爱心形状的 div 元素,并添加一个按钮来切换动画效果

    2024年02月12日
    浏览(46)
  • 玩转css逐帧动画,努力成为更优质的Ikun~

    css3的 animation 想必大家都知道吧,那 steps 逐帧动画你知道吗?对于我来说,实际工作及练习中也很少用到这种跳跃式变化的动画,而它 start 和 end 的解释又比较“不说人话”,以前用到 steps 动画的时候,常常是靠调试,来回设置 start 和 end ,主打的就是瞎猫碰上死耗子。虽

    2024年02月08日
    浏览(34)
  • css3实现3D立方体旋转特效源码

    CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效 css3实现3D立方体旋转特效代码

    2024年04月09日
    浏览(49)
  • CSS3绘制3D银行卡片层叠展示特效

    使用纯css3绘制3D银行卡层叠展示特效 具体示例如下 实现这个3D卡片,需要在最外层父级元素添加 transform: translate3d(0, 0, 0);transform-style: preserve-3d ,声明 3D ,结合 css3 中 transform 的变换,平移就可以实现 村民私自搭桥收费被判刑 2023-07-10 聊一下大学几年如何渡过 2023-07-09 聊一聊抑郁

    2024年02月16日
    浏览(49)
  • 【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

    CSS3 样式中 , 设置 动画速度曲线 的属性是 animation-timing-function 属性 ; animation-timing-function 属性定义了动画从 初始 CSS 样式 变为 结束状态 时 所消耗的时间 ; animation-timing-function 属性常用 属性值 如下 : linear : 动画在整个执行过程中速度都是匀速的 ; ease : 默认属性值 , 动画首先

    2024年02月13日
    浏览(45)
  • 19.CSS雨云动画特效

    2024年02月10日
    浏览(38)
  • 【css3】涟漪动画

    2024年02月06日
    浏览(41)
  • CSS3 动画

    个人主页: 学习前端的小z 个人专栏: HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存

    2024年04月26日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包