├── 卡片弹出效果 ├── email.svg ├── index.css ├── index.html └── index.js ├── 文字压缩 ├── flow_startframe.jpg ├── index.css ├── index.html └── index.js ├── 星巴克页面 ├── images │ ├── Attribution.txt │ ├── facebook.png │ ├── img1.png │ ├── img2.png │ ├── img3.png │ ├── instagram.png │ ├── logo.png │ ├── thumb1.png │ ├── thumb2.png │ ├── thumb3.png │ └── twitter.png ├── index.css └── index.html ├── 水波涟漪效果 ├── index.css └── index.html ├── 滚动渐变(Apple) ├── img │ ├── homepod.jpg │ ├── homepod_1.jpg │ ├── homepod_2.jpg │ ├── homepod_3.jpg │ └── homepod_4.jpg ├── index.css ├── index.html └── index.js ├── 物品购买卡 ├── imgs │ └── real-sugar.png ├── index.css └── index.html ├── 视觉差滑动 ├── images │ ├── moon.png │ ├── mountains_behind.png │ ├── mountains_front.png │ └── stars.png ├── index.css └── index.html ├── 购物车卡片 ├── img │ └── nick.png ├── index.css └── index.html └── 页面卷动逐行滑入效果 ├── imgs ├── iphone12-5g_on_phone.webp ├── iphone12-5g_on_phone_mask.png ├── iphone12-5g_show_01.webp ├── iphone12-5g_show_02.webp ├── iphone12-5g_show_03.webp ├── iphone12-5g_show_04.webp ├── iphone12-5g_show_05.webp ├── iphone12-5g_show_06.webp └── iphone12-5g_show_07.webp ├── index.css └── index.html /卡片弹出效果/email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /卡片弹出效果/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | width: 100vw; 9 | height: 100vh; 10 | position: relative; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .card { 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | width: 60%; 22 | max-width: 600px; 23 | height: 400px; 24 | padding: 20px; 25 | background-color: rgb(240, 246, 255); 26 | border-radius: 15px; 27 | display: none; 28 | align-items: center; 29 | flex-direction: column; 30 | box-shadow: 0px 0px 15px rgba(0, 0, 0, .2); 31 | animation: pop .5s ease; 32 | } 33 | 34 | @keyframes pop { 35 | 0% { 36 | transform: translate(-50%, -50%) scaleY(0); 37 | } 38 | } 39 | 40 | .card .close { 41 | position: absolute; 42 | font-size: 20px; 43 | color: #A56E59; 44 | cursor: pointer; 45 | right: 30px; 46 | top: 20px; 47 | } 48 | 49 | .card h1 { 50 | font-size: 20px; 51 | margin: 10px 0; 52 | color: rgb(82, 66, 117); 53 | } 54 | 55 | .card p { 56 | text-align: center; 57 | } 58 | 59 | .card img { 60 | width: 100px; 61 | margin: 10px 0 20px; 62 | } 63 | 64 | .card p { 65 | color: rgb(126, 126, 126); 66 | padding: 10px 20px; 67 | } 68 | 69 | .card button { 70 | margin-top: 10px; 71 | } 72 | 73 | button { 74 | padding: 10px 20px; 75 | font-size: 18px; 76 | background: #61ca96; 77 | border-radius: 5px; 78 | color: white; 79 | border-color: transparent; 80 | cursor: pointer; 81 | } -------------------------------------------------------------------------------- /卡片弹出效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 卡片弹出效果 9 | 10 | 11 | 12 | 13 | 14 |

15 | X 16 |

Hi Bob, Welcome.

17 |

Get our latest promotion.

18 |

19 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam, accusamus !

20 | 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /卡片弹出效果/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | const getUpdate = document.querySelector('.getUpdate'); 3 | const card = document.querySelector('.card'); 4 | const close = document.querySelector('.close'); 5 | getUpdate.addEventListener('click', e => { 6 | e.stopPropagation() 7 | card.style.display = 'flex'; 8 | }); 9 | close.addEventListener('click', _ => { 10 | card.style.display = 'none'; 11 | }); 12 | document.addEventListener('click', e => { 13 | e.stopPropagation() 14 | if (e.target != card) { 15 | close.click() 16 | } 17 | }) 18 | 19 | }) -------------------------------------------------------------------------------- /文字压缩/flow_startframe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/文字压缩/flow_startframe.jpg -------------------------------------------------------------------------------- /文字压缩/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | } 4 | 5 | .title { 6 | position: sticky; 7 | top: -1px; 8 | margin: 100px auto; 9 | font-size: 72px; 10 | transform: translateX(calc(50% + 20px)) scale(clamp(0.2, var(--scale), 1)); 11 | transform-origin: left; 12 | width: 290px; 13 | } 14 | 15 | .imgbox { 16 | position: relative; 17 | width: 100%; 18 | overflow: hidden; 19 | } 20 | 21 | .imgbox img { 22 | width: 100%; 23 | } -------------------------------------------------------------------------------- /文字压缩/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 文字压缩 9 | 10 | 11 | 12 | 13 | 14 |

