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三角形放大特效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
You might like
php数据库抽象层 PDO
2011/05/07 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
js实现3D旋转效果
2020/08/18 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python中循环语句while用法实例
2015/05/16 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
通过实例解析python描述符原理作用
2020/01/22 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
python3中for循环踩过的坑记录
2020/12/14 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
少先队入队活动方案
2014/02/08 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
信用卡工资证明范本
2015/06/19 职场文书
教师学习心得体会范文
2016/01/21 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL