今天用javascript,css,html做了一个动态效果
一.先画一个爱心
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.f{
width: 200px;
height: 180px;
position: relative;
left:200px;
top:200px;
}
.f>div{
position: absolute;
}
.z1,.z2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.z2{
left:70px;
}
.z3{
width: 100px;
height: 100px;
background-color: red;
left: 35px;
top: 35px;
transform: rotate(45deg);
}
</style>
<body>
<div id="divF"class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
</div>
</body>
</html>
结果图:
二.制作爱心动态效果:
apocity属性是指定一个元素的透明度。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@keyframes jump {
from{
transform: scale(0.5);
opacity: 0.5;
}to{
transform: scale(2);
opacity: 1;
}
}
.f{
width: 200px;
height: 180px;
position: relative;
left:200px;
top:200px;
}
.m{animation: jump 0.7s ease alternate infinite;}
.f>div{
position: absolute;
}
.z1,.z2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.z2{
left:70px;
}
.z3{
width: 100px;
height: 100px;
background-color: red;
left: 35px;
top: 35px;
transform: rotate(45deg);
}
button{
width:80px;
height: 40px;
background-color: skyblue;
border: none;
color: white;
font-size: large;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 8px 5px gray;
margin-left: 20px;
}
button:active{
transform: translate(5px,5px);
}
</style>
<body>
<button onclick="start1()">开始</button>
<button onclick="stop1()">结束</button>
<div id="divF"class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
</div>
</body>
<script>
let divF=document.getElementById('divF')
function start1(){
divF.className='f m'
}
function stop1(){
divF.className='f'
}
</script>
</html>
效果图:
三.再加一些语言旋转效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心动的感觉</title>
<style>
@keyframes jump {
from{
transform: scale(0.5);
opacity: 0.5;
}to{
transform: scale(2);
opacity: 1;
}
}
@keyframes circles{
from{
transform: rotate(0deg);
z-index: 1;
}to{
transform: rotate(360deg);
z-index: -1;
}
}
.f{
width: 200px;
height: 180px;
position: relative;
left:200px;
top:200px;
/*animation: jump 0.7s ease alternate infinite;*/
}
.m{animation: jump 0.7s ease alternate infinite;}
.f>div{
position: absolute;
}
.z1,.z2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.z2{
left:70px;
}
.z3{
width: 100px;
height: 100px;
background-color: red;
left: 35px;
top: 35px;
transform: rotate(45deg);
}
.z4{
top:50px;
left: 45px;
font-size:large;
color: white;
z-index: -1;
}
.z4c{animation: circles 1s linear 2s infinite ;
}
button{
width:80px;
height: 40px;
background-color: skyblue;
border: none;
color: white;
font-size: large;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 8px 5px gray;
margin-left: 20px;
}
button:active{
transform: translate(5px,5px);
}
</style>
</head>
<body>
<button onclick="start1()">开始</button>
<button onclick="stop1()">结束</button>
<div id="divF"class="f">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div id="z4"class="z4">I  O   U</div>
</div>
</body>
<script>
let divF=document.getElementById('divF')
let z4=document.getElementById('z4')
function start1(){
divF.className='f m'
z4.className='z4 z4c'
}
function stop1(){
divF.className='f'
z4.className='z4'
}
</script>
</html>
效果
这就是我写的代码供大家参考,希望大家喜欢!