仅仅 11.5毫米就是这么薄 15 |

16 |

17 |

18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /文字压缩/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | let isPinned = false 3 | const h2 = document.querySelector('.title'); 4 | var io = new IntersectionObserver(([e]) => { 5 | isPinned = (e.intersectionRatio < 1); 6 | console.log(isPinned); 7 | }, { 8 | threshold: [1] 9 | }); 10 | io.observe(h2); 11 | document.addEventListener('scroll', () => { 12 | if (!isPinned) { 13 | let html = document.documentElement 14 | let height = parseInt(getComputedStyle(h2).getPropertyValue('height')) + parseInt(getComputedStyle(h2).getPropertyValue('margin-bottom')) 15 | let marginTop = parseInt(getComputedStyle(h2).getPropertyValue('margin-top')); 16 | let scrolled = (html.scrollTop - marginTop) / height; 17 | h2.style.setProperty('--scale', (1 - scrolled)) 18 | console.log(scrolled); 19 | } 20 | }) 21 | }) -------------------------------------------------------------------------------- /星巴克页面/images/Attribution.txt: -------------------------------------------------------------------------------- 1 | Image Attribution 2 | ------------- 3 | Img 1 : https://freepngimg.com/png/77325-frappuccino-drink-chocolate-starbucks-matcha-white 4 | 5 | Img 2 : https://freepngimg.com/png/62115-tea-coffee-drink-starbucks-latte-free-download-image 6 | 7 | Img 3 : https://freepngimg.com/png/62120-coffee-frappuccino-drink-latte-starbucks-unicorn -------------------------------------------------------------------------------- /星巴克页面/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/facebook.png -------------------------------------------------------------------------------- /星巴克页面/images/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/img1.png -------------------------------------------------------------------------------- /星巴克页面/images/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/img2.png -------------------------------------------------------------------------------- /星巴克页面/images/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/img3.png -------------------------------------------------------------------------------- /星巴克页面/images/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/instagram.png -------------------------------------------------------------------------------- /星巴克页面/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/logo.png -------------------------------------------------------------------------------- /星巴克页面/images/thumb1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/thumb1.png -------------------------------------------------------------------------------- /星巴克页面/images/thumb2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/thumb2.png -------------------------------------------------------------------------------- /星巴克页面/images/thumb3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/thumb3.png -------------------------------------------------------------------------------- /星巴克页面/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/星巴克页面/images/twitter.png -------------------------------------------------------------------------------- /星巴克页面/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | width: 100vw; 9 | height: 100%; 10 | } 11 | 12 | header { 13 | position: absolute; 14 | width: 100%; 15 | top: 0; 16 | left: 0; 17 | display: flex; 18 | z-index: 3; 19 | box-sizing: border-box; 20 | margin-top: 20px; 21 | padding: 20px 100px; 22 | justify-content: space-between; 23 | height: 80px; 24 | align-items: center; 25 | } 26 | 27 | header .logo { 28 | max-width: 80px; 29 | } 30 | 31 | header ul { 32 | display: flex; 33 | } 34 | 35 | header ul li { 36 | list-style: none; 37 | margin-right: 20px; 38 | } 39 | 40 | header ul li a { 41 | color: #000; 42 | text-decoration: none; 43 | } 44 | 45 | .cricle { 46 | position: absolute; 47 | z-index: 1; 48 | left: 0; 49 | width: 100%; 50 | height: 100%; 51 | background-color: pink; 52 | clip-path: circle(60% at bottom right); 53 | } 54 | 55 | section { 56 | position: absolute; 57 | z-index: 2; 58 | width: 100%; 59 | height: 100%; 60 | display: flex; 61 | padding: 20px 100px 0; 62 | overflow: hidden; 63 | align-items: center; 64 | } 65 | 66 | section ul { 67 | position: absolute; 68 | list-style: none; 69 | z-index: 5; 70 | right: 20px; 71 | top: 50%; 72 | transform: translateY(-50%); 73 | } 74 | 75 | section ul li { 76 | line-height: 50px; 77 | } 78 | 79 | section ul li img { 80 | width: 25px; 81 | height: 25px; 82 | filter: invert(1); 83 | } 84 | 85 | .content { 86 | max-width: 600px; 87 | } 88 | 89 | .content div { 90 | font-size: 4.2em; 91 | line-height: 80px; 92 | } 93 | 94 | .content div span { 95 | font-weight: 700; 96 | color: #027145; 97 | } 98 | 99 | .content a { 100 | display: inline-block; 101 | text-decoration: none; 102 | padding: 6px 20px; 103 | border-radius: 30px; 104 | text-transform: uppercase; 105 | margin-top: 10px; 106 | color: #fff; 107 | background-color: #027145; 108 | } 109 | 110 | section img { 111 | position: relative; 112 | z-index: 2; 113 | max-height: 450px; 114 | margin-left: auto; 115 | } 116 | 117 | .small { 118 | position: absolute; 119 | z-index: 5; 120 | display: flex; 121 | left: 50%; 122 | transform: translateX(-50%); 123 | bottom: 20px; 124 | } 125 | 126 | .small li { 127 | display: inline-block; 128 | list-style: none; 129 | margin: 0 20px; 130 | transition-duration: .5s; 131 | } 132 | 133 | .small li:hover { 134 | transform: translateY(-15px); 135 | } 136 | 137 | .small li img { 138 | width: 60px; 139 | } -------------------------------------------------------------------------------- /星巴克页面/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 辛巴主页面 9 | 10 | 11 | 12 | 13 |

