详细教程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. Python 基础之socket编程（三）

    python 基础之socket编程(三) 前面实现的基于socket通信只能实现什么呢?在tcp协议的通信中就是一个用户说一句,服务端给你回一句,你再给服务端说一句,服务端再给你回一句,就这样一直友 ...

  2. 读《MySQL必知必会》我学到了什么？

    前言 最近在写项目的时候发现自己的SQL基本功有些薄弱,遂上知乎查询MYSQL关键字,期望得到某些高赞答案的指点,于是乎发现了 https://www.zhihu.com/question/34840 ...

  3. java多线程与线程并发五：多个线程访问共享对象和数据的方式

    本节的内容主要是对前面几节提到的线程间共享数据的方式做一个总结. 线程之间共享数据有以下几种方式: 1.如果每个线程执行的代码相同,可以使用同一个Runnable对象. 2.如果每个线程执行的代码不同 ...

  4. 网站搭建-2-本地网站搭建-安装Linux虚拟机/ 安装IIS Windows

    搭建网站-1-域名申请参见公众号 生物信息系统(swxxxt) 首先,已经拥有了一个可以正常使用的域名. 之前买了两年的阿里的服务器,由于是Windows的,最后不了了之了(因为当时找的代码都是lin ...

  5. 在oracle数据库中创建DBLink

    涉及到两个数据库之间的访问时,可以创建datebase link来互相访问. ’创建方法: 1.通过PL/SQL客户端,找到datebase link,右键新建 输入相应信息 2.直接用命令行创建 一 ...

  6. MyBatis直接执行sql语句mapper

    <select id="queryBySql" resultType="HashMap"> <![CDATA[ ${sql} ]]> & ...

  7. C++中对C的扩展学习新增语法——namespace

    NAMESPACE语法 namespace主要解决了命名冲突的问题,语法如下 Namespace注意事项: namespace中可以定义常量.变量.函数.结构体.枚举.类等. namespace 只能 ...

  8. requests模块发送带headers的Get请求和带参数的请求

    1.在PyCharm开发工具中新建try_params.py文件: 2.try_params.py文件中编写代码: import requests#设置请求Headers头部header = {&qu ...

  9. C语言|博客作业07

    这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9935 我在这个课程的 ...

  10. Apache服务安装及一些基本操作

    注意:安装apache服务之前记得搭建yum仓库 1.安装apache服务,输入命令“yum install httpd” 安装成功后,会这样显示 2.需要对Apache服务进行启动,输入命令“sys ...