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 兼容速查表 图文
Apr 01 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
You might like
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
python中尾递归用法实例详解
2015/04/28 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
"引用"与多态的关系
2013/02/01 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
售后专员岗位职责
2013/12/08 职场文书
创业计划书撰写原则
2014/01/25 职场文书
保健品市场营销方案
2014/03/31 职场文书
婚宴邀请函
2015/01/30 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
Python turtle实现贪吃蛇游戏
2021/06/18 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS