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实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
软件设计的目标是什么
2016/12/04 面试题
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
公司授权委托书范本
2014/04/03 职场文书
法人授权委托书
2014/09/16 职场文书
2014全年工作总结
2014/11/27 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书