详细教程CSS3

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

		body{

			background-color: #ffa5a5;

		}

			.cen{

				width: 200px;

				height:200px;

				background-color: #d5093c;

				/*阴影效果：   水平方向的偏移，垂直方向的偏移，模糊度，颜色*/

				box-shadow: 10px -10px 70px #D5093C;

				animation: 1s aj infinite;

			}

			/*倒圆角指令*/

			.lef{

				border-radius: 100px;

				position: absolute;

				top: 200px;

				left: 180px;

			}

			.rig{

				border-radius: 100px;

				position: absolute;

				top: 200px;

				left: 320px;

			}

			/*旋转角度*/

			.c{

				transform: rotate(45deg);

				position: absolute;

				top: 270px;

				left: 250px;

			}

			/*div:hover{*/

				/*放大原有图形*/

				/*transform: scale(1.3);*/

				/*2d旋转 如果只有一个数据，那么x和y相同角度，给俩个数据就是先x 后y*/

				/*transform: skew(45deg);*/

				/*移动 显示水平位移，然后是垂直位移  （负数就是向上）*/

				/*transform: translate(0px,-5px);*/

			/*}*/

			/*动画标签*/

			@-webkit-keyframes aj{

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

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

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

			}

		</style>

	</head>

	<body>

		<div class="cen lef"></div>

		<div class="cen c"></div>

		<div class="cen rig"></div>

	</body>

</html>

用到CSS3的标签 :

/*阴影效果：   水平方向的偏移，垂直方向的偏移，模糊度，颜色*/

box-shadow: 10px -10px 70px #D5093C;

 /*倒圆角指令*/

border-radius: 100px;

/*旋转角度 deg就是角度的意思*/

transform: rotate(45deg);

/*放大原有图形*/

transform: scale(1.3);

/*动画标签*/

@-webkit-keyframes aj{

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

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

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

			}

/*调用动画的方法*/

animation: 1s aj infinite;

针对不同的浏览器CSS3有不同的方法：

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

CSS_跳动的心的更多相关文章

  1. [WPF,XAML] 跳动的心

    原文:[WPF,XAML] 跳动的心 没什么艺术细胞,原谅,原谅! <Canvas Width="0" Height="0"> <Canvas ...

  2. 使用transform属性和animation属性制作跳动的心

    transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...

  3. TurnipBit-MicroPython开发板：跟孩子一起DIY跳动的心

    天是越来越热了,小心脏也是越跳越快啊,为了表达现在激动的心情,必须做个激动的心开始跳动.紧接着就开始带领大家做个激动的心. 首先说说要借助的平台,这次仅仅需要借助一块TurnipBit开发板. Tur ...

  4. 【ShaderToy】跳动的心❤️

    写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效 ...

  5. 纯CSS制作“跳动的心”demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. html跳动的心实现代码

    <style>         .box{             width: 200px;             height: 400px;             positio ...

  7. CSS3学习笔记（2）—左右跳动的红心

    还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...

  8. 用C++画心（转）

    原地址https://www.zhihu.com/topic/19613730/top-answers 首先上一个动态的心 代码如下: #include <stdio.h> #includ ...

  9. Android开发权威指南（第2版）新书发布

    <Android 开发权威指南(第二版)>是畅销书<Android开发权威指南>的升级版,内容更新超过80%,是一本全面介绍Android应用开发的专著,拥有45 章精彩内容供 ...

随机推荐

  1. Magicodes.Pay，打造开箱即用的统一支付库，已提供ABP模块封装

    Magicodes.Pay,打造开箱即用的统一支付库,已提供ABP模块封装 简介 Magicodes.Pay,是心莱科技团队提供的统一支付库,相关库均使用.NET标准库编写,支持.NET Framew ...

  2. 微软的分布式应用框架 Dapr

    微服务架构已成为构建云原生应用程序的标准,微服务架构提供了令人信服的好处,包括可伸缩性,松散的服务耦合和独立部署,但是这种方法的成本很高,需要了解和熟练掌握分布式系统.为了使用所有开发人员能够使用任何 ...

  3. Comet OJ - 2019国庆欢乐赛 C题 两排房子

    ###题目链接### 题目大意:这里有横着的两排房子,给你每个房子的左端点和右端点.若两排房子中分别有两个房子 x y ,他们在横坐标上有重叠部分(端点重叠也算),则被称为 “对门” 关系. 问你总共 ...

  4. Python 常用模块系列学习（1）--random模块常用function总结--简单应用--验证码生成

    random模块--random是一个生成器 首先: import random    #导入模块 print (help(random))    #打印random模块帮助信息 常用function ...

  5. nyoj 241-字母统计 (python count)

    241-字母统计 内存限制:64MB 时间限制:3000ms 特判: No 通过数:12 提交数:14 难度:1 题目描述: 现在给你一个由小写字母组成字符串,要你找出字符串中出现次数最多的字母,如果 ...

  6. Elasticsearch系列---常见搜索方式与聚合分析

    概要 本篇主要介绍常见的6种搜索方式.聚合分析语法,基本是上机实战,可以和关系型数据库作对比,如果之前了解关系型数据库,那本篇只需要了解搜索和聚合的语法规则就可以了. 搜索响应报文 以上篇建立的mus ...

  7. opencv 5 图像转换(1 边缘检测）

    边缘检测 一般步骤 canny算子 步骤 canny函数 彩色canny #include<opencv2/opencv.hpp> #include<opencv2/highgui/ ...

  8. Java程序性能优化之性能概述

    性能的基本概念 一).什么叫程序的性能? 程序运行所需的内存和时间. 二).性能的表现形式: 1).执行速度: 程序的反应是否迅速,响应时间是否足够短. 2).启动时间:程序从运行到可以处理正常业务所 ...

  9. PHP安全之道学习笔记1：PHP项目安全设置

    在全球范围来看,超过了80%的网站是使用php进行搭建的,由于脚本语言和早期版本设计的诸多原因,php项目存在不少安全隐患.从配置选项来看,可以做如下的优化. 1.屏蔽PHP错误输出. 在/etc/p ...

  10. Curl elasticsearch

    1. 查看cluster state curl localhost:9200/_cluster/health?pretty Or curl localhost:9200/_cluster/health ...