简单学习

  • douKerry
    了解作者
  • Java
    开发工具
  • 5.8MB
    文件大小
  • 7z
    文件格式
  • 0
    收藏次数
  • 5 积分
    下载积分
  • 0
    下载次数
  • 2022-05-24 17:12
    上传日期
初学者可以借鉴的资料,本人也是慢慢学习积累的,很实用
1-5.7z
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .dou{ background: pink; width: 530px; height: 630px; /* 左右居中 */ margin: 0 auto; border-radius: 5%; position: relative; } .dv{ width: 15px; height: 15px; background: rgb(152, 211, 124); border-radius: 50%; margin-bottom: 20px; box-shadow: 0px 0px 10px 0px greenyellow, 0px 0px 20px 0px greenyellow, 0px 0px 30px 0px rgb(143, 170, 102), 0px 0px 40px 0px rgb(187, 226, 129), 0px 0px 50px 0px rgb(185, 243, 98), 0px 0px 60px 0px greenyellow, 0px 0px 70px 0px rgb(184, 245, 92); } .sp{ width: 15px; height: 15px; background: rgb(255, 174, 0); /* 让行元素既具备块级元素的属性,又具有行元素的自身属性 */ display: inline-block; border-radius: 50%; margin-right: 20px; box-shadow: 0px 0px 10px 0px cyan, 0px 0px 20px 0px rgb(71, 191, 212), 0px 0px 30px 0px rgb(72, 186, 221), 0px 0px 40px 0px rgb(121, 195, 245), 0px 0px 50px 0px rgb(9, 191, 236), 0px 0px 60px 0px rgb(17, 119, 122), 0px 0px 70px 0px rgb(43, 165, 236); } .dh{ animation: ai 1s linear infinite; /* calc:计算,变大变小 */ animation-delay: calc(0.1s * var(--i)); } @keyframes ai{ 0%{ transform: scale(0.1); } 50%{ transform: scale(1); } 100%{ transform: scale(0.1); } } .top{ /* top:定位属性。position:absolute表示飞起来了 与top\bottom\left\right配套使用 */ position: absolute; left: 30px; top: 10px; } .bottom{ position: absolute; left: 30px; bottom: 10px; } .left{ position: absolute; left: 20px; top: 40px; } .right{ position: absolute; top: 35px; right: 26px; } html{height: 100%;} body{ height: 100%; /* 透视效果 打开一个3d空间*/ perspective: 2000px; display: flex; justify-content: center; align-items: center; } /* 1.子父类都变形 2.transform-style: preserve-3d加在父类元素上 */ .parent{ width: 400px; height: 520px; background: pink; position: relative; left: 60px; top:55px; transform-style: preserve-3d; transition: 1.4s; } .parent:hover{ transform: rotateY(180deg); } .div1{ width: 100%; height: 100%; background: purple; position: absolute; background: url(4.jpg) no-repeat center; background-size: 100%; /* 调节div1与div2面接触的距离,值越大缝隙越大 */ transform: translateZ(-1px); /* div1本身就在div2下面,如果翻转过来则字体也会相反,所以一开始就让div1里面的元素先翻转180°, 这样div1和div2的背部相接,翻转后两个里面的元素都是正的 */ transform: rotateY(180deg); } .div2{ width: 100%; height: 100%; background: blue; position: absolute; /* 给div设置背景图片 */ background: url(2.jpg) no-repeat center; background-size: 100%; } .text{ text-align: center; line-height: 550px; font-size: 60px; color: chartreuse; } </style> </head> <body> <!-- 快捷键:ctrl+d --> <div class="dou"> <div class="top"> <span class="sp dh" style="--i:0"></span> <span class="sp dh" style="--i:1"></span> <span class="sp dh" style="--i:2"></span> <span class="sp dh" style="--i:3"></span> <span class="sp dh" style="--i:4"></span> <span class="sp dh" style="--i:5"></span> <span class="sp dh" style="--i:6"></span> <span class="sp dh" style="--i:7"></span> <span class="sp dh" style="--i:8"></span> <span class="sp dh" style="--i:9"></span> <span class="sp dh" style="--i:10"></span> <span class="sp dh" style="--i:11"></span> </div> <div class="left"> <div class="dv dh" style="--i:55"></div> <div class="dv dh" style="--i:54"></div> <div class="dv dh" style="--i:53"></div> <div class="dv dh" style="--i:52"></div> <div class="dv dh" style="--i:51"></div> <div class="dv dh" style="--i:50"></div> <div class="dv dh" style="--i:49"></div> <div class="dv dh" style="--i:48"></div> <div class="dv dh" style="--i:47"></div> <div class="dv dh" style="--i:46"></div> <div class="dv dh" style="--i:45"></div> <div class="dv dh" style="--i:44"></div> <div class="dv dh" style="--i:43"></div> <div class="dv dh" style="--i:42"></div> <div class="dv dh" style="--i:41"></div> <div class="dv dh" style="--i:40"></div> </div> <div class="right"> <div class="dv dh" style="--i:12"></div> <div class="dv dh" style="--i:13"></div> <div class="dv dh" style="--i:14"></div> <div class="dv dh" style="--i:15"></div> <div class="dv dh" style="--i:16"></div> <div class="dv dh" style="--i:17"></div> <div class="dv dh" style="--i:18"></div> <div class="dv dh" style="--i:19"></div> <div class="dv dh" style="--i:20"></div> <div class="dv dh" style="--i:21"></div> <div class="dv dh" style="--i:22"></div> <div class="dv dh" style="--i:23"></div> <div class="dv dh" style="--i:24"></div> <div class="dv dh" style="--i:25"></div> <div class="dv dh" style="--i:26"></div> <div class="dv dh" style="--i:27"></div> </div> <div class="bottom"> <span class="sp dh" style="--i:39"></span> <span class="sp dh" style="--i:38"></span> <span class="sp dh" style="--i:37"></span> <span class="sp dh" style="--i:36"></span> <span class="sp dh" style="--i:35"></span> <span class="sp dh" style="--i:34"></span> <span class="sp dh" style="--i:33"></span> <span class="sp dh" style="--i:32"></span> <span class="sp dh" style="--i:31"></span> <span class="sp dh" style="--i:30"></span> <span class="sp dh" style="--i:29"></span> <span class="sp dh" style="--i:28"></span> </div> <div class="parent"> <div class="son div1 text">min</div> <div class="son div2 text">kerry</div> </div> </div> </body> </html>
评论
    相关推荐
    • 自用学习资料
      自用学习资料自用学习资料自用学习资料自用学习资料自用学习资料
    • 自用学习资料
      自用学习资料自用学习资料自用学习资料自用学习资料
    • 学习资料
      止饿就是一个,平平我去的学习资料,我来是想换一点东西
    • 深度学习资料
      针对caffe进行深度学习 比较好的入门
    • 机器学习资料
      机器学习资料,在网络上下载的,如果侵权可联系删除,谢谢。
    • 学习资料
      小白适合学习和收藏,建议大家好好学习,多问问题
    • 深度学习资料
      深度学习的经典论文,集大成者。可以当作深度学习学习材料
    • 深度学习资料
      自己做的ppt深度学习学习资料。。。。。。。。。。。。
    • 机器学习学习资料
      里面有机器学习和深度学习比较经典的入门资料:机器学习:实用案例解析等等,提供大家学习使用
    • 数据挖掘学习资料
      包括:python数据挖掘入门与实践、白话深度学习与tensoflow、python机器学习及实践 (kaggle)、机器学习、机器学习实战 (结合《统计学方法》学习)、统计学方法(李航)、利用python进行数据分析、tensoflow:实战...