好玩的CSS3(1)-跳动的心和盛开的花助你表白

深碍√TFBOYSˉ_ 2022-02-28 19:16 271阅读 0赞

### css ###

##### CSS3线性渐变（Gradients） #####

[渐变入门文档][Link 1]

background: linear-gradient(angle, color-stop1, color-stop2);

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。了解的应该知道，可以直接理解为我们的背景图片

##### CSS3动画 #####

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;  
[css3动画文档][css3]

##### 圆角半径 #####

[border-radius初学][border-radius]

### 跳动的心 ###

1.  首先我们根据div可能的形状，来画出心形的大概结构
2.  第一种是由两个圆形和一个长方形根据选择来的得到；第二种是一个圆形一个长方形组成一组，共两组，最后旋转也能形成一个心形（当然，不是画两个图形送给你们的女神，要不然…分手）  
    ![两种][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]
3.  考虑到颜色，所以我们使用第一种方式来实现

1.  实现我们的结构并且上色

html, body { 
                height: 100%;
            }
            /* 1.给背景上色 */
            body { 
                margin: 0;
                padding: 0;
                background: #ffa5a5;
            }
            /* 2.是父盒子居中显示 */
            .chest { 
                width: 500px;
                height: 500px;
                margin: 0 auto;
                position: relative;
            }
            /* 3.将三个元素都进行定位，并且通过渐变上色 */
            .heart{ 
                position: absolute;
                z-index: 2;
            }
            /* 4.实现圆形结构 */
            .side{ 
                top: 100px;
                width: 220px;
                height: 220px;
                border-radius: 110px;
                background: linear-gradient(90deg, #F50A45 0%, #d5093c 40%);
            }
            .left{ 
                left: 59px;
            }
            .right{ 
                right: 59px;
                background: linear-gradient(45deg, #F50A45 0%, #d5093c 40%);
            }
            /* 5.实现旋转的长方形 */
            .center{ 
                width: 210px;
                height: 210px;
                transform: rotate(45deg);
                position: absolute;
                bottom: 100px;
                left: 145px;
                background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
            }
            /* 6.发现看起来有点怪怪的 */
            .left{ 
                z-index: 3;
            }

1.  加上动画使其跳动就不会那么怪了

.heart{ 
                position: absolute;
                z-index: 2;
                animation: move 0.7s ease 0s infinite normal;
            }
    /* 圆形旋转还是原来的样子，之前我们给底部的长方形盒子加旋转，因此要加上去 */
            @keyframes move { 
                0% { 
                    transform: scale(1) rotate(45deg);
                    box-shadow:0 0 40px #d5093c;
                }
    
                50% { 
                    transform: scale(1.1) rotate(45deg);
                    box-shadow:0 0 70px #d5093c;
                }
                100% { 
                    transform: scale(1) rotate(45deg);
                    box-shadow:0 0 40px #d5093c;
                }
            }

### css3实现花瓣盛开 ###

先上实例效果图  
![实例图][20190328154017347.gif]

1.  根据实例图片我们来构造html结构

1.  构造每一片花瓣.petal

.petal{ 
                position: absolute;
                bottom: 0;
                left: 50%;
                margin-left: -150px;
                width: 150px;
                height: 300px;
                border-radius: 75px/150px;
                background:pink;
                opacity:0.6;
            }

我们是两头尖，而这样是平滑的，所以不行  
3. 先来看一个例子

![效果是一个扇形][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]  
那么右下角也是一样，给其设置半径为300px，即可实现花瓣  
4. css结构和动画

1.  代码比较冗余，我们实际开发可以使用less或则sass

[Link 1]: http://www.runoob.com/css3/css3-gradients.html
[css3]: http://www.runoob.com/css3/css3-animations.html
[border-radius]: https://www.cnblogs.com/zhengxiao/p/5865083.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220227/9c1ced8c14da4730883a50815b556aba.png
[20190328154017347.gif]: /images/20220227/1fc05d9ea2fc4b598708e774cc0d8d1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220227/e4a1f3efa8bf460d90912150fc3bf73b.png