纯CSS实现粉红爱心动画

动画效果：

1、画一个爱心

<view class="heart"></view>

    .heart {position: relative;width: 50rpx;height: 50rpx;background-color: #EF686E;transform: rotate(-45deg);}.heart:before {content: "";position: absolute;top: -25rpx;left: 0;width: 50rpx;height: 50rpx;border-radius: 50%;background-color: #EF686E;}.heart:after {content: "";position: absolute;top: 0px;left: 25rpx;width: 50rpx;height: 50rpx;background-color: #EF686E;border-radius: 50%;}

2、让爱心动起来

<view class="heart heart1"></view>

    @keyframes up {0% {top: 500rpx;}100% {top: 0;}}@keyframes side {0% {margin-left: 0;}100% {margin-left: 150rpx;}}// 时间 透明度 大小 旋转角度 随意修改.heart1 {transform: rotate(300deg) scale(0.6);opacity: .7;animation: up 15s linear infinite, side 6s ease-in-out infinite alternate;}

3、多个爱心

<template><view><view class="heart heart1"></view><view class="heart heart2"></view><view class="heart heart3"></view><view class="heart heart4"></view><view class="heart heart5"></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">.heart {position: relative;width: 50rpx;height: 50rpx;background-color: #EF686E;transform: rotate(-45deg);}.heart:before {content: "";position: absolute;top: -25rpx;left: 0;width: 50rpx;height: 50rpx;border-radius: 50%;background-color: #EF686E;}.heart:after {content: "";position: absolute;top: 0px;left: 25rpx;width: 50rpx;height: 50rpx;background-color: #EF686E;border-radius: 50%;}@keyframes up {0% {top: 500rpx;}100% {top: 0;}}@keyframes side {0% {margin-left: 0;}100% {margin-left: 150rpx;}}// 时间 透明度 大小 旋转角度 随意修改.heart1 {transform: rotate(300deg) scale(0.6);opacity: .7;animation: up 15s linear infinite, side 6s ease-in-out infinite alternate;}.heart2 {left: 550rpx;transform: rotate(-30deg) scale(0.5);opacity: .5;animation: up 15s linear infinite, side 5s ease-in-out infinite alternate;}.heart3 {left: 200rpx;transform: rotate(300deg) scale(0.5);opacity: .4;animation: up 15s linear infinite, side 4s ease-in-out infinite alternate;}.heart4 {left: 350rpx;transform: rotate(-25deg) scale(0.6);opacity: .7;animation: up 18s linear infinite, side 2s ease-in-out infinite alternate;}.heart5 {left: 450rpx;transform: rotate(-30deg) scale(0.6);opacity: .6;animation: up 7s linear infinite, side 1s ease-in-out infinite alternate;}
</style>

纯CSS实现粉红爱心动画相关推荐

css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画由于发现了css的这个现象当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动所以我忽然想到,实现人的走路动画并不是不可能的了 ...
css3 太极动画,纯css实现太极阴阳鱼动画
原标题:纯css实现太极阴阳鱼动画今天看到一个有意思的效果,闲来无事做一个: 把2d静态的太极图改成了3d,阴极和阳极分到了两个平面里实现旋转效果,这个好实现,重点是实现它的透明效果,平面太极图显示 ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
纯CSS下划线出现动画
一.效果二.代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
html导航怎么加图标,纯 CSS 实现导航图标动画
毫无艺术细胞的我,一直以来都只会切图而不会做图.正如前几天,我给博客导航菜单加上简单的动画,就显得违和感十足.感叹 2017 的现在,做网站普遍已经不用过多的考虑 IE 系列浏览器,一些简单的动画可以 ...
5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画
目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 box-sizing 属性 2.5 C ...
java旋转爱心,前端 CSS : 3# 纯 CSS 实现粉色爱心
介绍原文链接感謝 comehope 大佬的 [前端每日实战] 工作三个月觉得糟糕跑路(顺带劝一下像我一样的新人, 不要急于入职, 一定要挑一挑)回家重新补充了一下基础知识及 node, 身为一个前 ...

纯CSS实现粉红爱心动画

1、画一个爱心

2、让爱心动起来

3、多个爱心

纯CSS实现粉红爱心动画相关推荐

最新文章

热门文章