14 |

15 |

Home
Menu
What's New
Contact

21 |

22 |

23 |

24 |

It's not just Coffee

25 |

It's Starbucks

26 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo. 27 |

28 | buy now 29 |

30 |

31 |

32 |

37 |

38 |

43 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /水波涟漪效果/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | background-color: #232323; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | .box { 10 | height: 100px; 11 | width: 100%; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .box span { 18 | position: relative; 19 | display: inline-block; 20 | height: 35px; 21 | line-height: 35px; 22 | color: #fff; 23 | text-transform: uppercase; 24 | padding: 0 20px; 25 | overflow: hidden; 26 | letter-spacing: 2px; 27 | margin-right: 50px; 28 | border-radius: 17.5px; 29 | } 30 | 31 | .box span:nth-child(1) { 32 | background: linear-gradient(to right, #755bea, #ff72c0); 33 | } 34 | 35 | .box span:nth-child(2) { 36 | background: linear-gradient(to right, #0162c8, #55e7fc); 37 | } 38 | 39 | .box span i { 40 | display: block; 41 | position: absolute; 42 | transform: translate(-50%, -50%); 43 | border-radius: 50%; 44 | background-color: #fff; 45 | animation: move 2s linear 0s 1; 46 | pointer-events: none; 47 | } 48 | 49 | @keyframes move { 50 | 0% { 51 | width: 0; 52 | height: 0; 53 | opacity: .5; 54 | } 55 | 100% { 56 | width: 500px; 57 | height: 500px; 58 | opacity: 0; 59 | } 60 | } -------------------------------------------------------------------------------- /水波涟漪效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 水波涟漪效果 9 | 10 | 11 | 12 | 13 |

