-
分享一个课程卡样式
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
广告打完，我们进入正题，先看效果：
废话不多，上源码：
<body> <h3 class="text-center fw-bold"><i class="fa-brands fa-medium pe-3">i>Lottie Cardsh3> <div class="hr-line mt-4 mb-4">div> <div class="d-flex flex-wrap gap-5 justify-content-evenly pt-4"> <div class="col-lg-5"> <div class="card p-4"> <div class="row"> <div class="lottie_container m-3"> <dotlottie-player src="https://assets.codepen.io/9400490/geometry.lottie" background="transparent" loop="" direction="1" autoplay=""> dotlottie-player> div> <div class="col-md"> <div class="card-body"> <h5 class="fw-bold">Impossible Geometryh5> <hr> <p class="card-text">Shapes that are not possible and create an optical illusion are often referred to as <em>impossible objectsem>. They consists of a 2D figure which is interpreted as 3D object and usually the impossibility becomes apparent after viewing the figure for a few seconds. Impossible objects are of interest to psychologist, mathematicians and artists and may have applications in computer vision and human cognition.p> <hr> <p class="text-center pt-2"> <a class="icon-link" aria-label="More Information" href=""><i class="fa-solid fa-info">i>a> p> div> div> div> div> div> <div class="col-lg-5"> <div class="card p-4"> <div class="row"> <div class="lottie_container m-3"> <dotlottie-player id="Lottie_2" src="https://assets.codepen.io/9400490/circle+theorem.lottie" background="transparent"> dotlottie-player> div> <div class="col-md"> <div class="card-body"> <h5 class="fw-bold">Circle Theoremsh5> <h6 class="lottie-info">Click the circle to play animationh6> <hr> <p class="card-text">Circle theorems are properties that show relationships between angles within the geometry of a circle. We can use these theorems along with prior knowledge of other angle properties to calculate missing angles, without the use of a protractor. There are seven main circle theorems and these have very useful applications within design and engineering.p> <hr> <p class="text-center pt-2"> <a class="icon-link" aria-label="More Information" href=""><i class="fa-solid fa-info">i>a> p> div> div> div> div> div> <div class="col-lg-5"> <div class="card p-4"> <div class="row"> <div class="lottie_container ratio-fix m-4"> <dotlottie-player id="Lottie_3" src="https://assets.codepen.io/9400490/superposition.lottie" background="transparent"> dotlottie-player> div> <div class="col-md"> <div class="card-body"> <h5 class="fw-bold">Superposition Equipotential Linesh5> <hr> <p class="card-text">One of the rules for static electric fields and conductors is that the electric field must be perpendicular to the surface of any conductor. This implies that a conductor is an equipotential surface in static situations. Given the electric field lines, the equipotential lines can be drawn simply by making them perpendicular to the electric field lines. Conversely, given the equipotential lines, the electric field lines can be drawn by making them perpendicular to the equipotentials.p> <hr> <p class="text-center pt-2"> <a class="icon-link" aria-label="More Information" href=""><i class="fa-solid fa-info">i>a> p> div> div> div> div> div> <div class="col-lg-5"> <div class="card p-4"> <div class="row"> <div class="lottie_container m-3"> <dotlottie-player src="https://assets.codepen.io/9400490/optics.lottie" background="transparent" controls> dotlottie-player> div> <div class="col-md"> <div class="card-body"> <h5 class="fw-bold">Dispersion of Lighth5> <h6 class="lottie-info">Adjust playback using controlsh6> <hr> <p class="card-text">Any type of wave can exhibit dispersion. Sound, light and electromagnetic waves can be dispersed according to wavelength. Dispersion occurs whenever the speed of propagation depends on wavelength, thus separating and spreading out various wavelengths. Rainbows are produced by a combination of refraction and reflection. Light enters a drop of water and is reflected from the back of the drop. Therefore, the light is refracted both as it enters and as it leaves the drop.p> <hr> <p class="text-center pt-2"> <a class="icon-link" aria-label="More Information" href=""><i class="fa-solid fa-info">i>a> p> div> div> div> div> div> div> <div class="hr-line mt-5 mb-4">div> <p class="footer fs-6 fw-bold text-center text-muted">Powered by:p> <p class="text-center"> <a title="Bootstrap" aria-label="More information about Bootstrap" href="https://getbootstrap.com" target="_blank"><img src="https://assets.codepen.io/9400490/Bootstrap.svg" alt="Bootstrap" width="30" height="30">a> <a title="Fontawesome" aria-label="More information about Fontawesome" href="https://fontawesome.com" target="_blank"><img src="https://assets.codepen.io/9400490/Fontawesome.svg" alt="FontAwesome" width="30" height="30">a> <a title="LottieFiles" aria-label="More information about LottieFiles" href="https://lottiefiles.com" target="_blank"><img src="https://assets.codepen.io/9400490/Lottie.svg" alt="FontAwesome" width="30" height="30">a> p> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
body { padding: 4rem 2rem; font-family: Poppins; } .hr-line { border-top: 1px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(90deg, White, DimGrey, White) border-box; } h3 { color: #454646; } .card { min-width: 260px; height: 100%; border-radius: 15px !important; box-shadow: 0 15px 15px LightGrey; background-color: #f8f8f8 !important; border: 1px solid LightGrey !important; } .row { justify-content: center; align-items: center; } .lottie_container { width: 240px; cursor: pointer; } .ratio-fix { aspect-ratio: 1 / 1; } .lottie-info { color: #9b9b9b; } .card-body { min-width: 180px; } .card-text { font-weight: 200; min-width: 200px; } .icon-link { height: 40px; width: 40px; color: DimGrey; background-color: transparent; border: 1px solid DimGrey; border-radius: 50%; padding: 16px; margin: 0; cursor: pointer; text-decoration: none; transition: all 0.2s ease-in-out; &:hover { border: 1px solid DodgerBlue; transform: scale(1.2); color: DodgerBlue; } } #Lottie_2 { transform: scale(1.2); } #Lottie_3 { transform: scale(1.25); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
const player_1 = document.getElementById('Lottie_2'); player_1.addEventListener('ready', () => { LottieInteractivity.create({ player: player_1.getLottie(), mode:"cursor", actions: [ { type: "click", forceFlag: false, } ] }); }); const player_2 = document.getElementById('Lottie_3'); player_2.addEventListener('ready', () => { LottieInteractivity.create({ player: player_2.getLottie(), mode:"scroll", actions: [ { visibility: [0,1], type: 'seek', frames: [0, 90], } ] }); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
-
相关阅读:
VSCode 配置 Lua 开发环境（清晰明了）
信息学奥赛一本通：1108：向量点积计算
php 目录访问控制
Zookeeper客户端命令、JAVA API、监听原理、写数据原理以及案例
磁珠元器件：微小却强大的科技奇迹 | 百能云芯
WindowAssigner设计
解决json_decode解析返回null空值
搜索数据库中的一行信息
PAT 1023 Have Fun with Numbers（高精度乘法）
网站分类seo怎么优化（如何调整有利于SEO排名）
- 原文地址：https://blog.csdn.net/qq_35241329/article/details/134510661
