前言

心形加载动画

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

代码如下：

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>心</title></head><body><div class="container"><div class="loading"><span></span><span></span><span></span></div><div class="shadow"></div></div></body></html>

二、css

代码如下：

* {/* 初始化 */margin: 0;padding: 0;}body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;}.container {/* 绝对定位 */position: absolute;top: 40vh;}.loading {/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */animation: rotate 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;}.loading span {width: 100px;height: 100px;display: block;position: absolute;background-color: #ff8f92;border: 1px solid #ff8f92;border-radius: 100%;}.loading span:nth-child(1) {transform: translate(-28px, -28px);/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */animation: animate1 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;}.loading span:nth-child(2) {transform: translate(28px, -28px);/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */animation: animate2 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;}.loading span:nth-child(3) {position: relative;border-radius: 0;transform: scale(0.98) rotate(-45deg);/* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */animation: animate3 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;}/* 阴影部分 */.shadow {position: relative;width: 100px;height: 20px;background-color: #d9d9d9;border-radius: 50%;top: 50px;animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;}/* 定义动画 *//* 心形 左圆 */@keyframes animate1 {60% {transform: scale(0.4);}}/* 心形 右圆 */@keyframes animate2 {40% {transform: scale(0.4);}}/* 心形 中间部分 */@keyframes animate3 {50% {border-radius: 100%;transform: scale(0.5) rotate(-45deg);}100% {transform: scale(0.98) rotate(-45deg);}}/* 再加个心形整体的旋转动画 */@keyframes rotate {50% {transform: rotate(360deg);}100% {transform: rotate(720deg);}}/* 阴影动画 */@keyframes shadow {50% {background-color: #f2f2f2;transform: scale(0.5);}}

总结

使用动画设置阴影变化 animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
三个span形成组成形状,通过动画改变

css 实现心形加载动画相关推荐

心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
html动画爱心制作代码,CSS心形加载的动画源码的实现
废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .heart-loading { margin-top: 120px; width: 200px; height: 200px; ...
HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
css线条伸缩_CSS3加载动画之线条伸缩
加载动画之线条伸缩效果图思路通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影.对动画而言,keyframes 和 animation 是必不可少的技巧.同时本例中使用了 ...
css盒心形的代码过程,CSS心形加载的动画源码的实现
.heart-loading { margin-top: 120px; width: 200px; height: 200px; } ul { list-style: none; display: f ...
HTML5+CSS3小实例：手风琴式加载动画
HTML5+CSS3做一个手风琴式的加载动画,这动画.这质感.这配色,就问你喜不喜欢?!这个案例的知识点主要是:css的自定义属性 + 动画延迟 + 颜色滤镜(hue-rotate). 效果: 源码: ...
Web 页面加载动画
Web 页面加载动画在 Web 开发中,通常会需要在页面中添加加载动画,以减少用户等待页面加载的焦虑感.下面介绍一个常用的页面加载动画的实现方法,同时介绍其 CSS 和 JavaScript 代码. ...

css 实现心形加载动画

文章目录

前言

一、html代码

二、css

总结

css 实现心形加载动画相关推荐

最新文章

热门文章