14 | welcome 15 | coderbin.link 16 |

17 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /滚动渐变(Apple)/img/homepod.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/滚动渐变(Apple)/img/homepod.jpg -------------------------------------------------------------------------------- /滚动渐变(Apple)/img/homepod_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/滚动渐变(Apple)/img/homepod_1.jpg -------------------------------------------------------------------------------- /滚动渐变(Apple)/img/homepod_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/滚动渐变(Apple)/img/homepod_2.jpg -------------------------------------------------------------------------------- /滚动渐变(Apple)/img/homepod_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/滚动渐变(Apple)/img/homepod_3.jpg -------------------------------------------------------------------------------- /滚动渐变(Apple)/img/homepod_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/滚动渐变(Apple)/img/homepod_4.jpg -------------------------------------------------------------------------------- /滚动渐变(Apple)/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | html { 8 | user-select: none; 9 | } 10 | 11 | .big-box { 12 | position: relative; 13 | width: 100vw; 14 | } 15 | 16 | .img-box { 17 | position: sticky; 18 | top: 0; 19 | width: 100%; 20 | height: 100vh; 21 | } 22 | 23 | .img-box div { 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate(-50%, -50%); 28 | width: 600px; 29 | height: 800px; 30 | background-repeat: no-repeat; 31 | background-size: contain; 32 | } 33 | 34 | .content-box { 35 | padding-top: 100vh; 36 | } 37 | 38 | .description { 39 | position: relative; 40 | z-index: 1; 41 | width: 490px; 42 | padding: 80px 50px; 43 | background-color: rgba(0, 0, 0, .8); 44 | margin: 0 auto 100vh; 45 | border-radius: 15px; 46 | color: #fff; 47 | text-align: center; 48 | } 49 | 50 | .description h2 { 51 | margin-bottom: 20px; 52 | font-size: 30px; 53 | } 54 | 55 | .end { 56 | opacity: 0; 57 | margin-bottom: 0; 58 | } 59 | 60 | .description p { 61 | line-height: 30px; 62 | } 63 | 64 | .img-box .background-head, 65 | .img-box .background-end { 66 | background-image: url(./img/homepod.jpg); 67 | } 68 | 69 | .img-box .background-img01 { 70 | background-image: url(./img/homepod_1.jpg); 71 | opacity: var(--part-1); 72 | } 73 | 74 | .img-box .background-img02 { 75 | background-image: url(./img/homepod_2.jpg); 76 | opacity: var(--part-2); 77 | } 78 | 79 | .img-box .background-img03 { 80 | background-image: url(./img/homepod_3.jpg); 81 | opacity: var(--part-3); 82 | } 83 | 84 | .img-box .background-img04 { 85 | background-image: url(./img/homepod_4.jpg); 86 | opacity: var(--part-4); 87 | } 88 | 89 | .img-box .background-end { 90 | opacity: var(--ending); 91 | } -------------------------------------------------------------------------------- /滚动渐变(Apple)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 滚动渐变(Apple) 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

清澈的音质

27 |

Apple 设计的全频驱动单元采用磁力惊人的钕磁体，能呈现深沉浑厚的低音，和清脆纯净的高音。

28 |

29 |

30 |

360 度的音频

31 |

设计独到的声波导装置将声音从音箱底部导出，营造出 360 度全方位音场，让你在房间的每个角落都能听到一致的音效。

32 |

33 |

34 |

各级音量的均衡表现

35 |

微型 Apple S5 芯片性能强劲，支持计算音频技术，能实时处理复杂算法，无论音量大小，都能给你均衡优化的音质。

36 |

37 |

38 |

低频的延伸

39 |

Apple 设计的振动抵消无源辐射器让 HomePod mini 拥有惊人的低频延伸。

40 |

41 |

42 |

噪音的消除

43 |

四个麦克风配合起来，更有利于消除噪音，也能帮它听清你说“嘿 Siri”，就算周围声音很大，你也不用特意调低音量或凑得更近。

44 |

45 |

46 |

47 |

48 | 49 | 50 | -------------------------------------------------------------------------------- /滚动渐变(Apple)/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | const html = document.documentElement; 3 | const htmlH = html.offsetHeight; 4 | const screenH = html.clientHeight; 5 | const big_box = document.querySelector('.img-box'); 6 | document.addEventListener('scroll', function() { 7 | let scrolled = (html.scrollTop + screenH) / htmlH; 8 | if (html.scrollTop === 0) scrolled = 0 9 | big_box.style.setProperty('--part-1', calculateOpacity(0.05, 0.15, scrolled)) 10 | big_box.style.setProperty('--part-2', calculateOpacity(0.19, 0.23, scrolled)) 11 | big_box.style.setProperty('--part-3', calculateOpacity(0.35, 0.40, scrolled)) 12 | big_box.style.setProperty('--part-4', calculateOpacity(0.58, 0.63, scrolled)) 13 | big_box.style.setProperty('--ending', calculateOpacity(0.80, 0.85, scrolled)) 14 | }) 15 | }) 16 | 17 | function calculateOpacity(start, end, percent) { 18 | if (percent - start < 0) return 0 19 | if (percent - end > 0) return 1 20 | return (percent - start) / (end - start) 21 | } -------------------------------------------------------------------------------- /物品购买卡/imgs/real-sugar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/物品购买卡/imgs/real-sugar.png -------------------------------------------------------------------------------- /物品购买卡/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | background-color: #131313; 9 | display: flex; 10 | box-sizing: border-box; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .cart { 16 | position: relative; 17 | width: 450px; 18 | height: 260px; 19 | } 20 | 21 | .cart img { 22 | position: absolute; 23 | z-index: 1; 24 | height: 300px; 25 | left: 50%; 26 | top: 50%; 27 | transition-duration: 1s; 28 | transform: translate(-50%, -50%); 29 | pointer-events: none; 30 | } 31 | 32 | .cart:hover img { 33 | left: 74%; 34 | } 35 | 36 | .circle { 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | border-radius: 15px; 41 | overflow: hidden; 42 | } 43 | 44 | .circle::after { 45 | content: ""; 46 | width: 100%; 47 | height: 100%; 48 | display: inline-block; 49 | background-color: red; 50 | transition-duration: 1s; 51 | clip-path: circle(35% at 50% 50%); 52 | } 53 | 54 | .cart:hover .circle::after { 55 | clip-path: circle(100% at 50% 50%); 56 | background-color: #0077B8; 57 | } 58 | 59 | .context { 60 | position: absolute; 61 | width: 45%; 62 | left: 50%; 63 | transform: translateX(-50%); 64 | color: #fff; 65 | transition-duration: 1s; 66 | opacity: 0; 67 | visibility: hidden; 68 | padding: 10px 10px 10px 30px; 69 | text-transform: uppercase; 70 | } 71 | 72 | .cart:hover .context { 73 | left: 27%; 74 | opacity: 1; 75 | visibility: visible; 76 | } 77 | 78 | .context h3 { 79 | padding: 10px 0; 80 | } 81 | 82 | .context p { 83 | font-size: .8em; 84 | line-height: 1.5em; 85 | } 86 | 87 | .context a { 88 | padding: 5px 10px; 89 | font-size: .8em; 90 | display: inline-block; 91 | font-weight: 700; 92 | border-radius: 10px; 93 | text-decoration: none; 94 | margin-top: 15px; 95 | background-color: #fff; 96 | color: #131313; 97 | } 98 | 99 | @media screen and (max-width:990px) { 100 | .cart { 101 | max-width: 300px; 102 | } 103 | .cart:hover { 104 | height: 600px; 105 | } 106 | .circle::after { 107 | clip-path: circle(45% at 50% 50%); 108 | } 109 | .cart .context { 110 | width: 60%; 111 | } 112 | .cart:hover .context { 113 | left: 50%; 114 | padding: 10px 10px 10px 10px; 115 | } 116 | .cart:hover img { 117 | top: 72%; 118 | left: 50%; 119 | } 120 | } -------------------------------------------------------------------------------- /物品购买卡/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 可口可乐 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

