边框圆角练习--跳动的心

绝对定位后的居中

margin-left: -125px;

技巧: 在企业开发中推荐使用如下的方式让元素居中

水平居中: left:50%; transform: translateX(-50%);

垂直居中: top:50%; transform: translateY(-50%);

     .all{
            width: 450px;
            height: 400px;
            box-sizing: border-box;
            margin: 200px auto;
            position: relative;
        }
        .left, .right{
            width: 250px;
            height: 250px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            box-shadow: 0 0 40px red;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .bottom{
            width: 250px;
            height: 250px;
            background: red;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%) rotateZ(45deg);
            box-shadow: 0 0 40px red;
        }
        .all{
            animation: sport 1s linear 0s infinite normal;
        }
        @keyframes sport {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.1);
            }
            100%{
                transform: scale(1);
            }
        }

    

<div class="all">

<!--左边的小圆-->

<div class="left"></div>

<!--右边的小圆-->

<div class="right"></div>

<!--底部的尖尖-->

<div class="bottom"></div>

</div>

 

原文地址:https://www.cnblogs.com/zhangzhengyang/p/11100166.html

时间: 2024-11-13 10:26:10

边框圆角练习--跳动的心的相关文章

CSS3 border-radius边框圆角

CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html 在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :

ss3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能: 1 <div style=" border-top-left-ra

css3实现边框圆角样式

  基本语法: border-radius: 5px; 兼容大多数浏览器: /*兼容Mozilla(Firefox, Flock等浏览器)*/ -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; /*兼容WebKit (Safari, Chrome等浏览器)*/ -web

CSS的display、hover、overflow、&amp;copy(版权符号)、borer-radius(边框圆角)

一.display: none 隐藏 block显示     visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值都是隐藏对像,但是它们隐藏对像有点区别. display和visibility的区别:display隐藏相当于这个元素没有了,visibility的隐藏该元素所占的位置还在,只是内容隐藏了. 二.hover:不是一个样式,用元素的ID或者CLASS之类后面跟冒号hover,代表鼠标放到此元素上显示哪

边框宽度 边框圆角 边框颜色

self.label1.layer.borderWidth=1;//边框宽度 //self.label1.layer.cornerRadius=5;//边框圆角 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGColorRef colorref = CGColorCreate(colorSpace,(CGFloat[]){ 245.0/256, 166.0/256, 35.0/256, 1 }); self.label1

一颗跳动的心(css3)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>一颗跳动的心</title> <style type="text/css"> *{ margin:0 ; padding:0; } body{ background:#1a1c24; } /* 盒子 */ #heart,#

CSS实现跳动的心形图案?

原理: 1. 创建1个div <div class="heart"></div> .heart { position:relative; width: 100px; height: 100px; margin: 100px auto; background-color: tomato; } 2. 用伪元素:before和:after,画出一个粉色的圆和一个黄色的圆,并将圆心分别定位在正方形的左边和上边. 注意: 设置:before和:after时必须设置其con

css3跳动的心制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>心的跳动</title> <link rel="stylesheet" type="text/css" href="css/love.css"> <script src="j

跳动的心 有阴影 跳动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>心的跳动</title> <style type="text/css"> *{ margin: 0; padding: 0; } body { width: 100%; background-color: #000; } .all