HTML+CSS制作七夕情人节求婚动画(520情人节程序员表白)

最新推荐文章于 2022-08-20 11:01:53 发布

原创

最新推荐文章于 2022-08-20 11:01:53 发布 · 1.6w 阅读

69 ·

CC 4.0 BY-SA版权

文章标签：

#七夕情人节 #520情人节HTML #程序员告白源码HTML #求婚动画CSS #炫酷css

HTML+CSS制作七夕情人节求婚动画(520情人节程序员表白)

css太强大了，只要你想做，everything is possible！CSS模仿求婚小动画

效果图如下

在这里插入图片描述

出现的新郎的动画

.w-m img{
   
   
	margin-right: 0;
	float: right;
	margin-top: 60px;
	animation: toWoman 0.5s ease .5s both;
}
@keyframes toWoman{
   
   
	0%{
   
   
		opacity: 0;
		transform: translate(-200px);
	}
	100%{
   
   
		opacity: 1;
		transform: translate(0);
	}
}

html

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="wedding.css">
		<title>模仿CSS动画的求婚小动画</title>
	</head>
	<body>
		<div class="w-t">
			<div class="w-t-m">亲爱的，嫁给我好吗？