爱心（css动画）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>爱心</title>
       <style>
           /* 每个色块的位置 */
           #div1{
               position: fixed;top: 0;left: 100px;width: 0;height: 0;border: 100px solid red;
           border-radius: 100px;}
           #div2{
               position: fixed;top: 100px;left: 0;width: 0;height: 0;border: 100px solid red;
           border-radius: 100px;}
           #div3{
               position: fixed;top: 100px;left: 100px;width: 0;height: 0;border: 100px solid red;
           }
           /* 爱心位置 */
           #outer{
               margin-left: 40%;
               transform: rotate(45deg);
               position: fixed; top: 0;left: 200px;
               animation: love 1s infinite;
               filter: drop-shadow(0px 0px 50px rgb(255,20,20) );
           }
           /* 设置动画 */
           @keyframes love{
               0%{transform: rotate(45deg) scale(0.8,0.8);opacity: 1;}
               25%{transform: rotate(45deg) scale(1,1);opacity: 0.5;}
           75%{transform: rotate(45deg) scale(1.2,1.2);opacity: 0.8;}
           100%{transform: rotate(45deg) scale(0.8,0.8);opacity: 1;}
           }
       </style>
   </head>
   <body>
       <div id="outer">
           <div id="div1"></div>
           <div id="div2"></div>
           <div id="div3"></div>
       </div>
   </body>
</html>

爱心（css动画）相关推荐

基于HTML+CSS绘制520情人节爱心飘落动画
基于css3绘制爱心飘落动画特效程序员爱情❤520/表白/七夕情人节/求婚❤专用模板 2. 戳下方链接↓查看线上演示地址 ★在线演示地址:https://ruanjiafeng2013.gitee. ...
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
jQuery canvas碎片粒子组成爱心图形动画特效
style.css代码: /* latin-ext */ @font-face {font-family: 'Lato';font-style: normal;font-weight: 900;src ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
html怎么做跳动的心,css动画之如何写个跳动的心送妹子
虽说立志成为一个顶呱呱的全栈工程师,但是在前端方面的涉猎其实是很少的,要说对js的学习还是因为要用nodejs的缘故,总有些本末倒置的感觉. 最近专业内部的大实习是要做一个志愿者银行系统,我们的三人组 ...
【HTML】浪漫程序员 HTML5爱心表白动画
我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心 ...
HTML5+jQuery制作温馨浪漫爱心表白动画特效
原文地址为: HTML5+jQuery制作温馨浪漫爱心表白动画特效原文:HTML5+jQuery制作温馨浪漫爱心表白动画特效 html5相关代码下载:http://www.zuidaima.com/ ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...

爱心（css动画）