{"id":2968,"date":"2020-05-25T17:51:00","date_gmt":"2020-05-25T09:51:00","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2968"},"modified":"2020-05-25T17:51:00","modified_gmt":"2020-05-25T09:51:00","slug":"css3%e5%a4%8d%e6%9d%82%e5%8a%a8%e7%94%bb%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2968","title":{"rendered":"CSS3\u590d\u6742\u52a8\u753b\u6548\u679c"},"content":{"rendered":"

\"animal\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

1. html\u4ee3\u7801<\/h2>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>\u7535\u5b50\u7b80\u5386-\u9879\u76ee\u7ecf\u9a8c<\/title>\r\n    <link rel=\"stylesheet\" href=\"css\/style-outer.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"css\/font-style.css\" \/>\r\n  <\/head>\r\n  <body>\r\n    <!-- container \u6ea2\u51fa\u9690\u85cf \u9ad8\u5bbd:300px -->\r\n    <div class=\"container\">\r\n      <!-- wrap \u80cc\u666f\u56fe\u7247 \u9ad8\u5bbd:280px -->\r\n      <div class=\"wrap\">\r\n        <!-- bg-wrap \u80cc\u666f\u900f\u660e -->\r\n        <div class=\"bg-wrap\">\r\n          <h3>\u96e8\u679c\u5b66\u9662<\/h3>\r\n          <p>\u6280\u672f-HTML5-CSS3<\/p>\r\n          <span class=\"icon-search\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/body>\r\n<\/html>\r\n\r\n<\/code><\/pre>\n
2. css\u4ee3\u7801<\/h2>\n
*{padding: 0;margin: 0; font-size: 14px; color: rgb(214, 65, 65);}\r\na{text-decoration: none;}\r\n\r\n\/* \u6574\u4e2a\u5143\u7d20\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d *\/\r\nbody{\r\n    height: 100vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n\/* \u8bbe\u7f6e\u56fe\u7247\u5143\u7d20\uff0c\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u6ea2\u51fa\u9690\u85cf *\/\r\n.container{\r\n    width: 300px;\r\n    height: 300px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* \u8bbe\u7f6e\u80cc\u666f\u56fe\u7247 *\/\r\n.container .wrap{\r\n    width: 280px;\r\n    height: 280px;\r\n    background: url('..\/image\/\/01.jpg') no-repeat;\r\n    transition: all .3s ease-out;\r\n    background-size: cover;\r\n}\r\n\r\n\/* \u9f20\u6807\u79fb\u5165\u80cc\u666f\u56fe\u653e\u5927\u6548\u679c *\/\r\n.container .wrap:hover{\r\n    transform: scale(1.3);\r\n}\r\n\r\n\/* \u80cc\u666f\u5168\u900f\u660e\uff0c\u5185\u90e8\u5143\u7d20\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d *\/\r\n.container .wrap .bg-wrap{\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: rgba(0, 0, 0, 0);\r\n    transition: all 0.3s ease-out;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    position: relative;\r\n}\r\n\/* \u80cc\u666f\u900f\u660e\u663e\u793a *\/\r\n.container .wrap:hover .bg-wrap{\r\n    background-color: rgba(0, 0, 0, .4);\r\n}\r\n\r\n\/* \u5143\u7d20\u91cd\u53e0\u6548\u679c *\/\r\n.container .wrap .bg-wrap h3,p,span{\r\n    position: absolute;\r\n    transition: all .3s ease-out;\r\n    color: white;\r\n    opacity: 0;\r\n}\r\n\r\n\/* \u4e0a\u9762\u5143\u7d20\u5411\u4e0a\u79fb\u52a8\uff0c\u653e\u5927\u6548\u679c *\/\r\n.container .wrap:hover .bg-wrap h3{\r\n    opacity: 1;\r\n    transform: translateY(-40px) scale(1.3);\r\n    font-size: 14px;\r\n}\r\n\r\n\/* \u4e2d\u95f4\u5143\u7d20\u653e\u5927\u6548\u679c *\/\r\n.container .wrap:hover .bg-wrap p{\r\n    transform: translateY(0) scale(1.3);\r\n    font-size: 12px;\r\n    opacity: 1;\r\n}\r\n\r\n\/* \u4e0b\u9762\u5143\u7d20\u5411\u4e0b\u79fb\u52a8\uff0c\u653e\u5927\u6548\u679c *\/\r\n.container .wrap:hover .bg-wrap span{\r\n    transform: translateY(40px) scale(1.3);\r\n    opacity: 1;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
    1. html\u4ee3\u7801 <!DOCTYPE html> <html  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[105,147],"tags":[148],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2968"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2968"}],"version-history":[{"count":1,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2968\/revisions"}],"predecessor-version":[{"id":2970,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2968\/revisions\/2970"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}