<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			/*类选择器*/

			/*三个div通用的样式*/

			.heart{

				width:200px;

				height: 200px;

				background-color: crimson;

				/*添加光晕效果*/

				/*水平偏移，垂直偏移，模糊度，颜色*/

				box-shadow: 0px 0px 70px crimson;

				/*infin就是一直做动画效果*/

				animation: ani 1s infinite;

			}

			/*左边div的样式*/

			.left{

				/*绝对定位 精确控制元素的位置*/

				position: absolute;

				left: 175px;

				top: 100px;

				/*给矩形定义圆倒角*/

				border-radius: 100px;

			}

			.right{

				/*绝对定位 精确控制元素的位置*/

				position: absolute;

				left: 325px;

				top: 100px;

				/*给矩形定义圆倒角*/

				border-radius: 100px;

			}

			/*下边div的样式*/

			.bottom{

				/*绝对定位 精确控制元素的位置*/

				position: absolute;

				left: 250px;

				top:175px;

				/*旋转45度*/

				transform: rotate(45deg);

			}

			/*定义动画*/

			@keyframes ani{

				/*初始状态*/

				0%{transform: scale(1) rotate(45deg);}

				/*最大状态*/

				50%{transform: scale(1.1) rotate(45deg);}

				/*初始状态*/

				100%{transform: scale(1) rotate(45deg);}

			}

		</style>

	</head>

	<body>

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

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

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

	</body>

</html>

　　

实训篇-Css-跳动的红心的更多相关文章

  1. 实训H5+CSS 太极图

    大概就是上面这个样子 我们准备 两个半圆,两个大圆,两个小圆,然后稍微的进行覆盖就行~ <!doctype html> <html> <head> <meta ...

  2. SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能（maven）

    SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...

  3. JS相关实训

    今天又是无聊的一天,我的脑袋一直在嗡嗡叫,想着一些奇怪的问题,比如我为什么总是感到这么失落,为什么我喜欢的女孩不喜欢我呢,真是头大啊.不过既然有作业了我这个五好公民当然要认真写了.没时间让我思考这么复 ...

  4. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  5. <实训|第三天>Linux登录界面的修改以及Richard Stallman、自由软件运动

    在写博客之前我想说两点: 承认一个错误,昨天写的实训第二天,我把redhat6.7写成了Linux6.7,感谢热心人士的指出! 昨天写的文章名字太长了,今天改善,内容感觉表述不全,希望各位谅解! 官方 ...

  6. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  7. Android实训案例（八）——单机五子棋游戏，自定义棋盘，线条，棋子，游戏逻辑，游戏状态存储，再来一局

    Android实训案例(八)--单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局 阿法狗让围棋突然就被热议了,鸿洋大神也顺势出了篇五子棋单机游戏的视频,我看到了就像膜拜膜拜,就 ...

  8. Android实训案例(四)——关于Game，2048方块的设计，逻辑，实现，编写，加上色彩，分数等深度剖析开发过程！

    Android实训案例(四)--关于Game,2048方块的设计,逻辑,实现,编写,加上色彩,分数等深度剖析开发过程! 关于2048,我看到很多大神,比如医生,郭神,所以我也研究了一段时间,还好是研究 ...

  9. Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

    Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...

  10. springmvc springJDBC 简单实训银行账户管理系统

    springmvc springJDBC 简单实训银行账户管理系统 1.简单介绍一下,在校时每周结束都会有一次学习总结,简称“实训”,这次实训内容是spring,因为是最近热门框架,我就先从基础方面开 ...

随机推荐

  1. 【Flink入门修炼】2-2 Flink State 状态

    什么是状态?状态有什么作用? 如果你来设计,对于一个流式服务,如何根据不断输入的数据计算呢? 又如何做故障恢复呢? 一.为什么要管理状态 流计算不像批计算,数据是持续流入的,而不是一个确定的数据集.在 ...

  2. BIM+物联网，打开数字孪生世界之门

    建筑行业一直在寻求创新和提高效率的方法,以满足日益复杂和迫切的建筑需求.近年来,数字孪生和物联网等新兴技术的崛起为建筑信息模型(BIM)应用带来了全新的可能性.数字孪生技术通过将实体建筑与其虚拟模型连 ...

  3. maven打包出现 ����applets.user.service.UserService����-2022新项目

    一.问题由来 新项目的框架刚搭建好,还不能正常的运行,我们这边就开始写代码,因为项目还在设计阶段,很多东西比如说需求 都还在讨论之中.分层架构采用的是cola4.0的架构,具体的代码由我们自己来进行实 ...

  4. [VueJsDev] 快速入门 - 开发前小知识

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html 开发前小知识 ::: details 目录 目录 开发前小知 ...

  5. centos 添加 公钥，root不用输入密码 ssh-keygen

    centos 添加 公钥,root不用输入密码 ssh-keygen -t rsa -C "yourEmail" 一通回车后,生成 C:\Users\Reciter/.ssh/id ...

  6. Oss流程分析

    最新式上传方案是:前端上传获取token,然后token中带有bucket.账号.回调地址等相关信息,前端直接上传到阿里云,阿里云上传成功后回调之前设定好的地址,完成上传.(下图是技术负责人的图,盗来 ...

  7. HiSi 3516CV500 NNIE(Neural Network Inference Engine) 摸鱼记录(2) --- 模型生成及模型仿真(实例分析)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  8. JS（运算符、流程控制）

    一 运算符(操作符) 1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用的运算符有: 算数运算符 递增和递减运算符 ...

  9. 从零开始写 Docker(七)---实现 mydocker commit 打包容器成镜像

    本文为从零开始写 Docker 系列第七篇,实现类似 docker commit 的功能,把运行状态的容器存储成镜像保存下来. 完整代码见:https://github.com/lixd/mydock ...

  10. Jmeter教程-JMeter 环境安装及配置

    JMeter 环境安装及配置 在使用 JMeter 之前,需要配置相应的环境,包括安装JDK和JMeter. 首先,了解一下JDK,它就是Java的开发工具包. JMeter 是使用 Java 编写的 ...