pepsi

18 |

This article is about the beverage. For its manufacturer, see PepsiCo. For other uses, see Pepsi disambiguation. Pepsi is a carbonated soft drink manufactured by PepsiCo.

19 | buy now 20 |

21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /视觉差滑动/images/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/视觉差滑动/images/moon.png -------------------------------------------------------------------------------- /视觉差滑动/images/mountains_behind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/视觉差滑动/images/mountains_behind.png -------------------------------------------------------------------------------- /视觉差滑动/images/mountains_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/视觉差滑动/images/mountains_front.png -------------------------------------------------------------------------------- /视觉差滑动/images/stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/视觉差滑动/images/stars.png -------------------------------------------------------------------------------- /视觉差滑动/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | min-height: 100vh; 8 | background: linear-gradient(#2b1055, #7597de); 9 | scroll-behavior: smooth; 10 | } 11 | 12 | header { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | width: 100%; 18 | z-index: 10; 19 | padding: 20px 100px; 20 | box-sizing: border-box; 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | color: #fff; 25 | overflow: hidden; 26 | } 27 | 28 | header #logo { 29 | font-size: 20px; 30 | font-weight: 700; 31 | text-transform: uppercase; 32 | letter-spacing: 2px; 33 | } 34 | 35 | header ul { 36 | list-style: none; 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | } 41 | 42 | header ul li { 43 | font-weight: 600; 44 | margin-left: 15px; 45 | transition: all .5s linear; 46 | padding: 5px 15px; 47 | border-radius: 20px; 48 | } 49 | 50 | header ul li:hover { 51 | background: #fff; 52 | color: #2b1055; 53 | } 54 | 55 | header ul li.active { 56 | background: #fff; 57 | color: #2b1055; 58 | } 59 | 60 | section { 61 | position: relative; 62 | width: 100%; 63 | overflow: hidden; 64 | height: 100vh; 65 | color: #fff; 66 | display: flex; 67 | justify-content: center; 68 | align-items: center; 69 | } 70 | 71 | section .desc { 72 | position: absolute; 73 | z-index: 5; 74 | font-size: 70px; 75 | font-weight: 700; 76 | right: -350px; 77 | white-space: nowrap; 78 | } 79 | 80 | section .btn { 81 | position: absolute; 82 | z-index: 5; 83 | padding: 10px 20px; 84 | font-weight: 600; 85 | transform: translateY(80px); 86 | background-color: #fff; 87 | border-radius: 30px; 88 | text-decoration: none; 89 | } 90 | 91 | section::after { 92 | content: ''; 93 | display: block; 94 | position: absolute; 95 | width: 100%; 96 | height: 100px; 97 | bottom: 0; 98 | left: 0; 99 | background: linear-gradient(to top, #1c0522, transparent); 100 | z-index: 7; 101 | } 102 | 103 | section img { 104 | width: 100%; 105 | height: 100%; 106 | position: absolute; 107 | top: 0; 108 | left: 0; 109 | right: 0; 110 | object-fit: cover; 111 | pointer-events: none; 112 | } 113 | 114 | .stars { 115 | z-index: 1; 116 | } 117 | 118 | .moon { 119 | z-index: 2; 120 | mix-blend-mode: screen; 121 | } 122 | 123 | .mountains_behind { 124 | z-index: 4; 125 | } 126 | 127 | .mountains_front { 128 | z-index: 5; 129 | } 130 | 131 | .text { 132 | color: #fff; 133 | padding: 20px 150px; 134 | background-color: #1c0522; 135 | } 136 | 137 | .text h2 { 138 | font-size: 30px; 139 | font-weight: 600; 140 | } -------------------------------------------------------------------------------- /视觉差滑动/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 视觉差滑动 9 | 10 | 11 | 12 | 13 |

14 |

logo

15 |

主页
文章
关与
我的

21 |

22 |

23 |

24 |

25 |

HELLO WORD!

26 | 进入博客 27 |

28 |

29 |

30 | 47 |

48 |

《You Have Only One Life》

49 |

There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one 50 | chance to do all the things you want to do.

May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you 51 | feel that it hurts you,it probably hurts the other person, too.

The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those 52 | who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people.

who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will 53 | always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.When you were born,you were crying and everyone around you was smiling.Live your life so that when you die,you're the one 54 | who is smiling and everyone around you is crying.

Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to 55 | those that make you see the brighter side of things when you are really down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on 56 | the opportunity to brighten someone’s day with this message.

There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want 57 | to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.

May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough 58 | hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.

May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep 59 | you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.

60 | 61 | 62 | 63 |

64 |

65 | 66 | 67 | -------------------------------------------------------------------------------- /购物车卡片/img/nick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/购物车卡片/img/nick.png -------------------------------------------------------------------------------- /购物车卡片/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | background-color: #131313; 9 | } 10 | 11 | .contantbox { 12 | width: 100%; 13 | height: 100%; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .goodcard { 20 | position: relative; 21 | overflow: hidden; 22 | width: 320px; 23 | height: 450px; 24 | background-color: #232323; 25 | border-radius: 15px; 26 | } 27 | 28 | .goodcard::before { 29 | content: ''; 30 | display: inline-block; 31 | position: absolute; 32 | width: 100%; 33 | height: 100%; 34 | background-color: #9bdc28; 35 | top: 0; 36 | transition-duration: .5s; 37 | clip-path: circle(45% at 10% 10%); 38 | } 39 | 40 | .goodcard::after { 41 | position: absolute; 42 | z-index: 1; 43 | top: 50%; 44 | transform: translateY(-50%); 45 | content: 'nick'; 46 | color: rgba(255, 255, 255, .04); 47 | text-transform: uppercase; 48 | font-size: 7em; 49 | font-weight: 800; 50 | font-style: italic; 51 | } 52 | 53 | .goodcard:hover::before { 54 | clip-path: circle(49.5% at 27% 19%); 55 | } 56 | 57 | .shoesbox { 58 | height: 100%; 59 | text-align: center; 60 | position: relative; 61 | z-index: 2; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | transform: translateY(-5%) rotate(15deg); 66 | transition-duration: .5s; 67 | } 68 | 69 | .goodcard:hover .shoesbox { 70 | transform: translateY( -20%) rotate(15deg); 71 | } 72 | 73 | .shoesbox img { 74 | width: 80%; 75 | } 76 | 77 | .selectbox { 78 | position: absolute; 79 | width: 100%; 80 | height: 120px; 81 | bottom: 0; 82 | z-index: 3; 83 | color: #fff; 84 | transition-duration: 1s; 85 | text-align: center; 86 | } 87 | 88 | .goodcard:hover .selectbox { 89 | height: 190px; 90 | } 91 | 92 | .selectbox h2 { 93 | font-weight: 700; 94 | } 95 | 96 | .shoes-size, 97 | .shoes-color { 98 | opacity: 0; 99 | visibility: hidden; 100 | margin: 15px 0; 101 | transition-duration: 1s; 102 | } 103 | 104 | .goodcard:hover .shoes-size { 105 | transition-delay: .5s; 106 | } 107 | 108 | .goodcard:hover .shoes-color { 109 | transition-delay: .6s; 110 | } 111 | 112 | .goodcard:hover .shoes-size, 113 | .goodcard:hover .shoes-color { 114 | opacity: 1; 115 | visibility: visible; 116 | } 117 | 118 | .shoes-size span, 119 | .shoes-color span { 120 | display: inline-block; 121 | vertical-align: middle; 122 | margin: 0 3px; 123 | width: 24px; 124 | height: 24px; 125 | } 126 | 127 | .shoes-size span { 128 | font-weight: 600; 129 | line-height: 24px; 130 | color: #131313; 131 | text-align: center; 132 | border-radius: 5px; 133 | background-color: #fff; 134 | } 135 | 136 | .shoes-color span { 137 | border-radius: 50%; 138 | } 139 | 140 | .shoes-color span:nth-child(1) { 141 | background-color: #9bdc28; 142 | } 143 | 144 | .shoes-color span:nth-child(2) { 145 | background-color: #E0E0E0; 146 | } 147 | 148 | .shoes-color span:nth-child(3) { 149 | background-color: #007ACC; 150 | } 151 | 152 | .shoes-color span:nth-child(4) { 153 | background-color: #E37831; 154 | } 155 | 156 | .by-btn { 157 | display: inline-block; 158 | text-decoration: none; 159 | text-transform: uppercase; 160 | font-weight: 700; 161 | padding: 5px 15px; 162 | background-color: #fff; 163 | color: #C46C62; 164 | border-radius: 15px; 165 | opacity: 0; 166 | visibility: hidden; 167 | transition-duration: 1s; 168 | } 169 | 170 | .goodcard:hover .by-btn { 171 | opacity: 1; 172 | visibility: visible; 173 | transition-delay: .7s; 174 | } -------------------------------------------------------------------------------- /购物车卡片/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 购物车卡片 10 | 11 | 12 | 13 | 14 |

15 |

16 |

17 |

18 |

19 |

20 |

Nike Shoes

21 |

Size: 22 | 7 23 | 8 24 | 9 25 | 10 26 |

27 |

Color: 28 | 29 | 30 | 31 | 32 |

33 | by now 34 |

35 |

36 |

37 | 38 | 39 | -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_on_phone.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_on_phone.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_on_phone_mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_on_phone_mask.png -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_01.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_02.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_03.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_03.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_04.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_04.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_05.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_05.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_06.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_06.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/imgs/iphone12-5g_show_07.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzhibin/web-dynamic-effect/f06bdfb123ab5bd87096e6149da4158cf8ea8d17/页面卷动逐行滑入效果/imgs/iphone12-5g_show_07.webp -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --device-width: 770px; 3 | --device-height: 1336px; 4 | --ui-width: 640px; 5 | font-size: 15px; 6 | } 7 | 8 | * { 9 | padding: 0; 10 | margin: 0; 11 | box-sizing: border-box; 12 | } 13 | 14 | body { 15 | width: 100vw; 16 | /* height: 100vh; */ 17 | background-color: #000; 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | } 22 | 23 | h2 { 24 | margin-top: 200px; 25 | font-size: 70px; 26 | color: #6E6E73; 27 | } 28 | 29 | h3 { 30 | font-size: 70px; 31 | font-weight: 700; 32 | color: #fff; 33 | margin: 10px 0; 34 | } 35 | 36 | .contain { 37 | width: var(--device-width); 38 | height: var(--device-height); 39 | background-image: url(./imgs/iphone12-5g_on_phone.webp); 40 | background-repeat: no-repeat; 41 | background-size: cover; 42 | mask-image: url(./imgs/iphone12-5g_on_phone_mask.png); 43 | -webkit-mask-image: url(./imgs/iphone12-5g_on_phone_mask.png); 44 | mask-repeat: no-repeat; 45 | mask-size: contain; 46 | -webkit-mask-size: contain; 47 | } 48 | 49 | .top_ui { 50 | display: block; 51 | width: var(--ui-width); 52 | margin: 70px auto 0; 53 | padding-bottom: 30px; 54 | border-bottom: 1px solid #333; 55 | } 56 | 57 | .list_imgs { 58 | width: var(--ui-width); 59 | margin: 0 auto; 60 | } 61 | 62 | .list_imgs li { 63 | list-style: none; 64 | margin: 15px 0; 65 | border-bottom: 1px solid #333; 66 | transform: scale(calc(1.8 - (0.8 * var(--progress)))) translateY(calc(-60px * (1 - var(--progress)))); 67 | opacity: var(--progress); 68 | } 69 | 70 | .list_imgs li img { 71 | /* display: block; */ 72 | width: 100%; 73 | } -------------------------------------------------------------------------------- /页面卷动逐行滑入效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 页面卷动逐行滑入效果 9 | 10 | 11 | 12 | 13 |