首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现三角形不断放大效果

Posted in HTML / CSS onApril 13, 2021

一、CSS3三角形不断放大特效

11.1 图片预览

CSS3实现三角形不断放大效果

11.2 index.html代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CSS3三角形不断放大特效</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="wrapper">
			<svg class="triangle-canvas" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
				<polygon class="triangle triangle-1" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-2" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-3" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-4" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-5" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-6" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-7" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-8" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-9" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-10" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-11" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-12" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-13" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-14" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-15" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-16" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-17" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-18" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-19" points="500,200 759,650 241,650" />
				<polygon class="triangle triangle-20" points="500,200 759,650 241,650" />
			</svg>
		</div>
	</body>
</html>

11.3 style.css代码

html {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	height: 100%;
	background: #642B73;
	/* fallback for old browsers */
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #C6426E, #642B73);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.wrapper {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.triangle-canvas {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.triangle {
	fill: none;
	stroke: #fff;
	stroke-width: 15;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-animation: triangle-animation 10s linear infinite;
	animation: triangle-animation 10s linear infinite;
}

.triangle-1 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.triangle-2 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}

.triangle-3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.triangle-4 {
	-webkit-animation-delay: -1.5s;
	animation-delay: -1.5s;
}

.triangle-5 {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

.triangle-6 {
	-webkit-animation-delay: -2.5s;
	animation-delay: -2.5s;
}

.triangle-7 {
	-webkit-animation-delay: -3s;
	animation-delay: -3s;
}

.triangle-8 {
	-webkit-animation-delay: -3.5s;
	animation-delay: -3.5s;
}

.triangle-9 {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
}

.triangle-10 {
	-webkit-animation-delay: -4.5s;
	animation-delay: -4.5s;
}

.triangle-11 {
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
}

.triangle-12 {
	-webkit-animation-delay: -5.5s;
	animation-delay: -5.5s;
}

.triangle-13 {
	-webkit-animation-delay: -6s;
	animation-delay: -6s;
}

.triangle-14 {
	-webkit-animation-delay: -6.5s;
	animation-delay: -6.5s;
}

.triangle-15 {
	-webkit-animation-delay: -7s;
	animation-delay: -7s;
}

.triangle-16 {
	-webkit-animation-delay: -7.5s;
	animation-delay: -7.5s;
}

.triangle-17 {
	-webkit-animation-delay: -8s;
	animation-delay: -8s;
}

.triangle-18 {
	-webkit-animation-delay: -8.5s;
	animation-delay: -8.5s;
}

.triangle-19 {
	-webkit-animation-delay: -9s;
	animation-delay: -9s;
}

.triangle-20 {
	-webkit-animation-delay: -9.5s;
	animation-delay: -9.5s;
}

@-webkit-keyframes triangle-animation {
	0% {
		-webkit-transform: scale(0) rotate(0deg);
		transform: scale(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3) rotate(45deg);
		transform: scale(3) rotate(45deg);
		opacity: 0;
	}
}

@keyframes triangle-animation {
	0% {
		-webkit-transform: scale(0) rotate(0deg);
		transform: scale(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(3) rotate(45deg);
		transform: scale(3) rotate(45deg);
		opacity: 0;
	}
}

到此这篇关于CSS3实现三角形不断放大效果的文章就介绍到这了,更多相关css三角形放大特效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

 

CSS3实现三角形不断放大效果

- Author -

&小小白&

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
长波(3) KDKA(1) Harman Kardon(1) 无线电(12) 广播(8) 保养(1) 短波(8) 收音机(62) 立体声(1) 电台频率(32)
You might like
php学习笔记之 函数声明(二)
2011/06/09 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
使用JS操作页面表格，元素的一些技巧
2007/02/02 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python实现验证码识别
2020/06/15 Python
公司领导推荐信
2013/11/12 职场文书
安全承诺书范文
2014/03/26 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
班子四风对照检查材料
2014/08/21 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2014年材料员工作总结
2014/11/19 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
《时代广场的蟋蟀》读后感：真挚友情，温暖世界！
2020/01/08 职场文书